box-sizing
标准默认盒模型为
content-box，width和height只包含宽高，不包含边框以及内外边距。
而如图的border-box包含内边距和边框，不包含外边距，其尺寸计算公式为：
width= border + padding + 内容的宽度height= border + padding + 内容的高度
块级 vs 行级
我们可以通过display属性修改生成的盒子：
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒子中，可以设置宽高，作为一个整体不会拆散成多行
- none：排版时完全忽略
IFC
只包含行级盒子的容器会创建一个IFC（Inline Formatting Context），即行级排版上下文。
IFC排版规则：
- 盒子在一行内水平排放
- 一行放不下，换行显示
text-align决定一行内的水平对齐vertical-align决定一个盒子在行内的垂直对齐- 避开浮动(float)元素
BFC
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Grid子项
- overflow值不是visible
display: flow-root;以上内容会创建一个BFC（Block Formatting Context），即块级排版上下文。
BFC排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
overflow
当元素内容超出BFC时：
- visible：默认值，内容不会被修剪，会呈现在元素框之外
- hidden：内容会被修剪，并且其余内容不可见
- scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容
Flex Box
display: flex;一种新的排版上下文，可以控制子级盒子的：
- 摆放流向
- 摆放顺序
- 宽高
- 水平和垂直方向的对齐
- 是否允许折行
一些基础属性如下图：
Flexibility
可以设置子项的弹性，当容器有剩余空间，会伸展，否则会收缩
- flex-grow：有剩余空间时的伸展能力，初始值为1
- flex-shrink：空间不足时的收缩能力，初始值为1
flex-basis：没有压缩或伸展时的基础长度
其中flex-shrink为0时，盒子为刚性盒子，不可被压缩。而且需要注意的是，伸展是用满足了基础长度后的剩余长度来分配的。
可以简写，如图左边=右边：
Grid
display: grid;与Flex Box不同，Grid会形成一个二维的布局：
可以通过grid-area选择网格区域：
浮动 float
多用于图文环绕内容：
position
fixed常用于网页上方固定的导航栏，如示例。
一些建议
- 充分利用MDN Web Docs 和 W3C CSS规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还在不断出现
