这是我参与「第五届青训营 」笔记创作活动的第5天~
一、本堂课内容重点
1.盒模型常见布局规则
HTML中的元素可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。
（1）行级（Inline Level Box）
行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span,input等元素。
（2）块级（Block Level Box）
块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p,ul,form,div等标签元素。
区别
| 块级 | 行级 |
|---|---|
| 不和其它盒子并列摆放且适用所有的盒模型属性 | 和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用 |
| 生成块级盒子 | 生成行级盒子，内容分散在多个行盒 (line box)中 |
| body、article、div、main、section、h1-6、p、ul、li 等 | span、em、strong、cite、code 等 |
| display: block | display: inline |
display属性
| 属性类别 | 说明 |
|---|---|
| block | 块级盒子 |
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
2.常规流
视觉格式化模型（布局规则）：页面中的多个盒子排列规则，大体上将页面中盒子的排列分为三种：常规流、浮动、定位
常规流：所有元素，默认情况下，默认都属于常规流布局
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内 (in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
（1）行级排版上下文
只包含行级盒子的容器会创建一个IFC（Inline Formatting Context)。 IFC 内的排版规则：
- 盒子在一行内水平摆放一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
（2）块级排版上下文
某些容器会创建一个BFC（Block Formatting Context)
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
BFC内排版规则：
- 盒子从上到下摆放
- 垂直margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
（3）Table 排版上下文
表格布局有两种实现方式：一种是HTML Table（<table>等相关标签和属性）和CSS Table（display:table等相关属性）。
（4）Flex 排版上下文
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
（5）Grid 排版上下文
Grid布局即网格布局是一种二维布局，可以同时控制行和列的排布和对齐方式，grid布局由水平线和垂直线构成，两条水平线之间的区域叫做行轨道，两条垂直线的区域叫做列轨道。
二、个人总结
重点：
- 盒模型常见的两种布局规则
- 常规流的几种排版上下文规则
