CSS 中不为人知的部分

假如你在日常工作中使用 CSS，你的主要目标可能会重点围绕着使事情”看起来正确”。如何实现这一点经常是远不如最终结果那么重要。更多互联网讯息请在公众号锁定“全阶魔方”每天都有升级。这意味着比起正确的语法和视觉结果来说，我们更少关心 CSS 的工作原理。

CSS 的视觉结果通常是操作隐藏属性的间接后果，你可能还没有意识到这一点。某些 CSS 属性（比方 background-color）与你看到的内容有直接而显著的关系。同时，其它像 display 这样的属性对于我们很多人来说依然是模棱两可的，由于结果似乎与上下文环境有很大关系。

我怀疑很多开发人员都不能用简单的术语形容设置 display: block 实际上是在做什么，顶多可能对这种属性如何工作有少量直观的理解。没关系，你可以在不理解底层原理的情况下，就能 CSS 瞎嚷嚷。不过，那也是只知其一，不知其二。

假如这就是在说你，没关系。我也是在学会如何使用 CSS 很久以后，才了解 CSS 的工作原理。我猜这并不能让你好受点，不过至少你并不是一个人在战斗！

CSS 的底层特性是复杂而有意笼统的，但我们也不能完全不理解它们。对于我们很多人来说，或者多或者少都会熟习像盒模型、层叠和特殊性这些概念。尽管它们经常被曲解，但是懂点这些概念的工作原理有助于我们编写更好的 CSS。

对于 CSS 的很多其它隐藏部分也可以这样说。问题是更好地了解这些部分的门槛更高。经常会感觉如同没有什么能孤立地解释。需要先理解所有内容，而后才能了解流程的最小部分。

因而，我想尝试揭示少量 CSS 不为人知的部分，仅触及你需要知道的内容，并希望以逻辑顺序解释该过程，以便更好地了解 CSS 的实际工作原理。

这是一篇很长的文章，所以假如你想跳过这些部分之一，我完全可以了解。

渲染过程概述

当加载一个 HTML 文档时，为了让该页面渲染，有很多事情要发生。

第一个步骤就是解析 HTML 文档。浏览器从这一步创立一个文档树。树状结构是表示像 HTML 这种具备显著层次结构信息的一种方法。树中的元素可以被形容为相似于族谱，比方祖先、父亲、孩子和兄弟姐妹。

你可能听说过术语 DOM。它代表文档对象模型（Document Object Model）。这是文档树结构的一种扩展，被用于存储和操作 Web 文档内容有关的信息。

随着 HTML 被解析，样式表和其它资源也被获取。样式公告通过一个称为层叠的过程来解释和确定。

在此过程期间，CSS 属性的最终值被确定。在计算后，这些值可能与样式表中定义的有所不同。例如，像 auto 这种关键字和相对单位被指派了真实值，并且继承值被应用了。这些计算值被存储在一个树中，相似于 DOM 中的元素，毫不奇怪，它被称为 CSS 对象模型或者者 CSSOM。

现在才有可能开始渲染页面的过程。这个过程的第一步是盒模型的计算。这是一个算出元素的尺寸和间距的重要步骤，尽管不肯定是元素的最终位置。

与盒模型相比，不那么被人熟知的是一个称为视觉格式化模型的过程。这个过程确定元素在页面上的布局和位置。它包含了少量你可能已经熟习的概念，比方定位方案、格式化上下文、显示模式和堆叠上下文。

最后，页面被渲染。

上面的段落中可能有少量你还不熟习的少量术语。假如是这样的话，最重要的是要了解层叠、盒模型以及视觉格式化模型。这些术语都是解释、解决和渲染 HTML 和 CSS 的核心步骤。在形容这些术语时，我跳过很多细节，所以我们下面要更详细地研究一下这三个步骤。

层叠

层叠可能是最被误会的 CSS 特性之一。它是指组合不同样式表以及处理 CSS 选择器之间冲突的过程。

层叠查看公告的重要性、来源、特殊性以及顺序，来确定使用哪个样式规则。

你需要知道什么：

大多数网站有多个样式表。通常，样式是用引用一个 CSS 文件的一个 link 标记，或者者 HTML 主体部分的 style 标记增加的。即便最基础的页面也会有浏览器提供的默认样式。这种默认样式表有时被称为 user-agent 样式表。

在层叠期间，样式表是按如下顺序被解释的：

1. !important 公告

2. 作者的样式表

3. 浏览器默认的样式表

注意：这里我跳过了客户样式表，是由于它们不再常见，可能不会是读这本文的所有人要考虑的因素。

在组合这些来源后，假如多个规则应用到同一元素，就用特殊性来确定应用哪条规则。

特殊性

特殊性（Specificity）是给选择器的权重。它常被误认为是一个数字。实际上是 4 个单独的数字或者者 4 种权重类别。

要计算特殊性，要统计如下选择器的数目：

1. ID 选择器

2. 类选择器、属性选择器和伪类选择器

3. 元素选择器和伪元素选择器

例如：#nav .selected:hover > a::before 将是 1, 2, 2。

无论有多少个类选择器，都不会比一个 ID 选择器有更高的特殊性。当比较选择器时，我们首先比较 ID 选择器的特殊性。只有 ID 选择器相等时，才比较类选择器、属性选择器和伪类选择器的特殊性值。假如最后仍然相等，才比较元素和伪元素选择器。

假如每个类别的特殊性都是相等的，那么来源中最后的公告获胜。

是的！我知道我说的是 4 个类。行内样式比 ID 选择器有更高的特殊性。不过因为在技术上行内样式在特殊性计算中是第一类，通常你不会与行内样式竞争，所以很容易记住行内样式的特殊性总是会占优。

重要的注意事项：尽管 !important 公告不会作为特殊性计算的因素，不过它们比层叠中的普通公告有更大的优先级。

继承

继承不是层叠的一部分，不过我在这里把它包含进来，是由于它经常被与层叠结合在一起探讨。

继承是应用给一个元素的值可以被传递到（或者者继承）子元素上的过程。

你一定知道这个事实，即当把字体属性应用到 body 或者者其它容器元素时，该属性也会被容器内的所有元素所继承。这就是继承。

并非所有属性默认都被继承。了解继承是编写更优雅更简洁 CSS 的关键。有时候用 inherit 关键字强制继承会相当有用。

注意： 有些属性（比方 border-color）默认值是 currentcolor。也就是说，它们会使用在 color 属性上设置的值。默认值与继承不是一码事。不过，color 属性本身经常是被继承的，所以我倾向于认为这是一种事实上的继承。

盒模型

了解盒模型是布局和定位时防止挫败所必须的。盒模型是 CSS 中最基本的概念之一。

盒模型用于计算元素的宽度和高度。它只是计算过程中的一个步骤，确定元素的最终布局和定位并非完全依赖于它。

你需要知道什么：

HTML 中的每个元素都是一个矩形的盒子。每个盒子有用元素的外边距（margin）、边框（border)、内边距（padding）和内容区定义的四个区域。

默认情况下，当我们设置一个元素的宽度时，只是设置内容区的宽度。当给一个元素增加内边距、边框或者者外边距时，是添加了除宽度以外的部分。实际上，这就是说宽度为 50% 的两个元素假如增加了内边距、外边距或者者边框，就不会并排填满宽度（由于已经超过了 100% 宽度）。