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中文網其他相關文章！