3件事（几乎）没人知道CSS

CSS 技巧测试：你真的了解 CSS 吗？

要点回顾

• 设置双倍行高的最佳方法是使用无单位数字（例如 2），这样具有不同字体大小的子元素可以继承正确的行高比率。
• 尽管普遍误解认为 z-index 本身会导致重叠，但实际上可以通过 margin 属性（特别是设置负边距）使 HTML 元素重叠。
• 伪元素和伪类是 CSS 中截然不同的特性：伪类在特定条件下应用于实际的 HTML 元素，而伪元素允许对文档中并非实际 HTML 元素的部分进行样式设置。
• W3C 试图在 CSS3 选择器规范中区分伪元素和伪类，方法是为伪元素选择器使用两个冒号（::first-line），为伪类使用一个冒号（:hover），但为了向后兼容性，浏览器必须同时支持这两种版本。

你认为自己精通 CSS 吗？如果过去六个月我在网上提供的免费 CSS 测试结果有任何参考意义的话，许多经验丰富的开发者对 CSS 的了解程度并没有他们想象的那么好。在迄今为止参加测试的 3000 多人中，平均得分仅为 55%。

但是，平均值本身并没有那么有趣。我更想知道人们错在哪里。为了撰写这篇文章，我分析了数据，并重点关注了人们得分特别低的三个问题。我将逐一讲解每个问题，向您展示大多数人选择的答案，并解释正确的答案。

可以肯定地说，如果你在阅读完这篇文章后自己参加测试，你将拥有不公平的优势！

问题 1：设置 line-height 的最佳方法

第一个问题对于定期处理文本样式的人来说应该很容易：

你希望网站上的文本默认情况下为双倍行高。以下哪个 line-height 值是实现此目的的最佳方法？

• 200%
• 2em
• 2
• double

有四个答案可供选择，你预计有 25% 的人会靠运气答对，但只有 31% 的人答对了这个问题！花点时间自己选择一个答案，然后继续阅读。

首先，double 是个干扰项。line-height 唯一接受的关键字值是 normal。我很高兴地说，只有 9% 的人选择了这个选项。其余三个答案都很受欢迎。

大多数人选择的答案是 2em（39% 的人选择了这个答案）。事实上，2em 当然会为应用它的元素提供双倍行高；但 200% 也会，而只有 21% 的人喜欢这个答案！要么 em 比百分比更流行，要么人们并不真正理解它们。

然而，正确的答案是 2。

很久以前，当我第一次学习 CSS 时，我就被灌输了这个教训。始终将 line-height 指定为无单位数字；这样，指定不同字体大小的子元素将继承该数字，而不是固定的行高。

假设页面具有 12pt 的默认字体大小，但它还包含一个字体大小为 24pt 的标题。如果你将正文的 line-height 设置为 2em（或 200%），那么你将在整个文档中获得恰好 24pt（正文字体大小的两倍）的行高——即使在该标题中也是如此。因此，标题将是单倍行高，而不是双倍行高！

相反，将 line-height 设置为 2 会告诉浏览器即使字体大小发生变化也要保持字体大小/行高比率。正文的行高将为 24pt，但对于标题的 24pt 字体，行高将自动增加到 48pt。

问题 2：如何使元素重叠

这个问题有点棘手。它需要一些 CSS 布局经常需要的“技巧”经验：

以下哪个 CSS 属性本身就可以导致 HTML 元素重叠？

• z-index
• margin
• overflow
• background

选好答案了吗？好的，让我们深入探讨。

再一次，有一个很容易排除的选项：background。除了 2% 的测试者之外，所有人都避开了它，因为他们知道它控制背景颜色和图像。

不幸的是，大多数人直接选择了 z-index。高达 46% 的人选择了这个答案。我猜这是因为没有人真正理解 z-index 的工作原理。事实上，单独设置 z-index 属性没有任何效果；你还需要设置元素的 position 属性才能使 z-index 发挥作用。简而言之，z-index 允许你控制确实重叠的元素的堆叠顺序，但它们首先需要重叠。MDN 有一篇非常好的文章，名为“理解 CSS z-index”，值得一读，了解更多详情。

如果你曾经使用过 overflow，那么它也应该很容易排除。它控制不适合大小框的内容的行为：是否被截断，是否流出框的边缘等。同样，这取决于框的大小是否通过其他属性来约束；它本身不会导致重叠。尽管如此，仍有 22% 的人认为它可能会。

这让我们只剩下 margin，这是正确的答案。只有 30% 的人答对了。你可能会好奇，一个在元素之间创建距离的属性怎么可能导致它们重叠。如果你做过任何实际的 CSS 布局，答案应该很明显：负边距会使元素重叠。

