CSS
1 盒模型
标准盒模型 vs IE 盒模型？box-sizing？
标准盒模型（content-box）：width/height 只包含 content，padding + border 另算。
IE 盒模型（border-box）：width/height 包含 content + padding + border。
IE 盒模型（border-box）：width/height 包含 content + padding + border。
box-sizing: border-box 更符合直觉，现代开发普遍用 * { box-sizing: border-box; }。
margin 合并（塌陷）是什么？怎么解决？
相邻块级元素的上下 margin 会合并，取较大值。父子元素的 margin-top 也会穿透合并。
解决方案：① 给父元素设置 overflow: hidden（触发 BFC）② 给父元素加 padding-top 或 border-top ③ 用 Flex/Grid 布局。
2 布局
BFC 是什么？触发条件？有什么用？
BFC（Block Formatting Context）是一个独立的渲染区域，内部元素的布局不影响外部。
触发条件：
overflow不为 visible（hidden/auto/scroll）display: flow-root（最纯净的方式）float不为 noneposition: absolute/fixed- Flex / Grid 子项
应用：① 清除浮动 ② 阻止 margin 合并 ③ 阻止元素被浮动元素覆盖。
水平垂直居中的方案？
Flex（推荐）：
Grid：
定位 + transform：
定位 + margin auto：
display: flex; justify-content: center; align-items: center;Grid：
display: grid; place-items: center;定位 + transform：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);定位 + margin auto：
position: absolute; inset: 0; margin: auto;（需固定宽高）
Flex 布局核心属性？
容器：
子项：
flex-direction（方向）、flex-wrap（换行）、justify-content（主轴对齐）、align-items（交叉轴对齐）、gap（间距）子项：
flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始大小）、align-self（单独对齐）
flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;（自动分配剩余空间）
3 定位与层叠
position 各值对比？
static：默认值，正常文档流。
relative：相对自身偏移，不脱离文档流。
absolute：相对最近的非 static 祖先定位，脱离文档流。
fixed：相对视口定位，脱离文档流（滚动不动）。
sticky：在 relative 和 fixed 之间切换，滚到阈值后"粘住"。
relative：相对自身偏移，不脱离文档流。
absolute：相对最近的非 static 祖先定位，脱离文档流。
fixed：相对视口定位，脱离文档流（滚动不动）。
sticky：在 relative 和 fixed 之间切换，滚到阈值后"粘住"。
z-index 和层叠上下文？
z-index 只在同一个层叠上下文内比较。创建新层叠上下文的方式：position + z-index、opacity < 1、transform、will-change、flex/grid 子项有 z-index 等。
常见坑：子元素 z-index 设得再大，也无法超过父元素所在层叠上下文中比它高的兄弟。
4 响应式
移动端适配方案？rem / vw / 媒体查询
rem 方案：根据屏幕宽度动态设置 html font-size，所有尺寸用 rem。配合
vw 方案：直接用视口单位（1vw = 视口宽度 1%），更直观。配合
媒体查询：
postcss-pxtorem 自动转换。vw 方案：直接用视口单位（1vw = 视口宽度 1%），更直观。配合
postcss-px-to-viewport。媒体查询：
@media (max-width: 768px) { ... }，适合断点式布局（PC/Pad/Mobile）。
现代推荐：vw + 媒体查询组合，或用 clamp(min, preferred, max) 实现流式排版。
5 动画与性能
为什么 transform / opacity 不会触发重排？
transform 和 opacity 的变化由 GPU 合成层（Compositor）直接处理，不需要经过 Layout 和 Paint 阶段。浏览器为它们创建独立的合成层，变化时只需重新合成，性能极高。
对比：修改 width/height/margin/padding → 触发重排（Layout）+ 重绘 + 合成。修改 color/background → 触发重绘 + 合成。修改 transform/opacity → 只触发合成。
will-change 是什么？注意事项？
will-change: transform 提前告诉浏览器该元素将发生变化，浏览器会为它预创建合成层，避免动画开始时的延迟。
注意：不要滥用！每个合成层都占显存。应该在动画前添加、结束后移除，或只用在少量关键元素上。
CSS 动画 vs JS 动画？
CSS 动画（transition/animation）：简单、性能好（浏览器优化），适合固定路径的动画。
JS 动画（requestAnimationFrame / GSAP）：灵活，可做复杂交互和条件控制，适合需要动态计算的场景。
原则：能用 CSS 就用 CSS，复杂交互再上 JS。
JS 动画（requestAnimationFrame / GSAP）：灵活，可做复杂交互和条件控制，适合需要动态计算的场景。
原则：能用 CSS 就用 CSS，复杂交互再上 JS。
6 选择器与优先级
CSS 优先级计算规则？
优先级从高到低：
!important > 内联样式（1000）> ID 选择器（100）> 类/伪类/属性（10）> 标签/伪元素（1）> 通配符/继承（0）
!important > 内联样式（1000）> ID 选择器（100）> 类/伪类/属性（10）> 标签/伪元素（1）> 通配符/继承（0）
注意：优先级不是十进制相加。11 个 class 选择器加起来也不会超过 1 个 ID 选择器的优先级。
最佳实践：避免 !important 和 ID 选择器，用 BEM 命名 + 类选择器保持可维护性。