CSS 常见面试题汇总

1. 盒模型

盒子模型由 content、padding、border、margin 组成，标准盒子模型下 width/height 只包含 content；IE 怪异盒子模型下 width/height 包含 padding 和 border。通过 box-sizing: border-box 可切换为 IE 模型。

2. BFC 的理解

BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，内部元素的布局不会影响外部。常见触发条件：

float 不为 none；
position 为 absolute 或 fixed；
overflow 不为 visible；
display 为 inline-block/table-cell/table-caption/flex/grid/flow-root 等；
根元素。

应用场景：清除浮动、防止 margin 合并、实现两栏/三栏自适应布局。

3. 选择器

基本选择器：*, 标签, .class, #id, [attr], ::伪元素, :伪类, 组合器（、>、+、~）。

4. 层叠上下文

由 position: relative/absolute/fixed + z-index, opacity < 1, transform, filter, will-change 等创建。同一层叠上下文中 z-index 决定绘制顺序。

5. 三栏布局（position, flex, float）

三栏布局的常见方案：圣杯/双飞翼（float）、flex、grid。

6. 自适应布局 rem 原理（如何兼容不同手机 dpi）

通过动态设置 html { font-size: width / N } 让 1rem = 屏幕宽度的 1/N，布局全部用 rem 单位实现等比缩放；不同 dpi 设备通过 devicePixelRatio 调整 N 或使用 vw 单位。

7. font-size: 10px 如何实现

由于浏览器最小字号限制，Chrome 不允许直接设置小于 12px 的字号。常用方案：-webkit-transform: scale()、SVG、Canvas、图片替代，或通过 rem + 缩放根字号实现。

8. 移动端：像素、媒体查询

详见 css-013 / css-068；移动端布局核心是 viewport meta + rem/vw + 媒体查询。

补充：这是 CSS 面试的高频考纲汇总，每个点都可以独立深挖成一道题，建议结合 css-001/css-005/css-013/css-016/css-017/css-049 等文件阅读。