八股文-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 属性可以指定盒模型类型：

1
2
3
4
5
/* 标准盒模型（默认值） */
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. 区别总结

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