兩值顯示語法（有時三個）

您知道單值語法：.thing {display：block; }。值“塊”是一個值。顯示有很多單一值。例如，Inline-FLEX（就像Flex一樣），它成為一個Flex容器，但行為就像是內聯級元素，而不是塊級元素。有點直覺，但通過兩個值系統可以更好地服務，該系統可以更廣泛地和直觀地應用相同的概念。

為了深入了解，您應該閱讀Rachel Andrew的博客文章CSS Display屬性的兩個值語法。該規格也是一本不錯的讀物，就像Miriam的這段視頻一樣：

這就是它在我的大腦中映射的方式

您本質上從每一列中選擇一個來描述所需的佈局。因此，我們使用所有時間映射的現有值：

思考我那裡的這兩列的另一種方法是“外部”和“內部”顯示值。在外面，就像在其周圍的其他元素一樣流動。就像在這些元素內部如何發生佈局一樣。

您真的可以使用它嗎？

並不真地。 Firefox 70首先是在大門口，我知道Chrome-Land或Safari-Land的支持。這是CSS的巨大發展，但就日常使用而言，這將是數年的。像佈局這樣至關重要的事情並不是您想讓這種較小的描述性好處而失敗的事情。通過@supports等逐漸增強，也可能不值得麻煩。

花絮

• 查看自動轉換位。僅僅因為您將元素設置為特定顯示，並不意味著它可能不會被某種情況否決。我假設它主要是在談論被迫成為彈性項目或網格項目的元素。
• 有隱含的速記。就像您在列表列表中一樣，這是真正的內聯流列表 - 項目，而列表項是塊流列表項目。看起來都很直觀。
• 您仍然使用諸如table-low and tableer-group之類的東西。這些是單價值交易，內容也無。
• 第一列從技術上講也包括跑步，但據我所知，沒有瀏覽器曾經支持磨合顯示器。
• 第二列從技術上講包括Ruby，但我從來沒有理解那是什麼。

我們如何談論CSS

我喜歡Rachel如何將這種變化與更合理的心理和教學模式聯繫在一起：

…他們可以正確地解釋盒子與其他盒子的相互作用，即它們是障礙還是內聯以及孩子的行為。為了了解顯示的是和做什麼，我認為它們是一個非常有用的澄清。結果，我開始使用這兩個值教授顯示，以幫助解釋您更改格式上下文時發生的事情。

看到實現新功能總是很令人興奮，我希望其他瀏覽器也能盡快實施這兩個值版本。然後，在不久的將來，我們將能夠以與現在的解釋相同的方式編寫CSS，清楚地證明了盒子與孩子的行為之間的關係。

以上是兩值顯示語法（有時三個）的詳細內容。更多資訊請關注PHP中文網其他相關文章！