CSS 技巧測試：你真的了解 CSS 嗎？

要點(diǎn)回顧

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

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

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

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

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

第一個(gè)問題對於定期處理文本樣式的人來說應(yīng)該很容易：

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

• 200%
• 2em
• 2
• double

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

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

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

然而，正確的答案是 2。

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

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

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

問題 2：如何使元素重疊

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

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

• z-index
• margin
• overflow
• background

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

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

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

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

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

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

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

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

問題 3：偽元素與偽類

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在靈活的頁面佈局中，將段落的首行顯示為粗體文本。

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

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

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

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

你的得分如何？

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

如果你喜歡這些問題，也許你願(yuàn)意嘗試一下其餘的測試。請放心，其他問題比這些問題容易得多……大部分！

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