CSS 面试
01-面试2026/11/14
CSS 面试的分水岭不在会不会写样式，而在能不能说清「浏览器按什么规则算出这个结果」——盒模型、层叠、格式化上下文，三件事解释了绝大多数「为什么没生效」。
盒模型
box-sizing: content-box（默认）下 width 只算内容区，border-box 下 width 含 padding 与 border。
*, *::before, *::after { box-sizing: border-box; }
追问会往「为什么现在普遍用 border-box」走：因为它让宽度可预测，width: 100% 加左右 padding 不会撑破容器。代价是 height 也把 padding 算进去，做等高布局时要留意。
选择器权重与层叠
权重按四元组比较，不是十进制相加：
| 权重位 | 来源 | 示例 |
|---|---|---|
| (1,0,0,0) | 内联样式 | style="color:red" |
| (0,1,0,0) | ID | #app |
| (0,0,1,0) | 类、属性、伪类 | .btn、[type=text]、:hover |
| (0,0,0,1) | 元素、伪元素 | div、::before |
!important 跳出这套比较；* 与继承来的样式权重为 0。
层叠顺序（从低到高）：浏览器默认 → 用户样式 → 作者样式 → 作者 !important → 用户 !important → 浏览器 !important。同权重时后出现的胜出，这就是「为什么加了样式没生效」的常见答案：不是权重不够，是顺序在后。
:not() 与 :is() 的权重取括号内最高的那个；:where() 权重恒为 0，适合写可覆盖的基础样式。
块级格式化上下文（BFC）
BFC 是一个独立的渲染区域，内部布局不影响外部。触发条件：
/* 任意一条即可 */
overflow: hidden; /* 不等于 visible */
display: flow-root; /* 最干净的写法，无副作用 */
float: left | right;
position: absolute | fixed;
display: inline-block | flex | grid | table-cell;
contain: layout | paint;
它能解决三件事，面试基本都问：
- margin 塌陷：父子元素的上外边距合并，父元素加
overflow: hidden或display: flow-root隔断 - 高度塌陷：子元素浮动导致父元素高度为 0，触发 BFC 后父元素能包住浮动子元素
- 阻止元素被浮动元素覆盖：右侧文字块加 BFC 后不会绕排到浮动元素下方
display: flow-root 是专门为触发 BFC 而生的值，没有 overflow: hidden 裁剪内容、影响滚动条的副作用，现代项目优先用它。
居中
/* 单行文本 */
.center { text-align: center; line-height: 100px; }
/* 绝对定位 + transform，不需要知道尺寸 */
.center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* flex，最通用 */
.center { display: flex; align-items: center; justify-content: center; }
/* grid，一行搞定 */
.center { display: grid; place-items: center; }
/* 块级元素水平居中（有确定宽度） */
.center { margin: 0 auto; }