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 及未應用的區別。

實際上 display: inline-block 和 display: flow-root 兩個關聯緊密，因為 display: inline-block 實際上就是 display: inline flow-root 。我們現在能用這個雙值屬性嗎？

目前這個只有Firefox70支持了這一語法，其他的瀏覽器仍將其當成非法的語法處理，因此生產情況下使用還是為時過早。目前所有的功能都可以用單一值來實現，所以這個新的語法可能會作為別名的形式存在，并且沒有必要進行一刀式切換。然而，這種雙值的寫法有助于理解display屬性的對內對外表現，它很清晰地展示了display對其自己以及其子元素的影響。無論是教學還是自學層面來說，清晰的關系總是會更好一些，不是嗎？