CSS 技巧測(cè)試：你真的了解 CSS 嗎？

要點(diǎn)回顧

• 設(shè)置雙倍行高的最佳方法是使用無(wú)單位數(shù)字（例如 2），這樣具有不同字體大小的子元素可以繼承正確的行高比率。
• 盡管普遍誤解認(rèn)為 z-index 本身會(huì)導(dǎo)致重疊，但實(shí)際上可以通過(guò) margin 屬性（特別是設(shè)置負(fù)邊距）使 HTML 元素重疊。
• 偽元素和偽類(lèi)是 CSS 中截然不同的特性：偽類(lèi)在特定條件下應(yīng)用于實(shí)際的 HTML 元素，而偽元素允許對(duì)文檔中并非實(shí)際 HTML 元素的部分進(jìn)行樣式設(shè)置。
• W3C 試圖在 CSS3 選擇器規(guī)范中區(qū)分偽元素和偽類(lèi)，方法是為偽元素選擇器使用兩個(gè)冒號(hào)（::first-line），為偽類(lèi)使用一個(gè)冒號(hào)（:hover），但為了向后兼容性，瀏覽器必須同時(shí)支持這兩種版本。

你認(rèn)為自己精通 CSS 嗎？如果過(guò)去六個(gè)月我在網(wǎng)上提供的免費(fèi) CSS 測(cè)試結(jié)果有任何參考意義的話，許多經(jīng)驗(yàn)豐富的開(kāi)發(fā)者對(duì) CSS 的了解程度并沒(méi)有他們想象的那么好。在迄今為止參加測(cè)試的 3000 多人中，平均得分僅為 55%。

但是，平均值本身并沒(méi)有那么有趣。我更想知道人們錯(cuò)在哪里。為了撰寫(xiě)這篇文章，我分析了數(shù)據(jù)，并重點(diǎn)關(guān)注了人們得分特別低的三個(gè)問(wèn)題。我將逐一講解每個(gè)問(wèn)題，向您展示大多數(shù)人選擇的答案，并解釋正確的答案。

可以肯定地說(shuō)，如果你在閱讀完這篇文章后自己參加測(cè)試，你將擁有不公平的優(yōu)勢(shì)！

問(wèn)題 1：設(shè)置 line-height 的最佳方法

第一個(gè)問(wèn)題對(duì)于定期處理文本樣式的人來(lái)說(shuō)應(yīng)該很容易：

你希望網(wǎng)站上的文本默認(rèn)情況下為雙倍行高。以下哪個(gè) line-height 值是實(shí)現(xiàn)此目的的最佳方法？

• 200%
• 2em
• 2
• double

有四個(gè)答案可供選擇，你預(yù)計(jì)有 25% 的人會(huì)靠運(yùn)氣答對(duì)，但只有 31% 的人答對(duì)了這個(gè)問(wèn)題！花點(diǎn)時(shí)間自己選擇一個(gè)答案，然后繼續(xù)閱讀。

首先，double 是個(gè)干擾項(xiàng)。line-height 唯一接受的關(guān)鍵字值是 normal。我很高興地說(shuō)，只有 9% 的人選擇了這個(gè)選項(xiàng)。其余三個(gè)答案都很受歡迎。

大多數(shù)人選擇的答案是 2em（39% 的人選擇了這個(gè)答案）。事實(shí)上，2em 當(dāng)然會(huì)為應(yīng)用它的元素提供雙倍行高；但 200% 也會(huì)，而只有 21% 的人喜歡這個(gè)答案！要么 em 比百分比更流行，要么人們并不真正理解它們。

然而，正確的答案是 2。

很久以前，當(dāng)我第一次學(xué)習(xí) CSS 時(shí)，我就被灌輸了這個(gè)教訓(xùn)。始終將 line-height 指定為無(wú)單位數(shù)字；這樣，指定不同字體大小的子元素將繼承該數(shù)字，而不是固定的行高。

假設(shè)頁(yè)面具有 12pt 的默認(rèn)字體大小，但它還包含一個(gè)字體大小為 24pt 的標(biāo)題。如果你將正文的 line-height 設(shè)置為 2em（或 200%），那么你將在整個(gè)文檔中獲得恰好 24pt（正文字體大小的兩倍）的行高——即使在該標(biāo)題中也是如此。因此，標(biāo)題將是單倍行高，而不是雙倍行高！

相反，將 line-height 設(shè)置為 2 會(huì)告訴瀏覽器即使字體大小發(fā)生變化也要保持字體大小/行高比率。正文的行高將為 24pt，但對(duì)于標(biāo)題的 24pt 字體，行高將自動(dòng)增加到 48pt。

