前端面试必备：CSS特性、PostCSS与重绘重排解析

"这是一份面试题总结，涵盖了CSS、PostCSS和页面渲染优化的相关知识点。" ### CSS 知识点 1. **行内元素与块级元素的区别** - **块级元素**（如`div`, `p`, `h1`等）占据整行空间，宽度默认填充其父元素宽度，可以设置`width`和`height`，并应用`margin`和`padding`。 - **行内元素**（如`span`, `a`, `em`等）不独占一行，相邻的行内元素会并排显示，宽度由内容决定。行内元素的水平`padding`和`margin`有效，但垂直方向的`padding`和`margin`通常无效。 2. **PostCSS** - PostCSS 是一个使用 JavaScript 插件来转换CSS的工具，它通过解析CSS的抽象语法树（AST）进行操作。 - 主要用途包括： - 配合 **stylelint** 进行CSS语法校验。 - 自动添加 **浏览器前缀**（如`autoprefixer`）。 - 支持 **CSS下一代语法**（如cssnext）的编译。 ### 页面渲染优化知识点 3. **重绘(Reflow)和重排(Repaint)** - **重绘** 指元素外观改变，如颜色、透明度等，只影响视觉效果，不影响布局。 - **重排** 涉及元素布局的更改，如尺寸、位置变化，会触发整个或部分页面的重新布局。 **触发重绘重排的常见操作** - 初始页面加载 - 添加/删除DOM元素 - 改变元素位置、字体大小 - 更改尺寸、边距、填充、边框 - 改变内容 - 改变浏览器窗口尺寸 - 激活CSS伪类 - 修改`style`属性 - 查询某些属性（如`offsetWidth`、`offsetHeight`）或调用计算方法 ### 减少重绘次数的策略 - **样式集中改变**：一次性修改多个相关样式，而不是逐个修改。 - **分离读写操作**：先读取样式，再进行一系列修改，避免中间引起不必要的重排。 - **将DOM离线**：如使用`display:none`，元素将不再参与渲染，避免后续操作触发重排重绘。 这些面试题总结涵盖了CSS的基本概念、工具的使用以及前端性能优化的关键点，对于理解和准备面试都是非常有帮助的。