CSS布局，是一种基于盒子与其兄弟、祖辈盒子的交互方式来确定盒子的位置和大小的算法。常见的布局相关技术有常规流布局、弹性布局、网格布局、浮动、绝对定位。
想要深入了解布局，首先需要对CSS中的盒子模型有一定的认知。
1. CSS盒模型
- 宽高 （width|height）
默认情况下（content-box），width的设置是在指定content box 宽度，属性值可取长度、百分数、auto；百分数计算是根据相对容器的content box决定盒子实际渲染宽度（容器有指定高度时，百分数才会生效），auto则由浏览器根据其他属性确定。
拓展：
浏览器默认的CSS盒模型的计算模式是content-box，在该模式下元素的 width | height 等于内容宽度。而通过box-sizing:border-box;规定容器元素的最终尺寸计算模式为border-box时，元素的width | height = 内容宽|高＋左右内边距|上下内边距 + 左右边框宽度|上下边框宽度 的数值。
（height（高度）的设置类似。）
- 内边距 padding
内外边距可设置长度、百分数。百分数的实际渲染计算依据容器宽度进行计算。
- 外边距 margin
外边距类似，但不同的是外边距还能设置auto为属性值，利用margin-left：auto；margin-right：auto；可以实现水平居中。
拓展：
margin存在一个外边距塌陷的问题：并列的两个元素之间互相紧贴着的边都被设置了外边距，浏览器会取其中较大的外边距值来渲染两个容器之间的边距。
- 边框 border
边框可设置容器边框样式（border-style）、粗细（border-width）、颜色（border-color）。
补充：
当内容的长度超过盒子的宽高时存在溢出部分，而溢出内容可通过 overflow 属性来设置不同处理。overflow 可选值： visible（显示溢出部分）、hidden（截掉溢出部分）、scroll（存在溢出部分会显示滚动条，不溢出则正常显示）
2. 布局规则
常规流存在行级、块级两种常见的元素布局规则，其特点和典型标签如下：
行级和块级元素之间可以通过display属性进行转换。
display：[ block（块） | inline（行） | inline-block（行块） | none（排版时忽略） ]
3. 排版上下文
- 行级上下文（IFC）
创建条件： 只包含行级盒子的容器会创建一个IFC。
排版规则:
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
拓展：
当IFC内行级盒子的内容长度超过盒子范围，可以通过overflow-wrap:break-word;设置行级元素溢出内容换行。
- 块级上下文（BFC）
创建条件：容器符合以下特性：根元素 、浮动、绝对定位、inline-block 、Flex子项和Grid子项、overflow值不是visible的块盒、display: flow-root;
BFC内的排版规则如下：
-
盒子从上到下摆放
-
垂直margin合并
-
BFC内盒子的margin不会与外面的合并
-
BFC不会和浮动元素重叠
- 弹性布局（FlexBox）
可以控制子级盒子摆放流向、摆放顺序、盒子宽高、水平垂直方向对齐，这样的特性使得弹性布局的主要应用在于创建横向或是纵向的一维页面布局。
创建条件：对容器设置其样式内display:flex
在FlexBox中可设置的对齐操作依照主轴侧轴决定。主轴对齐（justify-content）是元素流向的平行方向，而侧轴对齐（align-items）是元素流向的垂直方向。Flex布局中的默认流向是从左到右（水平）排列。
扩展：
- Flexibility
可以设置子项的弹性:当容器装载子元素后仍有剩余空间时，会按照比例分配给对应元素，伸展元素的大小;容器空间不够时，会收缩。
- flex-grow 表示有剩余空间时的伸展能力
- flex-shrink 表示容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
flex-grow 、flex-shrink 、 flex-basis 可以缩写成一个属性 flex。缩写后的书写规则如下：
flex:[flex-grow] [flex-shrink] [flex-basis] 三个属性可选择性设置，其中flex-grow和flex-shrink都是设置剩余空间分配占比的，因此这两个属性的属性值是无单位的数值。所以在flex的设置上，若单设置一个不带单位的数值，浏览器会按照上述顺序解析并设置相应的声明，等同于设置flex-grow；若单设置一个带单位则相当于设置flex-basis。
- Grid布局
相较于Flex布局，Grid布局可以使元素在两个维度中按行列排列整齐。
创建条件：通过display: grid使元素生成一个块级的Grid容器;
- grid-template（网格划分）
使用grid-template相关属性将容器划分为网格grid-template-columns设置行网格长度划分grid-template-rows设置列方向上的网格长度划分。 设置划分时可以写具体数值、百分数、auto（自适应剩余空间）、[x] fr（fr表示份，指按照比例占据未划分的空间大小）
- 浮动
主要做图文混排的效果，但由于浮动元素不占空间的特性，设置元素浮动有时会影响到下方的标准流盒子，所以比起浮动，更加常用的布局技术是flex布局和grid布局。
- 定位
通过position属性去设置
position属性是用来设置定位模式的，可选值有static、relative、absolute、fixed、sticky，关于这些定位模式的实现效果以及使用场景如下：
参加青训营学习CSS的过程中，逐渐发现了在学校课程里学的知识不一定是行业内所常用的手段，比如说在校前端学习课中，老师还是比较强调浮动以及浮动带来的影响的，而对于flex和grid却讲得比较少，而青训营的课程中才了解到目前所用的布局技术还是重在后两者，浮动主要用来实现图文并排。总之是，大为震撼。
总结：学习还是要多去接触不同的渠道以及主动些学，而不是被动的将知识塞进脑子里。
os：玩不明白文章编写的排版，直接在typora记录的笔记里复制过来的排版也会乱，只能重新编排，艰难...。