問(wèn)題 2：如何使元素重疊

這個(gè)問(wèn)題有點(diǎn)棘手。它需要一些 CSS 布局經(jīng)常需要的“技巧”經(jīng)驗(yàn)：

以下哪個(gè) CSS 屬性本身就可以導(dǎo)致 HTML 元素重疊？

• z-index
• margin
• overflow
• background

選好答案了嗎？好的，讓我們深入探討。

再一次，有一個(gè)很容易排除的選項(xiàng)：background。除了 2% 的測(cè)試者之外，所有人都避開(kāi)了它，因?yàn)樗麄冎浪刂票尘邦伾蛨D像。

不幸的是，大多數(shù)人直接選擇了 z-index。高達(dá) 46% 的人選擇了這個(gè)答案。我猜這是因?yàn)闆](méi)有人真正理解 z-index 的工作原理。事實(shí)上，單獨(dú)設(shè)置 z-index 屬性沒(méi)有任何效果；你還需要設(shè)置元素的 position 屬性才能使 z-index 發(fā)揮作用。簡(jiǎn)而言之，z-index 允許你控制確實(shí)重疊的元素的堆疊順序，但它們首先需要重疊。MDN 有一篇非常好的文章，名為“理解 CSS z-index”，值得一讀，了解更多詳情。

如果你曾經(jīng)使用過(guò) overflow，那么它也應(yīng)該很容易排除。它控制不適合大小框的內(nèi)容的行為：是否被截?cái)?，是否流出框的邊緣等。同樣，這取決于框的大小是否通過(guò)其他屬性來(lái)約束；它本身不會(huì)導(dǎo)致重疊。盡管如此，仍有 22% 的人認(rèn)為它可能會(huì)。

這讓我們只剩下 margin，這是正確的答案。只有 30% 的人答對(duì)了。你可能會(huì)好奇，一個(gè)在元素之間創(chuàng)建距離的屬性怎么可能導(dǎo)致它們重疊。如果你做過(guò)任何實(shí)際的 CSS 布局，答案應(yīng)該很明顯：負(fù)邊距會(huì)使元素重疊。

為了演示這一點(diǎn)，創(chuàng)建一個(gè)包含兩個(gè) div 元素的頁(yè)面。將第二個(gè) div 的 margin-top 設(shè)置為負(fù)值，例如 -100px。砰！第二個(gè) div 現(xiàn)在覆蓋了第一個(gè) div 的底部一百像素。

在實(shí)踐中，你幾乎不會(huì)故意像這樣重疊塊，但負(fù)邊距對(duì)于將 HTML 元素?cái)D壓到它們通常不會(huì)去的地方非常有用。我經(jīng)常使用它們將左浮動(dòng)或右浮動(dòng)的元素推入其父框的填充區(qū)域。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)史愛(ài)好者來(lái)說(shuō)，2005 年使用負(fù)邊距重疊元素使得所謂的 One True Layout（以及后來(lái)的 Holy Grail 布局）等三列頁(yè)面布局成為可能。

問(wèn)題 3：偽元素與偽類(lèi)

我承認(rèn)，最后一個(gè)問(wèn)題有點(diǎn)卑鄙。但只有 23% 的測(cè)試者能夠正確回答這個(gè)問(wèn)題（這比運(yùn)氣還差?。?，它顯然觸及了一個(gè)令人困惑的點(diǎn)：

以下哪個(gè)效果最適合使用偽元素來(lái)實(shí)現(xiàn)？

• 當(dāng)用戶將鼠標(biāo)懸停在超鏈接上時(shí)，為其添加陰影。
• 當(dāng)選中復(fù)選框時(shí)，以不同的顏色顯示復(fù)選框的標(biāo)簽。
• 為表格的奇數(shù)行和偶數(shù)行賦予不同的背景顏色。
• 在靈活的頁(yè)面布局中，將段落的首行顯示為粗體文本。

這三個(gè)選擇都是使用偽類(lèi)實(shí)現(xiàn)的效果；只有一個(gè)涉及偽元素。你能區(qū)分它們嗎？

偽類(lèi)是實(shí)際 HTML 元素可能處于的特定狀態(tài)?？梢园阉胂蟪梢粋€(gè)虛擬類(lèi)，瀏覽器在特定條件下會(huì)自動(dòng)將其應(yīng)用于元素。

偽元素是文檔的一部分，即使它不是實(shí)際的 HTML 元素，CSS 也允許你對(duì)其進(jìn)行樣式設(shè)置。它就像一個(gè)虛擬 HTML 元素——即使它周?chē)鷽](méi)有實(shí)際的 HTML 標(biāo)簽，你也可以對(duì)其進(jìn)行樣式設(shè)置。

