display屬性

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

為澗西等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及澗西網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都做網(wǎng)站、澗西網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

display: grid 和 display: flex 對一個元素的產(chǎn)生了對外和對內(nèi)兩方面的影響。當一個原本是內(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 屬性可以從兩個維度描述元素，對外來說它用來確認一個元素在普通文檔流中的表現(xiàn)，比如說是塊級元素或是內(nèi)聯(lián)元素；對內(nèi)來說它改變其子元素的格式化上下文。

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

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

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前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻，PDF）

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

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

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

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

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

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