一、 盒模型必考送分题面试官问“说一说你对盒模型的理解box-sizing有什么用”标准盒模型W3Cwidth 内容宽度content。padding 和 border 会向外撑大元素。怪异盒模型IEwidth content padding border。padding 和 border 向内压缩。高分答案我会立即在项目初始化时设置* { box-sizing: border-box; }这样子元素设置width: 100%并加 padding 时不会溢出父容器布局更符合直觉。二、 CSS 优先级与层叠考察逻辑严谨性面试官问“内联样式、!important、ID、类、标签选择器的权重如何计算如何覆盖第三方库的样式”权重等级四位数内联样式 (1000) ID (0100) 类/伪类/属性 (0010) 标签/伪元素 (0001)。注意!important直接破坏权重规则除非覆盖更大范围的 !important否则无解工作中慎用。加分技巧覆盖第三方库如 Ant Design时优先建议通过CSS Modules或:deep()/:global()增加作用域类名权重而不是无脑加!important。三、 经典布局居中考代码实操面试官问“让一个不定宽高的子元素在父元素中水平垂直居中写出至少 3 种方法。”方案适用场景核心代码父元素Flex (最推荐)移动端/现代 PCdisplay: flex; justify-content: center; align-items: center;Grid二维布局场景display: grid; place-items: center;绝对定位 Transform弹窗/固定悬浮层position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);注意此处不需要给子元素定宽高四、 布局进化史浮动、Flex 与 Grid必问底层原理清除浮动问浮动必问“为什么要清除”答父容器高度塌陷。高频手写题——如何清除浮动答案父元素overflow: hidden或使用伪元素::after { content: ; display: block; clear: both; }。Flex 与 Grid 的区别重要Flex一维布局主轴/交叉轴。适合导航栏、列表排列、组件内部对齐。Grid二维布局行和列同时控制。适合整体页面框架、复杂画廊。面试潜台词如果你只用 Flex 做整体大布局面试官会觉得你落伍了。正确话术“栅格化系统用 Grid组件内部细节对齐用 Flex。”五、 层叠上下文与 BFC区分菜鸟与熟手的分水岭面试官问“什么是 BFC它解决了什么问题如何触发”定义块级格式化上下文它是一个独立的渲染区域内部元素无论怎么折腾浮动/边距都不会影响外部的盒子。三大核心应用清除内部浮动父元素高度不再塌陷。防止外边距合并兄弟元素垂直 margin 重叠。自适应两栏布局左侧浮动右侧触发 BFC 后不会环绕左侧。如何触发overflow: hidden/auto、display: flex/inline-block、position: absolute/fixed。六、 移动端适配与单位考察工程化经验remvsvwvspxpx固定像素用于 1px 边框。rem相对于根元素html字体大小配合 JS 动态修改根字体以实现等比缩放Lib-flexible方案。vw视口宽度的 1%。现代推荐直接使用vw做单位配合postcss-px-to-viewport插件省去计算根字体大小的 JS 开销。1px 物理像素问题高分屏下border:1px变粗。解决方案使用transform: scaleY(0.5)伪元素缩放或使用viewport配合0.01rem。七、 性能优化与重排重绘拉开差距的加分点面试官问“修改 CSS 怎样最省性能”重排Reflow改变几何属性宽高、边距、位置- 代价昂贵。重绘Repaint改变视觉属性颜色、背景、阴影- 代价较低。杀手锏回答批量修改样式时使用classList替换而不是逐一修改style。复杂动画使用position: absolute/fixed脱离文档流减少重排影响范围。使用transform和opacity制作动画这两个属性由合成器线程处理不触发 Layout 和 Paint直接走 GPU 加速最流畅。八、 高频手写 Code Review 题你能一眼看出 bug 吗题目父元素height: auto;子元素全部float: left;父元素背景色消失了为什么怎么改答案高度塌陷。改法父元素加overflow: hidden或display: flow-root触发 BFC。