考慮到這種區(qū)別，讓我們來(lái)看一下這些選項(xiàng)：

當(dāng)用戶將鼠標(biāo)懸停在超鏈接上時(shí)，為其添加陰影。

超鏈接是一個(gè)實(shí)際的 HTML 元素。僅在特定情況下（當(dāng)鼠標(biāo)懸停在其上時(shí)）對(duì)其應(yīng)用樣式意味著我們正在使用偽類(lèi)。在這種情況下，你將使用的偽類(lèi)是 :hover。

22% 的測(cè)試者認(rèn)為這是一個(gè)偽元素。

當(dāng)選中復(fù)選框時(shí)，以不同的顏色顯示復(fù)選框的標(biāo)簽。

同樣，標(biāo)簽是一個(gè)實(shí)際的 HTML 元素，而不是虛擬元素。當(dāng)選中復(fù)選框時(shí)，瀏覽器會(huì)將 :checked 偽類(lèi)應(yīng)用于它。然后，你可以在你的選擇器中使用它來(lái)設(shè)置復(fù)選框的樣式，甚至可以設(shè)置它旁邊的標(biāo)簽的樣式（例如，使用相鄰?fù)x擇器 ）。

20% 的測(cè)試者認(rèn)為這是一個(gè)偽元素。

為表格的奇數(shù)行和偶數(shù)行賦予不同的背景顏色。

這是真正愚弄人們的一個(gè)問(wèn)題，但再一次，我們談?wù)摰氖菍?duì)實(shí)際 HTML 元素（在本例中為 tr 元素）應(yīng)用樣式。tr 在其父元素的子元素集合中是奇數(shù)還是偶數(shù)，這只是你可以用偽類(lèi)匹配的另一種情況。

在這種情況下，偽類(lèi)是 :nth-child(even)（或 :nth-child(2n)）用于偶數(shù)元素，:nth-child(odd)（或 :nth-child(2n 1)）用于奇數(shù)元素。

我猜這僅僅是因?yàn)?:nth-child 和偽元素通常聽(tīng)起來(lái)都像是非?；逎?CSS 特性，但有 36% 的測(cè)試者選擇了這個(gè)作為偽元素。

在靈活的頁(yè)面布局中，將段落的首行顯示為粗體文本。

當(dāng)然，這是正確的答案。到目前為止，希望區(qū)別已經(jīng)很清楚了。在靈活的頁(yè)面布局中，你無(wú)法查看頁(yè)面的 HTML 代碼并說(shuō)“那里的元素只包含段落文本的第一行”。瀏覽器根據(jù)段落的寬度進(jìn)行換行，這是你在靈活的頁(yè)面布局中無(wú)法控制的。

:first-line 是允許你對(duì)塊中的第一行文本應(yīng)用樣式的偽元素，無(wú)論該第一行換行到第二行的位置在哪里。

如果你在想“好吧，這聽(tīng)起來(lái)很有道理，但是，沒(méi)有人知道偽元素和偽類(lèi)的區(qū)別”，那么 W3C 同意你的看法。在 CSS3 選擇器規(guī)范中，為了區(qū)分兩者，它更改了語(yǔ)法，以便偽元素選擇器使用兩個(gè)冒號(hào)（::first-line），而偽類(lèi)仍然使用一個(gè)冒號(hào)（:hover）。當(dāng)然，為了向后兼容性，瀏覽器必須同時(shí)支持這兩種版本。

所以是的，就像我說(shuō)的那樣：卑鄙的問(wèn)題。但是，嘿，如果你像我一樣是 CSS 極客，我想你會(huì)知道你的偽元素和偽類(lèi)的區(qū)別。

你的得分如何？

就是這樣：測(cè)試中的三個(gè)難題。如果你自信地回答了其中一個(gè)問(wèn)題，那么你做得不錯(cuò)。答對(duì)了兩個(gè)？還不錯(cuò)。如果你答對(duì)了所有三個(gè)，我很想聽(tīng)聽(tīng)你的想法！尤其是在我已經(jīng)給出這些答案之后，我真的很需要一些更棘手的 CSS 問(wèn)題的想法。請(qǐng)?jiān)谠u(píng)論中發(fā)布它們！

如果你喜歡這些問(wèn)題，也許你愿意嘗試一下其余的測(cè)試。請(qǐng)放心，其他問(wèn)題比這些問(wèn)題容易得多……大部分！

以上是3件事（幾乎）沒(méi)人知道CSS的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！