共 32 道 CSS 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
两种盒模型 1. 标准盒模型（content-box） - width/height = 内容区域 - 实际宽度 = width + padding + border + margin 2. 怪异盒模…
优先级权重 从高到低： 等级 类型 权重 示例 ------ ------ ------ ------ 1 !important 最高 color: red !important 2 内联样式 100…
BFC （Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，内部元素的布局不会影响外部。 创建 BFC 的条件 - float 不为 none - positi…
方法 1：Flex（推荐） 方法 2：Grid 方法 3：绝对定位 + transform 方法 4：绝对定位 + margin auto 方法 5：绝对定位 + 负 margin 方法 6：tabl…
五种定位 值 脱离文档流 定位参照 适用场景 ------ ----------- ---------- ---------- static ❌ 默认流 默认值 relative ❌ 自身原始位置 微…
Flex 布局有两个轴： 主轴 （main axis）和 交叉轴 （cross axis），由 flex-direction 决定。 容器属性 flex-direction — 主轴方向 justif…
flex-grow（放大） 当容器有 剩余空间 时，按比例分配。 计算过程： 1. 初始总宽度 = 100 + 100 + 100 = 300px 2. 剩余空间 = 600 - 300 = 300p…
进阶：圣杯布局（中间优先加载） 其他方案对比 Grid 方案（更简洁）： float 方案（传统）：
区别 属性 作用对象 需要 flex-wrap 场景 ------ ---------- --------------- ------ align-items 单行 项目 ❌ 控制每行项目在交叉轴的对…
gap 属性（推荐） gap 是 row-gap 和 column-gap 的简写，Flex、Grid 都支持。 兼容性 - Chrome 84+、Firefox 63+、Safari 14.1+ -…
Grid 是二维布局系统，可以同时控制行和列。 容器属性 项目属性 fr 单位 fr（fraction）是比例单位： repeat 和 auto-fill grid-template-areas（命名…
原理 - auto-fill：自动填充尽可能多的列 - minmax(280px, 1fr)：每列最小 280px，最大等分剩余空间 - 当容器宽度 < 280px 时，自动变为单列 - 当容器宽度增…
响应式调整 HTML 优势 - 使用 grid-template-areas 布局极其直观 - 响应式只需修改 grid-template 定义 - DOM 顺序可以任意排列，通过 grid-area…
核心区别 特性 Flex Grid ------ ------ ------ 维度 一维 （行或列） 二维 （行和列） 设计思路 内容优先 布局优先 适合 组件内布局 页面整体布局 项目排列 自动流式…
方法 1：基于网格线 方法 2：span 关键字 方法 3：grid-area（简写） 实际示例：仪表盘布局 注意事项 - 网格线编号从 1 开始 - 也可以用负数从后往前数：grid-column:…
1. 媒体查询（Media Query） 2. viewport meta 标签 3. 相对单位 4. 响应式图片 5. Container Queries（CSS新特性） 断点建议 最佳实践 - 移…
单位对比 单位 相对于 特点 ------ -------- ------ px 绝对像素 固定不变，不随用户设置缩放 em 父元素字体大小 嵌套时会 累积 rem 根元素（html）字体大小 全局统…
问题原因 在 Retina 高清屏上，设备像素比（DPR）通常为 2 或 3，CSS 的 1px 实际显示为 2 3 个物理像素，看起来偏粗。 解决方案 1. transform 缩放（推荐） 2. …
1. 1px 边框问题 （详见 CSS-018） 2. 100vh 问题 移动端浏览器的地址栏伸缩会导致 100vh 不准确： 3. 点击延迟（300ms） 移动端 click 事件有 300ms 延…
transition（过渡） 状态变化时平滑过渡，需要 触发条件 （如 :hover、class 切换）。 animation（动画） 自动执行，无需触发，可设循环次数、方向等。 对比 特性 tran…
重排（Reflow）vs 重绘（Repaint）vs 合成 操作 性能 属性示例 ------ ------ ---------- 重排 最差 width、height、margin、top、left…
1. 旋转加载（最常见） 2. 三点跳动 3. 脉冲效果 4. 骨架屏 5. 淡入上滑 6. prefers-reduced-motion 适配
cubic-bezier() 定义动画的速度曲线，通过两个控制点决定贝塞尔曲线的形状。 语法 - (x1, y1)：第一个控制点 - (x2, y2)：第二个控制点 - 起点固定为 (0, 0)，终点…
区别 - 伪类 （:）：选择处于特定 状态 的元素，单冒号 - 伪元素 （::）：创建不存在于 DOM 的 虚拟元素 ，双冒号 常见伪类 交互状态： 结构选择： 表单伪类： 常见伪元素 ::befor…
基本用法 优势（vs Sass/Less 变量） 特性 CSS 变量 Sass/Less 变量 ------ ---------- ---------------- 运行时修改 ✅ ❌ 编译后固定 J…
CSS 中有四种格式化上下文（Formatting Context）： BFC — 块级格式化上下文 Block Formatting Context - 块级盒子参与布局的上下文 - 内部盒子垂直排…
margin 折叠规则 相邻的 垂直方向 margin 会合并（取较大值）， 水平方向 不折叠。 三种折叠场景 1. 相邻兄弟元素 2. 父元素与第一个/最后一个子元素 3. 空块元素自身的上下 ma…
层叠上下文 （Stacking Context）是 CSS 中决定元素在 z 轴上渲染顺序的概念。 创建层叠上下文的条件 1. 根元素 <html （天然是层叠上下文） 2. position 非 s…
问题原因 子元素设置 float 后脱离文档流，父元素高度不会包含浮动子元素，导致父元素高度塌陷。 清除浮动的方法 1. display: flow-root（推荐，最简洁） 2. overflow:…
1. BEM（Block Element Modifier） - ✅ 语义清晰、避免冲突 - ❌ 名称冗长、需要手动维护 2. CSS Modules - ✅ 编译时自动生成唯一类名，天然隔离 - ✅…
按「从外到内、从存在到生效」的顺序排查： 1. 样式文件是否真的加载了 - 打开 DevTools - Network，确认 CSS 文件 200 且内容包含你写的规则（排除路径写错、被缓存、构建未生…
单行省略号（三件套，缺一不可） 多行省略号（WebKit 方案，-webkit-line-clamp） 注意：-webkit-line-clamp 依赖 -webkit-box，现代浏览器（Chrom…