几年前,我在学习CSS时有了一个*"尤里卡*"时刻。
直到那一刻,我一直在学习CSS,把注意力集中在我们写的属性和值上,比如z-index: 10
或justify-content: center
。我想,如果我大致了解每个属性的作用,我就会对整个语言有深刻的理解。
我的关键认识是,CSS不仅仅是一个属性的集合。它是一个由相互连接的布局算法组成的星座。每个算法都是一个复杂的系统,有自己的规则和秘密机制。
仅仅学习特定属性的作用是不够的。我们需要学习布局算法如何工作,以及它们如何使用我们提供给它们的属性。
你是否有过这样令人不安的经历:写了一大块熟悉的CSS,你以前用过很多次,却得到一个不同的、意想不到的结果?这是很令人沮丧的。这让人感觉到语言的不一致性和不稳定。完全相同的CSS输入怎么会产生不同的输出呢?
发生这种情况是因为属性作用于一个复杂的系统,而且有一些微妙的背景改变了属性的行为方式。我们的心智模型是不完整的,这导致了意外的发生!
当我开始钻研布局算法时,一切都开始变得更有意义。困扰了我多年的谜团被解开了。我意识到,CSS实际上是一种非常强大的语言,我开始真正喜欢上了写它
在这篇博文中,我们将看看这个新镜头如何帮助我们理解CSS中发生的事情。我们将用这个镜头来解开一个令人惊讶的谜题。🕵️
[
链接到这个标题
](www.joshwcomeau.com/#layout-alg…
那么,什么是 "布局算法"?你可能已经熟悉了其中的一些。它们包括
-
Flexbox
-
定位(例如:
position: absolute
) -
网格
-
表格
-
流
(从技术上讲,它们被称为布局模式,而不是布局算法。但我觉得 "布局算法 "是一个更有用的标签)。
当浏览器渲染我们的HTML时,每个元素的布局都会用一种主要的布局算法来计算。我们可以通过特定的CSS声明来选择不同的布局算法。例如,应用position: absolute
,可以将一个元素转换为使用定位布局。
让我们看一个例子。假设我有以下的CSS。
css
我们的首要任务是弄清楚哪种布局算法将被用于渲染.box
元素。根据所提供的CSS,它将使用Flow布局进行渲染。
Flow是网络上的 "OG "布局算法。它创建于一个时代,当时网络主要被视为一个巨大的超链接文档集,就像世界上最大的档案馆。它类似于微软Word等文字处理软件中使用的布局算法。
Flow是用于非表格HTML元素的默认布局算法。除非我们明确选择其他布局算法,否则将使用Flow。
z-index
属性是用来控制堆叠顺序的,如果它们重叠,就会计算出哪一个显示在 "上面"。但问题是:**它没有在Flow布局中实现。**Flow是关于创建文档式布局的,而我还没有看到允许元素重叠的文字处理软件。*
如果你在几年前问我这个问题,我一定会说这样的话。
你不能使用
z-index
,而不同时将position
设置为 "相对 "或 "绝对 "之类,因为z-index
属性取决于position
属性。
**这并不完全是错误的,但这是一个微妙的误解。**更准确的说法是,z-index
属性没有在 Flow 布局算法中实现,因此,如果我们想让这个属性产生影响,就需要选择一个不同的布局算法。
这可能看起来像我在迂腐,但这种小的误解会导致大的混乱。例如,考虑一下这个。
Code Playground
使用Prettier格式化代码
重置代码
HTMLCSS
<style>
结果
刷新结果窗格
启用 "tab "键
在这个演示中,我们有3个兄弟姐妹使用Flexbox布局算法排列。
中间的兄弟姐妹设置了z-index
,**而且还能工作。**试着去掉它,发现它落在了它的兄弟姐妹后面。
*这怎么可能呢?*我们并没有在任何地方设置position: relative
!
这是因为Flexbox的算法实现了z-index
属性。当语言作者在设计Flexbox算法时,他们决定将z-index
属性连接起来,以控制堆叠顺序,就像它在Positioned布局中所做的那样。
**这就是关键的思维模式转变。**CSS属性本身是没有意义的。要由布局算法来定义它们的作用,以及它们在计算中的使用方式。
明确地说,有一些CSS属性在所有布局算法中的作用是相同的。color: red
,无论如何都会产生红色文本。但每种布局算法都可以覆盖任何属性的默认行为。而且许多属性没有任何默认行为。
**这里有一个让我大吃一惊的例子。**你知道吗,width
属性的实现方式因布局算法的不同而不同?
这里就是证明。
Code Playground
使用Prettier格式化代码
重置代码
HTMLCSS
<style>
结果
刷新结果窗格
启用 "tab "键
我们的.item
元素有一个单一的CSS属性:width: 2000px
。
.item
的第一个实例是用Flow布局渲染的,它实际上会消耗2000px的宽度。在Flow布局中,宽度是一个硬性规定。它将占用2000px的空间,后果不堪设想。
然而,.item
的第二个实例是在一个Flex容器内呈现的,这意味着它使用了Flexbox布局。在Flexbox算法中,宽度更像是一种建议。
Flexbox规范称其为假设的尺寸。这是该元素在田园诗般的世界里,在没有任何约束或力量作用于它的情况下会有的尺寸。在一个完美的世界里,这个项目应该是2000px宽,但它被放在一个较窄的容器里,所以它会缩小以适应它。
再一次,框架在这里是超级重要的。这并不是说width
,在涉及到Flexbox时有什么特殊的注意事项。而是Flexbox算法以不同于Flow算法的方式实现了width
属性。*
**我们写的属性是输入,**就像传递给函数的参数。由布局算法来选择如何处理这些输入。如果我们想理解CSS,我们需要理解布局算法是如何工作的。仅仅知道这些属性是不够的。
[
链接到这个标题
](www.joshwcomeau.com/#identifyin…
CSS并没有一个layout-mode
的属性。有几个属性可以调整所使用的布局算法,实际上它可以变得非常棘手
在某些情况下,应用于一个元素的CSS属性会选择一个特定的布局模式。比如说。
css
在其他情况下,我们需要看一下父元素应用了什么CSS。比如说。
html
当我们应用display: flex
,我们实际上并没有为.row
元素使用Flexbox布局算法;相反,我们是说它的子元素应该使用Flexbox布局来定位。
从技术上讲,display: flex
,创建了一个Flex格式化的上下文。所有直接的子元素都将参与这个上下文,这意味着它们将使用Flexbox布局而不是默认的Flow布局。
(display: flex
也会把一个内联元素,如<span>
变成一个块级元素,所以它确实对父元素的布局有一些影响。但它不会改变使用的布局算法)。
[
链接到这个标题
](www.joshwcomeau.com/#layout-alg…
有些布局算法被分割成多个变体。
例如,当我们使用Positioned layout时,就是指几种不同的 "定位方案"。
-
相对式
-
绝对定位
-
固定式
-
粘性
每个变体都有点像它自己的迷你布局算法,尽管它们确实有共同之处(例如,它们都可以使用z-index
属性)。
同样地,在Flow布局中,元素可以是块状的,也可以是内联的。我们很快会讨论更多关于Flow布局的问题。
[
链接到这个标题
](www.joshwcomeau.com/#conflicts)…
当多种布局算法应用于一个元素时会发生什么?
比如说。
html
所有三个列表项都是Flex容器中的子项,所以它们应该按照Flexbox来定位。但中间的子项通过设置position: absolute
,选择了定位布局。
按照我的理解,一个元素将使用一个主要的布局模式来渲染。这有点像特异性:某些布局模式比其他模式有更高的优先级。
我不知道确切的层次结构,但是Positioned布局往往会打败一切。因此,在这个例子中,中间的孩子将使用Positioned布局,而不是Flexbox。
因此,Flexbox的计算方式就好像只有两个孩子,而不是三个。就Flexbox算法而言,这个中间的孩子并不存在。它对算法完全没有影响。*
一般来说,冲突通常是很明显的/故意的。但如果你发现一个元素的行为与你所期望的不一样,那就值得尝试去确定它使用的是哪种布局算法。答案可能会让你吃惊
相对定位
那么,这里有一个难题:如果每个元素都是使用单一的布局算法渲染的,我如何解释相对定位?
一个带有position: relative
的元素显然是使用Positioned布局来渲染的。它可以使用专属的Positioned-layout属性,如top
或left
。然而,它也可以参与Flexbox/Grid布局
我们开始偏离本文的范围了。这东西变得很复杂但这里有一个快速解释,供那些好奇的人参考。
显示更多
[
链接到这个标题
](www.joshwcomeau.com/#inline-mag…
好吧,让我们看看一个典型的 "令人困惑的CSS "问题,看看关注布局算法如何帮助我们解决这个问题。
这里我们有一篮子的猫。
Code Playground
使用Prettier格式化代码
重置代码
HTMLCSS
<div class="photo-wrapper">
结果
刷新结果窗格
启用 "tab "键
嗯......为什么图片下面有一点多余的空间?
如果你用你的开发工具检查,你会发现有几个像素的差异。
图片的高度是250px,但容器的高度是258.5px
如果你熟悉盒子模型,你就知道元素可以用padding、border和margin进行间隔。你可能认为图像上有一些边距,或者容器上有一些填充物?
在这种情况下,**这些属性都不需要负责。**这就是为什么多年来,我私下里把这种情况称为 "内联魔法空间"。它并不是由通常的罪魁祸首造成的。
为了理解这里发生的事情,我们必须对Flow布局进行更深入的挖掘。
[
链接到这个标题
](www.joshwcomeau.com/#flow-layou…
如前所述,Flow布局是为文档设计的,类似于文字处理软件。
文档有以下结构。
-
单个字符被组合成单词和句子。这些元素是并列的,在没有足够的水平空间时可以换行。
-
段落被认为是块,就像标题或图像。块将被垂直堆叠,一个在另一个上面,从上往下。
流程布局是基于这种结构的。单个元素可以被安排为内联元素(并排的,就像段落中的单词),或作为块状元素(从上往下堆叠的大块砖)。
方向因语言而异
在这个例子中,我假设我们使用的是一种水平的、从左到右的语言,如英语。这并不是普遍的情况。
有些语言,如阿拉伯语和希伯来语,是从右到左的水平书写。其他以汉族为基础的语言,如汉语、日语和韩语,传统上是从上到下垂直书写的。
以一种适应这些差异的方式来写CSS已经变得很流行。例如,我们可以写margin-inline-start
,在英语中针对左侧边距,而在阿拉伯语中针对右侧边距。
大多数HTML元素都有合理的默认值。<p>
和<h1>
被认为是块级元素,而<span>
和<strong>
被认为是内联元素。
内联元素是为了在段落中间使用,而不是作为布局的一部分。例如,也许我们想在一个句子的中间添加一个小图标。
为了确保内联元素不会对周围文本的可读性产生负面影响,会增加一些额外的垂直空间。
所以,把这个问题带回我们的谜题:为什么我们的图像有几个额外的像素空间?因为图像是默认的内联元素。
福禄布局算法把这个图片当作段落中的一个字符,并在下面增加了一点空间,以确保它不会与(理论上的)下一行文本上的字符靠得很近,令人不舒服。
默认情况下,内联元素是 "基线 "对齐的。这意味着图像的底部将与文本所处的不可见的水平线对齐。这就是为什么图像下面有一些空间--这些空间是为下划线准备的,比如字母j
和p
。
因此,这不是边距,或填充,或边框......这是Flow布局应用于内联元素的一点内在空间。
[
链接到这个标题
](www.joshwcomeau.com/#solving-th…
有很多方法可以解决这个问题。也许最简单的是在Flow布局中把这个图片当作一个块。
代码乐园
使用Prettier格式化代码
重置代码
HTMLCSS
<style>
结果
刷新结果窗格
启用 "tab "键
在我的职业生涯中,内联魔法空间已经咬了我很多次,所以我把这个确切的修复方法纳入了我的自定义CSS Reset中。
另外,由于这种行为是Flow布局所特有的,我们可以翻转到不同的布局算法。
Code Playground
使用Prettier格式化代码
重置代码
HTMLCSS
<style>
结果
刷新结果窗格
启用 "tab "键
最后,我们也可以通过将额外的空间缩小到0来解决这个问题,使用line-height
。
代码游乐场
使用Prettier格式化代码
重置代码
HTMLCSS
<style>
结果
刷新结果窗格
启用 "tab "键
这个解决方案通过将行距设为0来移除所有额外的行距。这将使多行文本完全无法阅读,但由于这个容器不包含任何文本,所以这不是一个问题。
我建议使用前面两个解决方案中的一个。提出这个方案纯粹是因为它很有趣(也因为它证明了问题是由行距引起的!)。
行高和可及性
当我们在讨论行高的时候:你是否知道,"无样式 "的HTML实际上被认为是不可访问的,因为线条之间的距离太近?如果行间距不大,有阅读障碍的人就很难解析文本。
大多数浏览器的默认行高是1.1到1.2,但根据WCAG指南,我们应该把正文的行高至少设为1.5。
请看我的自定义CSS重置,看看我是如何解决这个问题的。
[
链接到这个标题
](www.joshwcomeau.com/#building-a…
**所以,重点来了:**如果你只专注于研究特定的CSS属性的作用,你永远不会明白这个神秘的空间是怎么来的。display
或line-height
的MDN页面中并没有解释它。
正如我们在这篇文章中所了解到的,"内联魔法空间 "其实根本就不是什么魔法。它是由Flow布局算法中的一条规则引起的,即内联元素应该受到line-height
。但对我来说,它似乎很神奇,多年来,因为我的心理模型中有这个大洞。
CSS中有很多布局算法,它们都有各自的怪癖和隐藏机制。当我们专注于CSS属性时,我们只看到了冰山的一角。我们从来没有学习过真正重要的概念,如堆叠上下文或包含块或层叠起源
不幸的是,网上的许多CSS教学也同样浅薄。在博客文章或推特上分享一个方便的CSS片段是很常见的,但却没有解释为什么它能发挥作用,也没有解释布局算法如何使用它。*
CSS是一种难以调试的语言;我们没有错误信息,也没有debugger
,或console.log
。我们的直觉是我们拥有的最好的工具。当我们开始使用CSS片段而没有真正理解它们时,只是时间问题,直到布局算法的某些隐藏方面给我们的齿轮带来麻烦,使我们停滞不前。
几年前,我决定开始培养自己对CSS的直觉。每当我被一些出乎意料的行为所困扰时,我就会像洗热水澡一样沉浸在这个问题中。我会深入研究MDN文档和CSSWG规范,并对代码进行修补,直到我觉得我已经真正弄清楚了事情的真相。
这是一项绝对值得的投资,但我的天哪,它花了很长时间。😅
我想为其他开发者加快这个过程。我最近发布了一个全面的在线课程,叫做《JavaScript开发者的CSS》。
在这门课程中,我们探讨了CSS在引擎盖下是如何工作的。它专注于提供一个你可以使用的强大的心智模型,这个模型可以帮助你一次一次地建立起对CSS的直觉。我不能保证你永远不会再遇到CSS挑战,但我可以帮助你建立克服这些挑战所需的工具箱。
到目前为止,已经有超过9500名开发人员参加了这一课程,他们来自Facebook、谷歌、微软、Netflix等组织,还有许多其他组织。反应是压倒性的积极。
你可以在课程主页上了解更多:
css-for-js.dev。