Advanced CSS and Sass_学习记录_04：How CSS Works Behind the Scenes Part 2：值的处理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33546823/article/details/142818531

How CSS Works Behind the Scenes Part 2：值的处理

在上一部分中，深入探讨了层叠（Cascade）和特异性（Specificity），了解了浏览器如何处理多个冲突的CSS规则。本篇文章将继续探究CSS在幕后是如何工作的，重点关注值的处理（Value Processing）。通过详细解释CSS值从声明到实际应用的整个过程，我们将更好地理解浏览器如何计算和应用样式。

一、CSS值的处理流程

在浏览器渲染网页的过程中，CSS值的处理分为六个主要阶段：

声明值（Declared Values）：开发者在样式表中定义的CSS属性和值。
层叠值（Cascaded Values）：经过层叠过程后确定的值，解决了冲突和优先级问题。
指定值（Specified Values）：如果某个属性没有被显式声明，则使用默认值或继承值。
计算值（Computed Values）：将相对值转换为绝对值，如将百分比和em单位转换为像素值。
使用值（Used Values）：在布局计算中使用的最终值，考虑了盒模型等因素。
实际值（Actual Values）：受限于浏览器和设备的能力，最终在屏幕上呈现的值。

接下来，我们将重点讨论计算值和使用值这两个阶段。

二、计算值（Computed Values）

2.1 什么是计算值？

计算值是指浏览器在处理CSS时，将相对单位（如百分比、em、rem、vw、vh等）转换为绝对单位（通常是像素）的过程。这个阶段确保了所有的CSS值在后续的布局和绘制过程中都是可计算和可比较的。

2.2 为什么需要计算值？

统一性：不同的相对单位在计算前无法直接比较或计算，例如无法直接比较50%和20px。
精确性：布局引擎需要精确的数值来计算元素的位置和尺寸，以便正确地绘制页面。
性能优化：提前计算并缓存这些值，可以提高渲染性能。

2.3 相对单位的转换

浏览器在计算值阶段，会将各种相对单位转换为绝对值，具体转换规则如下：

2.3.1 百分比（%）

font-size: 150%;：表示当前元素的字体大小是父元素字体大小的150%。
line-height: 110%;：表示当前元素的行高是其字体大小的110%。
width: 80%;：表示当前元素的宽度是父元素内容宽度的80%。

示例：

<style>
  .parent {
    font-size: 16px;
    width: 500px;
  }
  .child {
    font-size: 150%; /* 16px * 1.5 = 24px */
    width: 80%;      /* 500px * 0.8 = 400px */
  }
</style>

<div class="parent">
  <div class="child">示例文本</div>
</div>

2.3.2 字体相关单位

em（字体大小）
- 用于font-size：相对于父元素的字体大小。
  - font-size: 1.5em;：当前元素字体大小是父元素的1.5倍。
- 用于其他长度属性：相对于当前元素的字体大小。
  - padding: 2em;：内边距是当前元素字体大小的2倍。
rem（根元素字体大小）
- 始终相对于根元素（<html>）的字体大小。
  - font-size: 1rem;：字体大小是根元素字体大小的1倍。

示例：

<style>
  html {
    font-size: 16px;
  }
  .parent {
    font-size: 1.5em; /* 16px * 1.5 = 24px */
  }
  .child {
    font-size: 1em;    /* 24px * 1 = 24px */
    padding: 2em;      /* 24px * 2 = 48px */
    margin: 1rem;      /* 16px * 1 = 16px */
  }
</style>

<div class="parent">
  <div class="child">示例文本</div>
</div>

2.3.3 视口相关单位

vw（视口宽度）
- 1vw = 视口宽度的1%。
  - width: 50vw;：元素宽度是视口宽度的50%。
vh（视口高度）
- 1vh = 视口高度的1%。
  - height: 100vh;：元素高度是视口高度的100%。

示例：

<style>
  .full-screen {
    width: 100vw;
    height: 100vh;
  }
</style>

<div class="full-screen">全屏元素</div>

2.4 转换过程中的注意事项

继承与层叠的影响：在计算值时，浏览器会考虑CSS的继承和层叠规则，以确定元素的最终样式。
初始值的使用：如果某个属性未被显式声明，浏览器会使用该属性的初始值。
默认根字体大小：大多数浏览器默认将根元素的字体大小设为16px。

三、使用值（Used Values）

3.1 什么是使用值？

使用值是指在布局计算过程中，浏览器根据计算值、盒模型和其他因素，确定元素在页面中的实际尺寸和位置所使用的值。

3.2 使用值的计算

布局阶段：浏览器使用计算值，结合盒模型（margin、border、padding、content）来计算元素的尺寸和位置。
考虑上下文：元素的定位方式（static、relative、absolute、fixed等）、浮动、清除等都会影响使用值的计算。

