如果你在日常工作中使用CSS，很可能你的主要目标是专注于让事情看起来正确。最终得到正确的结果远比如何实现更重要。这意味着我们不太关注CSS实现的原则，而更关注正确的语法和视觉效果。您可能没有意识到，CSS视觉效果通常是操纵隐藏属性的间接结果。一些CSS属性（比如background-color）与你看到的视觉效果有着明显的直接关系。而其他人（如display）对我们许多人来说仍然模棱两可，因为结果似乎高度依赖于上下文。我怀疑许多开发人员可以简单地描述设置display:block时实际做了什么。您最多可能只是对该??属性的工作原理有一个直观的了解。没关系，你可以在不了解基础知识的情况下很好地使用CSS。虽然你知道问题的解决方法，但不一定了解问题。盒子模型、级联和特异性等概念对我们许多人来说都很熟悉。尽管它们经常被误解，但了解它们的工作原理有助于我们编写更好的CSS。正因如此，我想尝试揭开CSS这些隐藏的黑暗部分，只介绍涉及到你需要知道的部分，并希望按逻辑顺序解释过程，让你更好地理解CSS到底是如何工作的。呈现过程概述当您加载HTML文档时，在页面呈现过程中会依次发生许多事情。第一步是解析HTML文档。从这一步浏览器生成一个“文档树”。树结构是一种在HTML中以明显的层次结构表示信息的方式。树中的元素可以用类似于家谱的方式来描述，例如：后代节点、父节点、后代节点和兄弟节点。您可能听说过术语“DOM”。它代表“文档对象模型”。它是文档树结构的扩展，用于存储网页文档内容和操作信息。在解析HTML时，下载样式表和其他资源文件。样式声明通过称为级联的过程进行解释和确定。在此过程中，将解析CSS属性的最终值。经过计算，这些值可能和我们样式表中写的不一样。例如：像auto这样具有相对单位的关键字被分配了真实的值，并将应用继承的值。这些计算出的值存储在一棵树中，就像元素存储在DOM树中一样，毫无疑问称为CSS对象模型（CSSObjectModel）或CSSOM。现在可以开始呈现页面的过程。此过程的第一步是计算盒子模型。这一步对于确定元素的大小和间距很重要，尽管它可能不是最终位置。一个比盒模型鲜为人知的过程称为视觉格式模型。此过程确定页面上元素的布局和位置。它包括您可能已经熟悉的概念，例如定位方案、格式化上下文、显示模式和堆叠上下文。呈现最终页面。上段中可能有几个名词你不熟悉。如果是这样，最重要的是了解级联、盒模型和视觉格式模型。理解这些术语是解释、处理和呈现HTML和CSS的关键步骤。在上面描述每个渲染过程的细节时，我跳过了很多细节，所以让我们仔细看看这三个步骤。级联级联可能是CSS中最容易被误解的属性之一。它指的是合并不同样式表和解决CSS选择器之间冲突的过程。级联查看声明的优先级、来源、属性和顺序以确定要使用的样式规则。您需要知道的是：大多数网站都有多个样式表。通常的样式是在页面中添加引用css文件的link标签，或者在HTMLbody中使用style标签。即使是最基本的页面也有浏览器提供的默认样式。这个默认样式表有时称为用户代理样式表。样式表在级联期间按以下顺序解释：!important声明开发人员编写的样式表浏览器默认样式表注意：我跳过了用户样式表，因为它们不再常见。合并来自这些来源的样式后，如果许多规则应用于同一元素，则使用权重来确定应用哪个规则。SpecificitySpecificity指的是选择器的权重。仅仅将其视为一个数字是一个常见的错误。实际上它是4个独立的数字或4个类别权重。要计算特异性，请添加以下权重：ID、类、属性和伪类、元素和伪元素，例如：#nav.selected:hover>a::before的权重分别为1、2、2。不管多少类有权重，都不如ID高。比较选择器时，应该先比较ID权重。只有当ID的权重相同时，再比较类、属性、伪类的权重，最后，如果权重仍然相同，再比较元素和伪元素的权重。如果每个类别的权重相等，则使用最接近优先级的原则（即应用源中最后声明的规则）。是的！我知道我说的是4个班级的重量大小。但是内联样式比ID更重要。尽管它们在技术上是权重计算中的第一类，但它们通常无法与内联样式竞争，因此很容易记住内联样式的权重始终高于其他类别。重要说明：!important声明不考虑权重计算，但它们比级联中的普通声明具有更高的优先级。继承继承不是级联的一部分，但我把它包括在这里主要是因为它经常和级联一起讨论。继承是应用于元素的值可以由其子元素传递（或继承）的过程。您可能熟悉以下事实：字体属性（应用于主体或其他容器元素时）也被该容器内的每个元素继承。这就是继承。默认情况下，并非所有属性都被继承。理解继承是编写更优雅简洁的CSS的关键。使用inherit关键字强制继承非常有用。注意：某些属性（如border-color）的默认值为currentcolor。这意味着他们将使用在颜色属性上设置的值。此默认值与继承不同。而颜色属性本身通常是继承的。盒子模型了解盒子模型对于限制使用布局和定位时出现的问题至关重要。它是CSS中最基本的概念之一。盒子模型用于计算元素的宽度和高度。这是一个计算步骤，并不完全依赖于确定元素的最终布局和定位。您需要知道的是：HTML的每个元素都是一个矩形框。每个盒子有4个区域，分别定义了元素的外边距、边框、填充和内容区域。默认情况下，您为元素设置的宽度仅设置内容区域的宽度。当您向元素添加内边距、边框和边距时，它添加的不是宽度。实际上，这意味着如果两个宽度为50%的元素添加padding、margin或border，它们将超过宽度的100%，这将阻止它们并排输入。就是这样！这很简单吧？为什么这常常是混淆的根源？好吧，您可能遇到过行为似乎有点不同的情况……填充区域当您为元素设置背景时，它不仅填充内容区域，还填充内部填充区域和边框区域。从概念上讲，我们将HTML元素视为一个单一的事物。所以很容易认为一个元素的视觉边界等于它的宽度，但事实并非如此。虽然元素的视觉边界包括填充和边框区域，但宽度属性明确适用于内容区域。注意：更改box-sizing属性可以更改此行为。动态宽度另一个潜在的混淆来源是width:auto的工作原理。自动宽度是大多数HTML元素的默认值，例如：div和p标签，自动计算宽度以便边距、边框、填充和内容区域可以组合以适应可用空间。实际上，重新计算宽度以确保一切都合适。相比之下，如果将宽度设置为“100%”，则无论边距、填充和边框的大小如何，内容区域都将填充可用空间。Box-sizingbox-sizing属性可以改变盒子模型的工作方式。当box-sizing设置为border-box时，padding和border将减少内容区域的内部宽度，而不是增加元素的整体宽度。这意味着元素的宽度现在与其视觉宽度相同。很多人喜欢这个属性，如果你正在构建一个网格系统，或者任何其他需要水平对齐类型的布局项目，这可能是一种更直观的工作方式。重叠边距当边距不小心重叠时真的很混乱，因为您不知道发生了什么。当两个或多个相邻的垂直边距接触并且没有被填充或边框分隔时，边距有时会重叠。当子元素的边缘延伸到父元素的边缘并且没有被填充分隔时，就会发生边距重叠。如果元素是绝对定位的、浮动的或具有不同的格式化上下文，则边距将不会重叠。如果你感到困惑也没关系。边距不重叠的规则很复杂。您需要知道的主要事情是，当元素没有填充或边框时，垂直边距可以重叠。视觉格式模型当盒子模型计算元素的尺寸时，视觉格式模型负责确定这些盒子的布局。视觉格式模型考虑框类型、定位方案、元素之间的关系以及内容施加的约束，以确定页面上每个元素的最终位置和呈现。您需要了解的内容：视觉格式化模型遵循CSS框模型遍历文档树并生成呈现元素所需的一个或多个框。CSSdisplay属性在确定元素如何参与当前格式上下文和定位方案方面起着关键作用。这些部分将决定元素的最终布局和位置。这是一个复杂的步骤，也是迄今为止最难尝试和总结的步骤。如果您对这部分还不是很了解也没关系。了解我们如何通过CSS属性操纵定位方案和格式化上下文是一个好的开始。如果你能掌握模型不同部分之间的相互作用，你就会比大多数人做得更好。至少你应该知道它们存在。显示类型我们知道在CSS中设置display属性可以决定一个元素的渲染方式，但是并不清楚它是如何工作的。事实上，有时甚至是不可预测的。这是因为显示属性决定了元素的“框类型”。此隐藏属性由内部显示类型和外部显示类型组成，它们共同帮助确定元素的呈现方式。外部显示类型通常解析为“块”或“内联”，并且与CSS中的“显示”属性所期望的非常匹配。从技术上讲，外部显示类型决定了元素如何参与其父元素的格式化上下文。内部显示类型决定了元素将生成什么样的格式化上下文。这将影响其子元素的布局。想象一下Flexbox容器是如何工作的。它的外部类型是block，内部类型是flex。它的子元素也可以是块类型的，但是它们的布局受flexbox容器的格式化上下文影响。格式化上下文格式化上下文是关于布局的。它们是管理容器内元素布局以及它们如何相互作用的规则。一些格式化上下文可以直接在容器上建立，例如通过使用display的值：flex、grid或table。其他类型，例如块和内联格式化上下文，是根据浏览器的需要创建的。注意：在某一时刻，由于它与浮动元素交互的方式，了解如何让浏览器建立新的块格式化上下文非常重要。块格式化上下文的元素将包含浮动元素。定位方案一个盒子元素可以根据3种定位方案之一进行布局。这三种方案分别是：普通文档流布局、浮动布局和绝对定位布局。您可能熟悉浮动布局和绝对定位布局的工作方式，因为我们在编写CSS时经常与这些方案交互。当元素不是浮动或绝对定位时，它是正常的文档流布局。NormaldocumentflowlayoutNormaldocumentflow描述了默认的定位方案，“in-flow”描述了符合这个要求的元素。在文档流中，您可以将元素的自然位置视为根据其来源和格式上下文的顺序进行布局。浮动布局Float（浮动）是一个CSS属性，它使元素跳出正常流并尽可能向左或向右偏移，直到它触及其父框元素或另一个浮动元素的边缘。发生这种情况时，文本和内联元素将包围浮动元素。通常，如果未设置，元素的高度将适合其所有后代元素。当元素浮动时，它们会跳出正常的文档流，这意味着容器不会调整其高度来清除它。正是这种行为允许各种文本、标题和其他元素流畅地包裹浮动内容。但有时这是有问题的。清除浮动并建立新的块格式化上下文将导致容器清除其浮动的子项。这种技术允许使用浮动进行布局，这在很长一段时间内一直是Web开发技术之一。这项技术仍然很重要，但它也逐渐被新的布局技术所取代，例如Flexbox和Grid。绝对定位布局绝对定位元素完全从文档流中移除，不像浮动元素，它们对周围的内容没有影响。具有相对定位的容器允许您使用绝对定位来控制后代元素的偏移量。相对定位的元素也可以被赋予一个偏移量，但是这个偏移量是相对于元素的正常位置，而不是另一个相对容器。CSStop、bottom、left和right属性用于计算“盒子容器的偏移量”。这些属性不是2D偏移量，而是每条边相对于其容器的内容框的定位。定位具有重叠偏移量的元素可能会导致元素占据相同空间的重叠问题。堆叠上下文可以解决这个问题。堆叠上下文堆叠上下文决定了事物呈现给页面的顺序。您可以想象像层一样的堆叠上下文。首先绘制堆栈底部的层，堆栈上方的元素出现在顶部（相对于底部的上层）。在绝对或相对定位的元素上设置z-index是建立新堆叠上下文的最常用方法。但是还有其他方法可以形成堆叠上下文，包括设置不透明度、变换、过滤器或使用will-change属性。其中一些原因并不直观，与渲染性能的关系比开发人员预期的要大。这有助于理解这些层可以由浏览器单独呈现。因此，有时出于性能原因有意创建新的堆栈上下文很有用。除非建立堆叠上下文，否则设置z-index无效。z-index的值设置的越高，stack放置的位置就越高（越靠近最终显示的上一层）。关于堆叠最令人困惑的部分之一是可以在现有堆叠上下文中建立新的堆叠上下文。这意味着您可以有多个图层。在这种情况下，并不总是可以将最高的z-index显示在堆栈的较高位置。总结对CSS工作原理的一些重要但鲜为人知的部分的简短介绍。只读一部分也没关系。希望这篇文章能澄清事情或对所涉及的过程有一个大概的了解。在不牺牲精确度的情况下用简单的术语解释这些东西是一个真正的挑战。
