前端面试必备：史上最全CSS与布局知识点解析

"前端面试题总结史上最全" 前端面试题涵盖了广泛的领域，以下是一些关键知识点的详细说明： 1. **CSS定位** - `relative`: 相对定位，元素根据其正常位置移动，但不脱离文档流。 - `absolute`: 绝对定位，相对于最近的非静态定位祖先元素定位，脱离文档流。 - `fixed`: 固定定位，相对于浏览器窗口定位，无论页面滚动如何，元素位置保持不变。 - `sticky`: 粘性定位，当元素滚动到某个阈值时，它会固定在该位置，常见于侧边栏或顶部导航。 - `static`: 默认值，元素按照正常的文档流排列。 2. **CSS选择器权重** - `!important`: 权重最高，10000 - 内联样式: 权重1000 - ID选择器: 权重100 - 类、属性选择器、伪类: 权重10 - 元素标签选择器: 权重1 - 通配符、子选择器、相邻选择器: 权重0 3. **DOM的重绘与回流** - **重绘**: 当元素的视觉属性如颜色、背景、透明度等改变，不会影响布局，仅需要重新渲染。 - **回流**: 涉及到元素尺寸、位置的更改，需要重新构造DOM树并渲染，非常消耗性能。 - 减少重绘和回流的策略包括： - 使用CSS属性简写 - 批量修改元素样式 - 避免使用`display:none`，改用`visibility`控制可见性 - 避免CSS表达式，可能导致回流 4. **浏览器渲染过程** - 解析HTML，构建DOM树 - 解析CSS，生成CSS规则树 - 合并DOM树和CSS规则，形成渲染树 - 布局渲染树，计算元素尺寸和位置 - 绘制渲染树，生成像素信息 - GPU合成各层并显示在屏幕上 5. **Flex布局** - `flex-direction`: 设置主轴方向，常用值有`row`（默认，水平方向）和`column`（垂直方向）。 - `flex-wrap`: 控制是否换行，`nowrap`（默认，不换行）、`wrap`（换行）和`wrap-reverse`（反向换行）。 - `justify-content`: 主轴上的对齐方式，如`flex-start`（左对齐）、`flex-end`（右对齐）、`center`（居中）等。 - `align-items`: 交叉轴上的对齐方式，类似`justify-content`。 - `align-self`: 允许单个元素覆盖其容器的`align-items`设置。 - 更多属性如`flex-grow`、`flex-shrink`、`flex-basis`等，用于控制元素在主轴上的伸缩行为。 这些知识点是前端开发者面试中常见的考察点，理解和掌握它们对于提升前端开发技能和面试成功至关重要。在实际项目中灵活运用这些概念，可以创建更高效、响应式的Web页面。