文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第3天
布局
布局包括常规流、浮动和绝对定位。其中，常规流包括行级 块级 表格布局 Flex布局 Grid布局
块级和行级
display属性
display: [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
display-outside指定了元素在流式布局中的角色
可选值：
- block 块级元素
- inline 行内元素
display-inside 指定了元素内部内容的布局方式
可选值：
- flow-root 该元素生成一个块元素框，它建立一个新的块格式化上下文，定义格式化根的位置。
- table 类似HTML中的元素
- flex 类似块元素，根据flexbox模型布置内部
- grid 类似块元素，并根据网格模型布置内部
- 盒子在一行内水平摆放
- 行放不下时，换行显示
- text- align决定一行内盒子的水平对齐
- vertical align决定个盒子在行内的垂直对齐
- 避开浮动(loat)元素*
- 根元素
- 浮动、绝对定位、inline-blockFlex子项和Grid子项
- overflow值不是 visible 的块盒
- display: flow-root;
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的 margin不会与外面的合并
- BFC不会和浮动元素重香
- 摆放的流向(↑ ↓ ← →)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
display: grid;使元素生成一个块级的Grid容器- 使用 grid-template 相关属性将容器划分为网络
- 设置每一个子项占哪些行列
- 同一层相邻两个元素的外边距重叠
- 没有内容将父元素和后代元素分开
- 空的块元素
行级排版上下文 IFC
IFC: Inline Formatting Context
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
块级排版上下文 BFC
BFC: Block Formatting Context (BFC)
某些容器会创建一个BFC
BFC内的排版规则:
表格布局 table
Flex布局
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。
概念
—种新的排版上下文
它可以控制子级盒子的:
flex-direction
justify-content
水平方向
align-items
垂直方向
Grid布局
盒模型 box-sizing
标准盒模型 content-box
如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
当
box-sizing: content-box时,设置的width和height分别指向内容区content的宽高
怪异盒模型 border-box
设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。border-box不包含margin
当box-sizing: border-box时，设置的width和height包括内容区content、内边距padding、边框border
外边距重叠 margin collapse
会形成外边距重叠的三种情况：
清除边距重叠
1. 设置float属性 float属性值不为none
2. 设置position属性 position属性值不为static
3. 清除浮动clearfix
.container::after {
content: '';
display: block;
clear: both;
}