为了演示这一点，创建一个包含两个 div 元素的页面。将第二个 div 的 margin-top 设置为负值，例如 -100px。砰！第二个 div 现在覆盖了第一个 div 的底部一百像素。

在实践中，你几乎不会故意像这样重叠块，但负边距对于将 HTML 元素挤压到它们通常不会去的地方非常有用。我经常使用它们将左浮动或右浮动的元素推入其父框的填充区域。

对于网页设计史爱好者来说，2005 年使用负边距重叠元素使得所谓的 One True Layout（以及后来的 Holy Grail 布局）等三列页面布局成为可能。

问题 3：伪元素与伪类

我承认，最后一个问题有点卑鄙。但只有 23% 的测试者能够正确回答这个问题（这比运气还差！），它显然触及了一个令人困惑的点：

以下哪个效果最适合使用伪元素来实现？

• 当用户将鼠标悬停在超链接上时，为其添加阴影。
• 当选中复选框时，以不同的颜色显示复选框的标签。
• 为表格的奇数行和偶数行赋予不同的背景颜色。
• 在灵活的页面布局中，将段落的首行显示为粗体文本。

这三个选择都是使用伪类实现的效果；只有一个涉及伪元素。你能区分它们吗？

伪类是实际 HTML 元素可能处于的特定状态。可以把它想象成一个虚拟类，浏览器在特定条件下会自动将其应用于元素。

伪元素是文档的一部分，即使它不是实际的 HTML 元素，CSS 也允许你对其进行样式设置。它就像一个虚拟 HTML 元素——即使它周围没有实际的 HTML 标签，你也可以对其进行样式设置。

考虑到这种区别，让我们来看一下这些选项：

当用户将鼠标悬停在超链接上时，为其添加阴影。

超链接是一个实际的 HTML 元素。仅在特定情况下（当鼠标悬停在其上时）对其应用样式意味着我们正在使用伪类。在这种情况下，你将使用的伪类是 :hover。

22% 的测试者认为这是一个伪元素。

当选中复选框时，以不同的颜色显示复选框的标签。

同样，标签是一个实际的 HTML 元素，而不是虚拟元素。当选中复选框时，浏览器会将 :checked 伪类应用于它。然后，你可以在你的选择器中使用它来设置复选框的样式，甚至可以设置它旁边的标签的样式（例如，使用相邻同胞选择器 ）。

20% 的测试者认为这是一个伪元素。

为表格的奇数行和偶数行赋予不同的背景颜色。

这是真正愚弄人们的一个问题，但再一次，我们谈论的是对实际 HTML 元素（在本例中为 tr 元素）应用样式。tr 在其父元素的子元素集合中是奇数还是偶数，这只是你可以用伪类匹配的另一种情况。

在这种情况下，伪类是 :nth-child(even)（或 :nth-child(2n)）用于偶数元素，:nth-child(odd)（或 :nth-child(2n 1)）用于奇数元素。

我猜这仅仅是因为 :nth-child 和伪元素通常听起来都像是非常晦涩的 CSS 特性，但有 36% 的测试者选择了这个作为伪元素。

在灵活的页面布局中，将段落的首行显示为粗体文本。

当然，这是正确的答案。到目前为止，希望区别已经很清楚了。在灵活的页面布局中，你无法查看页面的 HTML 代码并说“那里的元素只包含段落文本的第一行”。浏览器根据段落的宽度进行换行，这是你在灵活的页面布局中无法控制的。

:first-line 是允许你对块中的第一行文本应用样式的伪元素，无论该第一行换行到第二行的位置在哪里。

如果你在想“好吧，这听起来很有道理，但是，没有人知道伪元素和伪类的区别”，那么 W3C 同意你的看法。在 CSS3 选择器规范中，为了区分两者，它更改了语法，以便伪元素选择器使用两个冒号（::first-line），而伪类仍然使用一个冒号（:hover）。当然，为了向后兼容性，浏览器必须同时支持这两种版本。

所以是的，就像我说的那样：卑鄙的问题。但是，嘿，如果你像我一样是 CSS 极客，我想你会知道你的伪元素和伪类的区别。

你的得分如何？

就是这样：测试中的三个难题。如果你自信地回答了其中一个问题，那么你做得不错。答对了两个？还不错。如果你答对了所有三个，我很想听听你的想法！尤其是在我已经给出这些答案之后，我真的很需要一些更棘手的 CSS 问题的想法。请在评论中发布它们！

如果你喜欢这些问题，也许你愿意尝试一下其余的测试。请放心，其他问题比这些问题容易得多……大部分！

以上是3件事（几乎）没人知道CSS的详细内容。更多信息请关注PHP中文网其他相关文章！