本文共 1046 字，大约阅读时间需要 3 分钟。

z-index的层级关系及CSS中的层叠上下文

在CSS中，层叠上下文（Stacking Context）是一个三维的概念。页面上的元素通常只在X轴和Y轴上显示，Z轴上的层叠关系则决定了元素的覆盖关系。层叠上下文元素在Z轴上比其他元素更高，会覆盖其他元素的显示。

水平垂直居中方法

元素居中的方法有多种： - **行内元素**：父元素设置`display: table-cell`，并结合`vertical-align: middle`和`text-align: center`。 - **快速定位**：使用绝对定位，设定`top: 50%`和`right: 50%`，再根据需要反推父容器的宽高。 - **Flex布局**：父元素设置为`flex`布局，使用`align-items: center`和`justify-content: center`。 - **已知尺寸**：使用`position: absolute`，并将`top: 0`、`right: 0`、`bottom: 0`、`left: 0`，再结合`margin: auto`。

BFC（块级格式化上下文）的触发及作用

BFC的触发条件包括： 1. 根元素； 2. 使用`float`属性的元素； 3. `position: absolute`或`fixed`的元素； 4. `display: inline-block`、`table-cell`、`table-caption`、`flex`等布局； 5. `overflow`属性不为`visible`的元素。

BFC的作用包括：解决`margin`重叠问题、清除浮动高度塌陷、隔离浮动元素等。

IFC（内联格式化上下文）的概念及布局规则

IFC生成的条件是：块级元素中仅包含内联级别的元素。IFC的布局规则包括： 1. 行框从包含块的顶部开始，水平排列； 2. 水平方向的`margin`、`padding`和`border`有效，垂直方向无效； 3. 行框的宽度由包含块和浮动决定，高度由行高决定。

box-sizing属性的作用

box-sizing属性定义了元素的宽度和高度计算方式。 - `content-box`：宽度和高度仅应用于内容区域，边框和内边距不计入。 - `border-box`：宽度和高度包括边框和内边距，计算内容区域时需减去边框和内边距。

CSS优先级计算规则

CSS优先级顺序为： 1. `!important`； 2. 内联样式（`