八股文-css

欢迎阅读 html 八股文

📌 css

1.1 盒模型介绍

在 CSS3 中，盒模型分为 两种：

• 标准盒模型
• IE（替代）盒模型

1. 盒模型的组成

盒模型都由以下部分组成：

• content（内容）
• padding（内边距）
• border（边框）
• margin（外边距）

盒子整体大小 = content + padding + border
（注意：margin 不计入盒子大小）

---

2. 不同盒模型的区别

• 标准盒模型（W3C）
  • width / height 仅指 content 的大小。
• IE（替代）盒模型
  • width / height 包含 content + padding + border。

---

3. 如何切换盒模型

通过 box-sizing 属性可以指定盒模型类型：

/* 标准盒模型（默认值） */
box-sizing: content-box;

/* IE（替代）盒模型 */
box-sizing: border-box;

1.2 CSS 选择器和优先级

1. 常见选择器

• 通配符选择器：* { }，匹配所有元素。
• 元素选择器：div { }，根据标签名选择元素。
• 类选择器：.class { }，根据类名选择元素。
• ID 选择器：#id { }，根据 ID 选择元素（唯一）。
• 后代选择器：div p { }，选择 div 内所有 p。
• 子选择器：div > p { }，选择 div 内的直接子元素 p。
• 相邻兄弟选择器：div + p { }，选择紧跟在 div 后的 p。
• 属性选择器：input[type="text"] { }，根据属性选择元素。
• 伪类选择器：:hover、:nth-child(n) 等。
• 伪元素选择器：::before、::after 等。

---

2. CSS 样式优先级规则

优先级顺序如下（由高到低）：

1. !important
2. 行内样式（style 属性）
3. ID 选择器（#id）
4. 类选择器 / 属性选择器 / 伪类选择器（.class、[attr]、:hover 等）

2.3 重排（Reflow）和重绘（Repaint）

1. 重排（Reflow）回流

• 定义：当元素的几何信息（位置、尺寸大小）发生变化时，浏览器需要重新计算元素在视口中的几何属性。
• 触发条件：如修改元素大小、位置、隐藏/显示、添加或删除 DOM 节点等操作。

---

2. 重绘（Repaint）

• 定义：在构造渲染树和重排之后，浏览器已经知道哪些节点是可见的，以及可见节点的样式和几何信息。接下来需要将这些节点转换为屏幕上的实际像素，这个过程叫做重绘。
• 触发条件：如修改元素颜色、背景色、阴影等不会影响布局的样式。

---

3. 区别总结

• 重排：影响元素几何信息（尺寸、位置），开销较大。
• 重绘：只影响外观样式（颜色、背景），开销较小。