web前端入門到實戰：CSS Display屬性的雙值寫法

display屬性

display 屬性用來控制一個元素及其子元素的 格式化上下文， 你應該在剛剛學習CSS的時候就知道，有些元素是塊級元素，有些則是行內元素。

有了 display 屬性，你就能夠切換元素不一樣的狀態。好比說，一般一個 h1 元素是一個塊級元素，可是經過切換，它就能之內聯元素展示。

這幾年，咱們也知道了Grid 佈局和彈性盒佈局。咱們只須要將 display 屬性的值設置爲 display: grid 或 display: flex 就能夠實現這兩種佈局。當 display 屬性改變後，其子元素才變成了flex或者grid元素，從而對一些特性進行響應。

display: grid 和 display: flex 對一個元素的產生了對外和對內兩方面的影響。當一個本來是內聯元素 span 的 display 屬性被設置爲 flex ，這個 span 元素就會變爲一個塊級元素，但其子元素卻變爲flex元素。若是咱們想要這個被應用 display: grid 或 display: flex 的元素保持內聯效果不變，則能夠設置其爲 display: inline-grid 或 display: inline-flex 。請看下面的代碼片斷：

改造display屬性

display 屬性能夠從兩個維度描述元素，對外來講它用來確認一個元素在普通文檔流中的表現，好比說是塊級元素或是內聯元素；對內來講它改變其子元素的格式化上下文。

爲了更好地描述這個行爲，css的 display 屬性的標準中如今容許接收兩個值，第一個值用來描述他的外在表現，第二個值用來描述其子元素的格式。下面的列表中展現了部分新標準與單一值的對照：

目前爲止，這個雙值的寫法只有Firefox 70實現了支持。

display: inline-block和display: flow-root

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

實際上，這個屬性並非一個新的屬性，而是在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前端開發學習Q-q-u-n： 731771211，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）

翻譯過來就是，應用這個屬性以後的元素會生成一個塊級容器盒，並使用流式佈局將其內容展現出來，它老是爲其內容建立新的塊級上下文。

下面的示例中展示了應用 flow-root 及未應用的區別。

實際上 display: inline-block 和 display: flow-root 兩個關聯緊密，由於 display: inline-block 實際上就是 display: inline flow-root 。

咱們如今能用這個雙值屬性嗎？

目前這個只有Firefox70支持了這一語法，其餘的瀏覽器仍將其當成非法的語法處理，所以生產狀況下使用仍是爲時過早。目前全部的功能均可以用單一值來實現，因此這個新的語法可能會做爲別名的形式存在，而且沒有必要進行一刀式切換。

然而，這種雙值的寫法有助於理解display屬性的對內對外表現，它很清晰地展現了display對其本身以及其子元素的影響。不管是教學仍是自學層面來講，清晰的關係老是會更好一些，不是嗎？