CSS带来丰富的交互行为和视觉效果，还能精准传递信息
目标
- 讲解部分CSS知识模块，如布局、层叠上下文等
- 讲解一些CSS生态相关的知识
- 提供一个简明的知识脉络
发展史
- 1996 CSS1 解决网页排版布局和装饰问题
- 1998
- CSS2 表现与内容分离，HTML负责内容，CSS负责表现
- CSS2.1 修正、扩展、代替CSS2
- 2001 CSS3 模块化发展，提高网站的可维护性以及性能速度
基础知识
层叠（Cascading）和优先级
三大规则（优先度从上往下递减）
- 样式表来源：代理<用户<开发者
- 选择器：（内联>）id > class > type
- 源码位置：越后的优先级越高，因为会覆盖
注意
- 少用id选择器，id唯一，不利于CSS代码复用
- 尽量不用!important,这是最高优先级，会削弱灵活性和拓展性
- 自己的样式加载在引用库后，保证代码生效
继承
属性从父继承到子，可以用inherit关键词作为值指定一个属性从其父元素继承
h1{
font-size:18px;
}
.card{
font-size:14px;
}
h1 .card{
font-size:inherit; /*h1下的card类font-size为18px*/
}
CSS的值和单位
盒模型
视觉格式化模型的基础
负外边距
- 设置左边或顶部的margin，可以把自己拉到与左或上盒子相交
- 设置右边或底部的margin，可以把右或下盒子拉到与自己相交
布局
概述
CSS3前 常规流、浮动流、定位流 CSS3后 flex弹性盒子布局、grid网格布局、multicol多列布局
常规流
块级盒子和块级格式化上下文
BFC
把父元素或兄元素设为BFC可以避免外边距塌陷
内联级盒子和内联级格式化上下文
flex 弹性盒子布局
高效灵活的布局方式
grid 网格布局
二维布局方式
flex & grid
层叠上下文
对HTML的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
建议
- 使用CSS变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置为10或100，方便后续的插入
变形 过渡 动画
transform 变形
transition 过渡
通过指定某些元素属性从一种起始状态，在一段时间以某种变化节奏，过渡到终止形态
