在前端面试里，CSS看似简单，却藏着大量考察底层理解的题目。很多候选人能写出布局，但被问到渲染细节就卡壳。下面我们通过具体题目来拆解核心知识点。
一、盒模型与尺寸计算到底差在哪里
盒模型是CSS布局的基础，但标准盒模型（content-box）和怪异盒模型（border-box）在宽度分配上完全不同。在content-box下，开发者设定的width仅指内容区，加上padding和border后元素总占用宽度会超出预期，这在响应式开发中常常引发横向滚动条。而border-box把padding和border算进设定的width内，内容区自动缩减，更容易控制整体尺寸。
举个例子，一个元素设定width为200px、padding为20px、border为5px。如果是content-box，实际占位宽度是200+40+10=250px；如果是border-box，占位宽度恒为200px，内容区只剩150px。这种差异在嵌套布局中会被放大，因此现代框架如Bootstrap默认使用border-box。
可以通过box-sizing属性切换模式。建议在项目初始化时就全局设定为border-box，避免后续逐个调试。下面代码演示了两种模型对比：
/* 标准盒模型 */
.box-standard {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
}
/* 怪异盒模型 */
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
}
二、层叠上下文为何让z-index失效
层叠上下文是CSS中控制绘制顺序的机制。很多开发者以为z-index数值大就一定会盖住别人，其实只有当元素处于同一层叠上下文时比较才有意义。如果父级触发了新的层叠上下文，子元素的z-index只能在父级内部排高低，无法跨父级压住其他分支的元素。
常见触发层叠上下文的属性包括：position值为absolute或relative且z-index不为auto；opacity小于1；transform、filter、perspective等非none值；以及flex子项设置z-index等。这意味着即便子元素写z-index:9999，若其父级因transform生成了新上下文，它依旧可能被外层普通元素遮挡。
面试中常问：两个同级div，A有opacity:0.5，B无特殊属性，A内子元素z-index再高能否盖过B？答案是不能，因为A自身成了层叠上下文根，其子级被限制在A内。可用以下结构验证：
<div style="opacity:0.5; position:relative;"> <div style="z-index:9999; position:absolute;">我在A里</div> </div> <div style="position:relative; z-index:1;">我是B</div>
三、浮动与BFC如何清理布局混乱
浮动早期用于图文混排，但脱离文档流后会导致父容器高度塌陷。清除浮动的方法很多，但理解BFC（块级格式化上下文）才能从根本上解释原理。BFC是一个独立渲染区域，内部布局不影响外部，且能包含浮动子元素。
触发BFC的方式包括overflow非visible、display为flow-root或inline-block、position为absolute等。当父级形成BFC，它就会计算浮动子元素的高度，从而撑开自身。相比加空div清浮动，BFC方案语义更清晰且无多余节点。
下面用overflow:hidden触发BFC解决塌陷，代码直观展示前后差异：
.parent {
overflow: hidden; /* 触发BFC，包含浮动 */
}
.child {
float: left;
width: 100px;
height: 100px;
background: #c00;
}
此外，面试还常考垂直外边距塌陷、flex布局替代浮动、伪类选择器的权重计算等。把这些机制串起来，就能从原理层面回答七道核心题目，而不是背答案。
四、选择器权重与继承陷阱怎么答
CSS优先级常简化为行内样式、ID、类、标签的权重计数，但继承属性不参与权重比较，它只是兜底值。比如body设了color，子元素未设颜色时继承生效；一旦子元素有任何直接颜色声明，哪怕权重极低，也会覆盖继承。
另一个易错点是!important提升的是声明优先级，并不改变选择器本身权重，且维护困难。面试中应避免滥用，并讲清权重的二进制叠加逻辑：ID是百位，类是十位，标签是个位，组合起来比较大小。
以下示例说明类选择器胜过标签继承，即便标签写在后面：
<style>
p { color: blue; }
.text { color: red; }
</style>
<p class="text">这段文字是红色</p>
五、响应式与媒体查询的真实用法
移动端适配不止写media查询，还要理解视口与相对单位。很多候选人只知min-width断点，却忽略meta视口标签导致页面被缩放。真实工程中常用rem配合根字体动态计算，或采用CSS Grid的auto-fit实现弹性列数。
媒体查询应基于内容断裂点而非设备名称。例如当容器小于600px时由两栏变一栏，而非死记手机尺寸。下面代码展示基础响应式切换：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px;
}
@media (max-width: 600px) {
.item { flex-basis: 100%; }
}
把上述五个角度加上动画性能、CSS变量作用域等，就凑齐了七道能筛出真水平的题目。理解渲染树而不是记忆属性，才是面试过关关键。