常见的布局规则
块级（Block Level Box）
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
块级元素
- 生成块级盒子
- 例如：body、article、div、main、section、h1-6、p、ul、li等
- 可以通过display转化成行级
行级(Inline Level Box)
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用
行级元素
- 生成行级盒子
- 内容分散在多个行盒（line box）中
- 例如：span、em、strong、cite、code等
- 可以通过display转化成块级
display属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
- none：排版时完全被忽略
常规流（Normal Flow）
- 根元素、活动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- Inline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行入不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素*
块级排版上下文
- Block Formatting Context（BFC）
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-box
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内的盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向（上下左右）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
display:grid
- display:grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置第一个子项占哪些行/列
position属性
- static：默认值，非定位元素
- relative：相对自身原本位置偏移，不脱离文档流
- absolute：绝对定位，相对非static祖先元素定位
- fixed：相对于视口绝对定位
position:relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其它元素当它没有偏移一样布局
position:absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
总结
对于学习CSS，要充分利用MDN和W3C CSS规范，要保持好奇心，善用浏览器的开发者工具，要持续学习。
