基础知识
层叠（Casading）规则、优先级
Good Practice
- 选择器尽量少用id
- 尽量不要用important
- 自己的样式加载在引用库样式的后面
继承
CSS的值和单位
盒模型
由盒模型的特性能实现一些展示形式
mrgin auto的更多表现
盒模型-负外边距
padding、border、margin中，只有margin可以设置负值
margin负值最终减少的是外界可感知的宽高
布局
概述
常规流布局
块级格式化上下文(block formatting context)
格式化上下文的布局规范为
“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin"属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序,则盒子的右外边缘与包含块右边缘重合)。”
BFC本身是block formatting contextl的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是low-root,其实就是这个盒子内部形成了一个新的块级格式化上下文。
如何触发一个盒子的BFC特性:
- display:flow-root| inline-blocl;
- position: absolute | fixed;
- float: 不为none;
- overflow: 不为 visible
外边距塌陷
会产生外边距塌陷的情况:
- 两个兄弟元素之间的相邻上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
消除外边距塌陷的方法:
- 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻；
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子在不同级BFC中 了解更多BFC特性
内联级格式化上下文
在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。
内联级格式化上下文
弹性盒子布局
Flexible Box Layout是为了提供更加高效灵活的布局方式，在
即便是宽高未知的情况下，也能排列和分割一个盒子内部的布
局。而且在不同布局方向（横向/纵向）的调整更为灵活。
弹性盒子布局的示例
网格布局
元素可以只占用其中一个单元格,也可以占据多行或多列
使用Grid布局的示例
