前言
在前端开发中，我们可以用CSS设置元素的样式，美化界面，也可以用CSS设置元素布局，即格式化上下文(Formatting Context)，简称为FC
盒模型-BOX
我们的页面是由一个个元素组成的，渲染时会将其抽象为一个个的盒(BOX)进行布局渲染
- 元素的类型和display属性，决定了一个Box的类型
- 不同类型的Box，会参与组成不同的FC
我们可以在浏览器控制台输入以下代码，标注查看当前页面的所有盒(BOX)：
如下图，盒子模型主要由四部分组成：
- 内容区(Content)：实际内容显示的区域，它的大小可以通过width和height属性来设置
- 内边距(Padding)：内容区与边框之间的空间，可以通过padding属性来设置，padding不透明且会影响元素的实际尺寸
- 边框(Border)：环绕在内边距之外的边界，可以通过border属性来设置，边框的宽度会增加元素的总尺寸
- 外边距(Margin)：边框之外的空间，可以通过margin属性来设置，外边距透明并且不影响元素的实际尺寸，但会影响元素之间的距离
每个Box都有一个内容区，并可选配内边距、边框和外边距(其值可为零，边距值可为负数)
内边距、边框和外边距都可分解为上下左右四个段，并且可以分开独立控制其属性
Box-Sizing属性
box-sizing属性规定了Box的计算方式：
- content-box(默认值)：width和height只包含内容区，不包括内边距、边框和外边距
- border-box：width和height包含内容区、内边距和边框，但不包括外边距
冷知识：display属性有32个可选值
格式化上下文-FC
Formatting context(FC：格式化上下文)，是W3C CSS2.1规范中的一个概念
它是页面中的一块渲染区域，并且有一套渲染规则，其决定了元素是如何排布、对齐和交互的
常见的FC有：
- BFC — 块级格式化上下文(Block Formatting Context)
- IFC — 行内格式化上下文(Inline Formatting Context)
- GFC — 网格格式化上下文(Grids Formatting Context)
- FFC — 弹性盒格式化上下文(Flexible Formatting Context)
其中，GFC和FFC就是CSS3引入的新布局模型
BFC
BFC，即块级格式化上下文，用于控制块级元素布局，每个BFC都是一个独立的渲染区域，元素在这个区域内按照一定的规则进行布局，互不影响
特性
外边距折叠：同一个BFC内的相邻块级元素的上下外边距会合并(重叠)，以较大的为准
包含浮动元素：BFC可以包含浮动元素，不会被浮动元素影响(利用该特性可清除浮动)，计算BFC的高度时，其内的浮动元素也参与计算
防止文字环绕浮动元素：BFC区域(BFC内的块级盒子)不会与浮动元素区域重叠
创建方式
- float属性不为none
- position属性为absolute或fixed
- display属性为inline-block、table-cell、table-caption、flex、inline-flex、flow或flow-root
- overflow属性不为visible(即为hidden、scroll和auto)
应用场景
- 清除浮动
- 防止外边距折叠
- 包含浮动元素
应用举例
如上图，有a、b两个盒子，a盒子有30的下外边距，b盒子有50的上外边距，两者相邻只展示50外边距(即30与50重叠，展示较大的)
如不想重叠，可以给a或b外部再包围一个父级盒子，然后将其创建为一个新的BFC，如下：
IFC
IFC，即行内元素格式化上下文，按照行框模型进行布局，IFC中的元素会水平排列成一行或多行，每一行称为一个行框(line box)；一个IFC可以有多个行框
特性
水平排列：行内元素在水平方向上排列，直到当前行容不下更多元素为止，然后换行；水平方向的padding、border、margin都有效，垂直方向的不被计算
水平对齐：可以通过text-align属性来控制行内元素的水平对齐方式
浮动优先排列：行框的宽度是由包含块和与其中的浮动元素来决定，一般情况从左到右按先后顺序排列，但float元素会优先排列
不破坏文档流：IFC不会影响块级元素的布局，不会创建新的BFC
创建方式
行内元素或display: inline;
应用场景
- 行内元素的排列和对齐
- 控制文字和行内元素的布局
FFC
FFC是由Flexbox布局创建的格式化上下文，Flexbox布局是一种用于一维布局的强大工具，可以方便地对齐和分布容器内的元素，无论是垂直还是水平方向
特性
弹性盒模型：在FFC中，子元素称为弹性项目(flex items)，它们可以根据可用空间灵活地调整自己的大小
主轴和交叉轴：FFC有两个轴，主轴(main axis)和交叉轴(cross axis)，元素可以沿着这两个轴进行排列
对齐和分布：可以使用各种属性如justify-content、align-items和align-content来控制弹性项目的对齐和分布方式
创建方式
将display属性设置为flex或inline-flex
应用场景
- 创建响应式布局
- 水平和垂直居中
- 动态调整元素大小
GFC
GFC，即由Grid布局创建的格式化上下文，Grid布局是一种用于二维布局的强大工具，可以精确地控制容器内元素的排列和对齐
特性
- 网格模型：在GFC中，容器被划分为行和列，子元素称为网格项目(grid items)，可以放置在任意网格单元格中
- 行和列的定义：可以使用grid-template-rows和grid-template-columns来定义网格的行和列
- 区域和单元格的对齐：可以使用grid-area、justify-items和align-items等属性来控制网格项目的排列和对齐
创建方式
将display属性设置为grid或inline-grid
应用场景
- 创建复杂的页面布局
- 精确控制元素的位置和对齐
- 响应式设计
参考资料
CSS Box Level：https://www.w3.org/TR/css-box-3/#intro
CSS Display：https://www.w3.org/TR/css-display-3/