web前端入門到實(shí)戰(zhàn)：CSS Display屬性的雙值寫法

display屬性

display 屬性用來控制一個元素及其子元素的 格式化上下文， 你應(yīng)該在剛剛學(xué)習(xí)CSS的時候就知道，有些元素是塊級元素，有些則是行內(nèi)元素。

有了 display 屬性，你就可以切換元素不同的狀態(tài)。比如說，通常一個 h2 元素是一個塊級元素，但是通過切換，它就能以內(nèi)聯(lián)元素展現(xiàn)。

這幾年，我們也知道了Grid 布局和彈性盒布局。我們只需要將 display 屬性的值設(shè)置為 display: grid 或 display: flex 就可以實(shí)現(xiàn)這兩種布局。當(dāng) display 屬性改變后，其子元素才變成了flex或者grid元素，從而對一些特性進(jìn)行響應(yīng)。

display: grid 和 display: flex 對一個元素的產(chǎn)生了對外和對內(nèi)兩方面的影響。當(dāng)一個原本是內(nèi)聯(lián)元素 span 的 display 屬性被設(shè)置為 flex ，這個 span 元素就會變?yōu)橐粋€塊級元素，但其子元素卻變?yōu)閒lex元素。如果我們想要這個被應(yīng)用 display: grid 或 display: flex 的元素保持內(nèi)聯(lián)效果不變，則可以設(shè)置其為 display: inline-grid 或 display: inline-flex 。請看下面的代碼片段：

改造display屬性

display 屬性可以從兩個維度描述元素，對外來說它用來確認(rèn)一個元素在普通文檔流中的表現(xiàn)，比如說是塊級元素或是內(nèi)聯(lián)元素；對內(nèi)來說它改變其子元素的格式化上下文。

為了更好地描述這個行為，css的 display 屬性的標(biāo)準(zhǔn)中現(xiàn)在允許接收兩個值，第一個值用來描述他的外在表現(xiàn)，第二個值用來描述其子元素的格式。下面的列表中展示了部分新標(biāo)準(zhǔn)與單一值的對照：

目前為止，這個雙值的寫法只有Firefox 70實(shí)現(xiàn)了支持。

display: inline-block和display: flow-root

你也許注意到了， 原來的 display: block 變成了 display: block flow , display: inline 變成了 display: inline flow ，但是 flow-root 這個值是什么意思呢？

實(shí)際上，這個屬性并不是一個新的屬性，而是在CSS2里面就有的屬性。

[flow-root]

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

翻譯過來就是，應(yīng)用這個屬性之后的元素會生成一個塊級容器盒，并使用流式布局將其內(nèi)容展示出來，它總是為其內(nèi)容創(chuàng)建新的塊級上下文。

下面的示例中展現(xiàn)了應(yīng)用 flow-root 及未應(yīng)用的區(qū)別。

實(shí)際上 display: inline-block 和 display: flow-root 兩個關(guān)聯(lián)緊密，因?yàn)?display: inline-block 實(shí)際上就是 display: inline flow-root 。

我們現(xiàn)在能用這個雙值屬性嗎？

目前這個只有Firefox70支持了這一語法，其他的瀏覽器仍將其當(dāng)成非法的語法處理，因此生產(chǎn)情況下使用還是為時過早。目前所有的功能都可以用單一值來實(shí)現(xiàn)，所以這個新的語法可能會作為別名的形式存在，并且沒有必要進(jìn)行一刀式切換。

然而，這種雙值的寫法有助于理解display屬性的對內(nèi)對外表現(xiàn)，它很清晰地展示了display對其自己以及其子元素的影響。無論是教學(xué)還是自學(xué)層面來說，清晰的關(guān)系總是會更好一些，不是嗎？