CSS简要发展历史
- CSS1：解决网页排版布局和装饰问题，第一有“层叠（casading）概念的语言”
- CCS2：表现和内容分离
- CSS2.1：对CSS2的修正、扩展，代替CSS2
- CSS3：规范模块化发展，样式丰富、酷炫，提高网站的可维护性以及性能速度
层叠、优先级
样式表来源 => 选择器优先级 => 源码位置 （优先程度递减）
样式表来源重要排序
用户代理样式 => 用户样式表 => 作者样式表 => 作者样式表中的!important => 用户样式表中的!important => 用户代理样式表中的!important （重要程度递增）
选择器优先级
内联 > id > class = attribute = pseudo-class > type = pseudo-element
源码顺序
- 对于@import的样式，根据@import的顺序
- 对于link和style标签的样式，根据在document中的顺序决定
注意
- 选择器尽量少用id
- 尽量不要用!important
- 自己的样式加载在引用库样式的后面
继承
- 大部分具有继承特性的属性跟文本相关，还有少部分列表、表格的属性
- 可以使用inherit关键字显式指定一个属性值从其父元素继承
盒模型
浏览器根据视觉格式化模型，将所有元素表示为盒子模型，css通过盒模型做layout
负外边距
- 设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠
- 如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来
块级格式化上下文（block formatting context）
BFC是一种格式规。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是上面，但是它的内部显示类型是flow-root。其实就是这个盒子内部形成了一个新的块级格式化上下文。
触发条件
- display: flow-root | inline-block
- position: absolute | fixed
- float: 不为none
- overflow: 不为visible