3.3 示例：盒模型的计算

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    box-sizing: content-box; /* 默认值 */
  }
</style>

<div class="box">盒模型示例</div>

内容区域宽度（content width）：200px
总宽度（total width）：
- content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 200px + 20px * 2 + 5px * 2 + 10px * 2 = 270px

3.4 `box-sizing` 对使用值的影响

content-box（默认值）：width 和 height 只设置内容区域的尺寸，padding 和 border 会增加元素的总尺寸。
border-box：width 和 height 包含内容、内边距和边框，设置此值可以更容易地控制元素的总尺寸。

示例：

.box-border {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box;
}

总宽度（total width）：
- width + margin-left + margin-right
- 200px + 10px * 2 = 220px

四、从声明到实际值的完整过程

4.1 声明值（Declared Values）

开发者在CSS中编写的样式声明，例如：

p {
  font-size: 150%;
  width: 80%;
}

4.2 层叠值（Cascaded Values）

经过层叠和特异性计算后，确定每个元素的最终样式声明。

4.3 指定值（Specified Values）

如果某个属性没有被显式声明，浏览器会使用该属性的初始值或继承值。

4.4 计算值（Computed Values）

将相对单位转换为绝对单位，例如：

font-size: 150%; 转换为具体像素值，如24px。
width: 80%; 计算为父元素宽度的80%。

4.5 使用值（Used Values）

在布局过程中，考虑盒模型和上下文环境，计算元素的实际尺寸和位置。

4.6 实际值（Actual Values）

受限于浏览器和设备的能力，最终在屏幕上呈现的值。例如：

最小和最大尺寸：元素的尺寸可能受最小或最大值的限制。
舍入误差：像素不能被进一步分割，可能会有舍入误差。

五、常见单位的详细解析

5.1 百分比（%）

字体大小：相对于父元素的字体大小。
- 示例：font-size: 150%; 表示当前元素的字体大小是父元素的1.5倍。
长度属性：相对于父元素的内容区域宽度。
- 示例：width: 80%; 表示当前元素的宽度是父元素内容宽度的80%。

5.2 `em` 单位

用于font-size：相对于父元素的字体大小。
- 示例：font-size: 2em; 表示当前元素字体大小是父元素的2倍。
用于其他长度属性：相对于当前元素的字体大小。
- 示例：padding: 1em; 表示内边距等于当前元素字体大小。

5.3 `rem` 单位

始终相对于根元素（<html>）的字体大小。
- 示例：font-size: 1.5rem; 表示字体大小是根元素的1.5倍。

5.4 视口单位

vw（视口宽度的1%）
- 示例：width: 50vw; 表示元素宽度是视口宽度的50%。
vh（视口高度的1%）
- 示例：height: 100vh; 表示元素高度是视口高度的100%。

5.5 `vmin` 和 `vmax`

vmin：视口宽度和高度中较小的那个的1%。
vmax：视口宽度和高度中较大的那个的1%。

六、综合示例

示例：响应式字体大小和布局

<style>
  html {
    font-size: 16px;
  }
  body {
    font-size: 1rem; /* 16px */
  }
  h1 {
    font-size: 2rem; /* 32px */
  }
  p {
    font-size: 1em; /* 16px，继承自body */
    line-height: 1.5; /* 1.5 * 16px = 24px */
    margin: 1em 0;    /* 上下边距16px */
  }
  .container {
    width: 80%;      /* 80% 的视口宽度 */
    max-width: 1200px;
    margin: 0 auto;
  }
  .box {
    width: 25%;      /* 父元素（.container）宽度的25% */
    padding: 1em;    /* 16px */
    box-sizing: border-box;
  }
</style>

<div class="container">
  <h1>标题</h1>
  <p>这是一个段落，字体大小为1em，行高为1.5。</p>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
</div>

说明：

字体大小：通过rem和em单位，实现相对的字体大小，方便响应式调整。
布局：使用百分比和vw单位，实现响应式布局。
盒模型：设置box-sizing: border-box;，方便计算元素的总宽度。

附录：常见CSS单位汇总

单位	描述
`px`	像素，绝对单位
`%`	百分比，相对于父元素的尺寸
`em`	相对单位，基于字体大小
`rem`	相对单位，基于根元素的字体大小
`vw`	视口宽度的1%
`vh`	视口高度的1%
`vmin`	视口宽度和高度中较小值的1%
`vmax`	视口宽度和高度中较大值的1%
`cm`	厘米，绝对单位（实际应用中很少使用）
`mm`	毫米，绝对单位（实际应用中很少使用）
`in`	英寸，绝对单位（实际应用中很少使用）
`pt`	磅，1pt = 1/72英寸（绝对单位）
`pc`	12点活字，1pc = 12pt（绝对单位）