前端Wind CSS面试题及参考答案

目录

标准盒模型与 IE 盒模型的区别是什么？如何通过 box-sizing 属性切换这两种盒模型？

如何计算一个元素在标准盒模型下的总宽度（包含 margin、padding、border）？

父元素高度塌陷的原因是什么？请列举至少 3 种清除浮动的方法。

方法一：使用 clear 属性

方法二：使用 BFC（块级格式化上下文）

方法三：使用伪元素

margin 负值的作用是什么？请举例说明其应用场景。

inline、block、inline-block 元素的特性差异是什么？它们各自的使用场景有哪些？

如何实现一个元素水平居中？请至少提供 4 种方案。

如何实现未知宽高元素的水平垂直居中？请至少提供 3 种方案。

position: absolute 的定位基准是什么？它与 position: fixed 有何区别？

z-index 生效的条件是什么？层叠上下文是如何形成的？

display: none 与 visibility: hidden 的区别是什么？它们对页面渲染分别有什么影响？

overflow: hidden 为何能触发 BFC（块级格式化上下文）？请列举其他触发 BFC 的方式。

如何用 CSS 实现一个宽高比为 16:9 的自适应容器？

Flex 布局的主轴与交叉轴是如何定义的？flex-direction 的取值有哪些？

如何通过 Flex 实现 “左侧固定宽度，右侧自适应” 布局？

justify-content 和 align-items 分别控制什么方向的对齐？

Flex 项目中 flex: 1 的含义是什么？它等价于哪些属性的组合？

Grid 布局中 fr 单位的作用是什么？如何定义网格轨道？

如何实现一个三栏布局（两侧固定，中间自适应）？请至少提供 3 种方案。

Grid 的 grid-template-areas 属性如何实现复杂布局？

如何让 Grid 项目在单元格内水平和垂直居中？

对比 Flex 与 Grid 布局的适用场景及优缺点分别是什么？

如何用 Grid 实现响应式布局（如不同屏幕尺寸下自动调整列数）？

BFC 的特性有哪些？请举例说明 BFC 解决的实际问题（如 margin 合并）。

如何通过 BFC 避免浮动导致的父元素高度塌陷？

同一个 BFC 内的垂直 margin 为何会合并？如何避免这种合并？

BFC 区域为何不会与浮动元素重叠？请举例说明其应用场景。

解释 “包含块（Containing Block）” 的概念及其对定位的影响。

什么是层叠上下文？哪些属性会触发层叠上下文？

浏览器渲染过程中重排（Reflow）与重绘（Repaint）的区别是什么？有哪些优化策略？

CSS 中硬件加速的原理是什么？有哪些实现方式（如 transform 属性）？

CSS 选择器优先级计算规则是什么？比较 #id .class 与 div:hover 的优先级。

:nth-child (n) 与:nth-of-type (n) 的区别是什么？

属性选择器 [attr^="val"]、[attr$="val"]、[attr*="val"] 的作用差异是什么？

伪类:hover 与伪元素::after 的本质区别是什么？

如何通过 CSS 选择器选中表单中所有未填写的必填项（input:required:invalid）？

解释:not () 伪类的使用场景及它对优先级的影响

CSS 变量（Custom Properties）的优势是什么？如何用 JavaScript 动态修改 CSS 变量？

transform 属性支持哪些变换类型？transform 与 transition 如何配合实现动画？

如何用 clip-path 裁剪出圆形、多边形或自定义形状？

@media 媒体查询的常用参数有哪些？如何适配暗色模式？

aspect - ratio 属性的作用是什么？有哪些兼容性处理方案？

will - change 属性的优化原理是什么？使用时的注意事项有哪些？

如何用 CSS 实现渐变背景、阴影和模糊效果？

contain 属性的性能优化原理是什么？它的适用场景有哪些？

移动端 1 像素边框问题的成因是什么？有哪些解决方案？

1. 使用 transform 缩放

2. 使用 viewport 布局视口

3. 使用 SVG 边框

transition 与 animation 的区别是什么？它们各自的适用场景有哪些？

如何实现动画的暂停与重启（animation-play-state）？

如何通过 requestAnimationFrame 优化 CSS 动画性能？

列举 CSS 动画性能优化的常见手段（如减少重绘）。

CSS 预处理器（如 Sass/Less）的核心功能有哪些？

如何实现 CSS 模块化（如 CSS Modules 或 Scoped CSS）

PostCSS 的作用是什么？请举例说明常用插件（如 Autoprefixer）

对比 CSS - in - JS 方案与传统 CSS 的优缺点

常见浏览器兼容性问题有哪些？对应的解决方案是什么（如 IE 盒模型、Flex 兼容）

解释 FOUC（无样式内容闪烁）的成因是什么？有哪些避免方法