前言

在前端开发中，我们可以用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/