关于CSS的3件事

cheatsheet

---

Q1：设置 line-height 的最佳方式

第一个问题对于有文本样式常规操作经验的开发者来说应该很简单：

想要让站点内文字默认为双倍行距。下面哪个 line-height 值是最佳实现方式？

1. 200%
2. 2em
3. 2
4. double

然而，正确答案是 2。这样一来，指定了不同 font-size 的子元素将会继承这个数值而不是一个固定的高度。

我们假设页面默认的 font-size 是 12pt ，不过它也会包含了一个 font-size 为 24pt 的头部。如果你将 body 的 line-height 设置为2em 或者 200%，那样在文档中（当然也包括头部）就会得到一个 24pt 的行高（body 的 font-size 的 2 倍）。因而，头部就是单倍行距，而不是双倍！

相反，将 line-height 设置为 2 会告知浏览器保持 font-size/line-height 比例，即便文字的尺寸发生变化。body 的行高将是 24pt，而头部的文字为 24pt，行高也将自动增长为 48pt。

Q2：如何让元素部分重叠

1. z-index
2. margin
3. overflow
4. background

同样，有一个很容易排除的选项： background。除了 2% 的测试者外都避开了它，知道它控制背景颜色和图像。

很不幸，很多测试者直接选择了 z-index。几乎有 46% 栽倒在这个选项上。我猜测是因为他们没有真正地理解 z-index的工作原理。实际上，自身设置 z-index 属性根本无济于事；你还需要设置元素的 position 属性让 z-index 起作用。简而言之， z-index 控制了部分重叠元素间的堆放顺序，不过前提是它们要重叠。

如果你曾用到过，overflow 同样也很容易排除。它用来在一个固定尺寸的盒子内控制内部元素的行为：是否被遮盖，是否在盒子边框外部展示，等等。而且，这会需要一些其他 CSS 属性所控制的盒子尺寸；仅仅通过它是不会导致部分遮盖的。然而，22% 的测试者认为它可以。

剩下的就是 margin，也就是正确答案。仅仅 30% 的测试者选择了它。你可能好奇究竟一个属性如何做到元素间的相互遮盖。如果你具备一些 CSS 布局的经验，答案应该很明显：负值 margin 让它们相互遮盖。

实际上，你几乎不会有意地这样覆盖一个区块，不过负值 margin 在处理外层空间小于 HTML 元素大小的情况时出奇地好用。

对 web 设计历史爱好者来讲，在 2005 年负值 margin 实现的部分覆盖元素使得三列页面布局成为可能，比如所谓的One True Layout（以及后来的圣杯布局）。

Q3：伪元素 VS 伪类

下面哪个效果可以通过伪元素很好地实现？

1. 当用户将鼠标悬停在超链接上时，为其添加一个投影；

2. 当复选框选中时，在其对应的 label 上显示一种不同的颜色；

3. 为表格的偶数行和奇数行添加不同的背景色；
4. 在弹性布局中，将段落的第一行加粗显示。

其中三个效果需要借助伪类实现；仅仅有一个需要伪元素。你能区分出不同吗？

伪类是一个真实 HTML
元素上的一个特殊的状态。可以认为是浏览器在特定条件下将一个虚拟的类自动应用于某个元素。

伪元素是 HTML 文档的一部分
尽管它不是真实的 HTML 元素，但是 CSS 允许你为它设置样式。就像是虚拟的 HTML 元素——尽管它没有真实的 HTML 标签，但你仍可以为其添加样式。

先记住这点，我们再来看看下面的选项：

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

超链接是一个真是的 HTML 元素。仅仅在特殊情况下（鼠标悬停）为其应用样式，也就是说我们需要使用伪类。该情况下你应该使用 :hover 伪类。。

当复选框选中时，在其对应的 label 上显示一种不同的颜色

一样不对， label 是一个真实的 HTML 元素，不是虚拟的。当复选框被选中时，浏览器会将 :checked 伪类应用于它。然后，你就能够在选择器中使用它为复选框添加样式，甚至和它相邻的 label 元素（比如：使用相邻元素选择器 +）。

为表格的偶数行和奇数行添加不同的背景色

这着实愚弄了很多人，不过重申一遍我们讨论的是将样式应用于真实的 HTML 元素（在本例中是 tr 元素）。在各自父元素包含的子元素中的偶数或者奇数行的 tr 只是另外一种符合伪类的情景。

在这个示例中，对于偶数行伪类是 :nth-child(even)（或者 :nth-child(2n)），对于奇数行则是 :nth-child(odd) （或者 :nth-child(2n+1)）。

在弹性布局中，将段落的第一行加粗显示
很明显，这是正确答案。现在，但愿我们的讨论足够清晰。在弹性布局中，你无法看到页面中的 HTML 代码只能假想“里面仅仅包含段落文本的第一行”。浏览器会根据段落的宽度进行换行，这在弹性布局中是你无法控制的。

:first-line 是允许你将样式应用于文本块第一行的伪元素，无论第一行是在何处换到第二行。

如果你正在想“OK，确实讲得通，但是拜托——没一个人知道伪元素和伪类之间有什么区别”，确实 W3C 也同意你的观点。CSS3 选择器规范中，在区分二者上做了一次尝试，改变了语法——伪元素选择器使用两个冒号（::first-line），而伪类依旧使用一个（:hover）。当然，为了向后兼容，浏览器必须支持这两个版本。