CSS 样式计算、视觉格式化模式、包含块

CSS 样式计算

1. 样式计算的过程

CSS 样式计算是浏览器将 CSS 规则应用到元素上的过程，主要包括以下步骤：

1. 收集规则：浏览器收集所有适用于该元素的 CSS 规则
2. 优先级计算：根据选择器的优先级确定最终应用的规则
3. 层叠：处理多个规则之间的冲突，遵循层叠规则
4. 继承：处理继承的样式属性
5. 默认值：为未指定的属性应用默认值

2. 优先级计算

选择器的优先级由以下因素决定（从高到低）：

1. 内联样式：style 属性中的样式
2. ID 选择器：#id
3. 类选择器、属性选择器、伪类：.class、[attr]、:hover
4. 元素选择器、伪元素：div、::before

计算方式：

• 内联样式：1000
• ID 选择器：100
• 类选择器/属性选择器/伪类：10
• 元素选择器/伪元素：1

3. 层叠规则

当多个规则应用到同一个元素时，遵循以下规则：

1. 重要性：!important 声明的规则优先级最高
2. 来源：用户代理样式 < 用户样式 < 作者样式 < 作者 !important < 用户 !important
3. 优先级：优先级高的规则覆盖优先级低的规则
4. 顺序：同一优先级的规则，后面的覆盖前面的

视觉格式化模式

1. 视觉格式化模型

视觉格式化模型是 CSS 中用于确定元素如何在页面上布局的一套规则，主要包括：

• 盒模型：每个元素都被视为一个矩形盒子
• 定位方案：确定元素的位置和大小
• 格式化上下文：控制元素的布局环境

2. 盒模型

盒模型由以下部分组成：

• 内容区域：元素的实际内容
• 内边距：内容与边框之间的空间
• 边框：围绕内容和内边距的边界
• 外边距：元素与其他元素之间的空间

3. 定位方案

CSS 中有三种主要的定位方案：

1. 普通流：元素按照其在 HTML 中的顺序排列
2. 浮动：元素脱离普通流，向左或向右移动
3. 绝对定位：元素相对于其包含块定位，脱离普通流

4. 格式化上下文

常见的格式化上下文：

• 块级格式化上下文 (BFC)：控制块级元素的布局
• 行内格式化上下文 (IFC)：控制行内元素的布局
• 弹性格式化上下文 (FFC)：由 display: flex 创建
• 网格格式化上下文 (GFC)：由 display: grid 创建

包含块

1. 什么是包含块

包含块是元素定位和尺寸计算的参考框，元素的位置和大小通常相对于其包含块计算。

2. 包含块的确定规则

不同定位方式的元素，其包含块的确定规则不同：

1. 静态定位 (static) 和 相对定位 (relative)：包含块是其最近的块级祖先元素的内容盒
2. 绝对定位 (absolute)：包含块是其最近的已定位祖先元素的内边距盒
3. 固定定位 (fixed)：包含块是视口
4. 粘性定位 (sticky)：包含块是其最近的块级祖先元素

3. 包含块的影响

包含块会影响以下属性的计算：

• top, right, bottom, left：定位元素的偏移量
• width, height：元素的尺寸
• margin, padding：元素的内边距和外边距
• 百分比值：宽度、高度、内边距、外边距等使用百分比时，参考包含块的对应属性

4. 示例

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
}

.box {
  position: absolute;
  top: 10%; /* 相对于包含块的高度（200px），即 20px */
  left: 10%; /* 相对于包含块的宽度（300px），即 30px */
  width: 50%; /* 相对于包含块的宽度，即 150px */
  height: 50%; /* 相对于包含块的高度，即 100px */
  background-color: red;
}

总结

• 样式计算：浏览器通过收集规则、计算优先级、层叠、继承和应用默认值来确定元素的最终样式
• 视觉格式化模式：定义了元素如何在页面上布局，包括盒模型、定位方案和格式化上下文
• 包含块：是元素定位和尺寸计算的参考框，不同定位方式的元素有不同的包含块确定规则

理解这些概念对于掌握 CSS 布局和解决布局问题非常重要。