display屬性：
display 屬性用來控制一個(gè)元素及其子元素的格式化上下文，你應(yīng)該在剛剛學(xué)習(xí)CSS的時(shí)候就知道，有些元素是塊級(jí)元素，有些則是行內(nèi)元素。有了 display 屬性，你就可以切換元素不同的狀態(tài)。比如說，通常一個(gè) h1 元素是一個(gè)塊級(jí)元素，但是通過切換，它就能以內(nèi)聯(lián)元素展現(xiàn)。
這幾年，我們也知道了Grid 布局和彈性盒布局。我們只需要將 display 屬性的值設(shè)置為 display: grid 或 display: flex 就可以實(shí)現(xiàn)這兩種布局。當(dāng) display 屬性改變后，其子元素才變成了flex或者grid元素，從而對(duì)一些特性進(jìn)行響應(yīng)。
display: grid 和 display: flex 對(duì)一個(gè)元素的產(chǎn)生了對(duì)外和對(duì)內(nèi)兩方面的影響。當(dāng)一個(gè)原本是內(nèi)聯(lián)元素 span 的 display 屬性被設(shè)置為 flex ，這個(gè) span 元素就會(huì)變?yōu)橐粋€(gè)塊級(jí)元素，但其子元素卻變?yōu)閒lex元素。如果我們想要這個(gè)被應(yīng)用 display: grid 或 display: flex 的元素保持內(nèi)聯(lián)效果不變，則可以設(shè)置其為 display: inline-grid 或 display: inline-flex 。請(qǐng)看下面的代碼片段：
改造display屬性：
display 屬性可以從兩個(gè)維度描述元素，對(duì)外來說它用來確認(rèn)一個(gè)元素在普通文檔流中的表現(xiàn)，比如說是塊級(jí)元素或是內(nèi)聯(lián)元素；對(duì)內(nèi)來說它改變其子元素的格式化上下文。
為了更好地描述這個(gè)行為，css的 display 屬性的標(biāo)準(zhǔn)中現(xiàn)在允許接收兩個(gè)值，第一個(gè)值用來描述它的外在表現(xiàn)，第二個(gè)值用來描述其子元素的格式。下面的列表中展示了部分新標(biāo)準(zhǔn)與單一值的對(duì)照：
目前為止，這個(gè)雙值的寫法只有Firefox 70實(shí)現(xiàn)了支持。
display: inline-block和display: flow-root 你也許注意到了， 原來的 display: block 變成了 display: block flow , display: inline 變成了 display: inline flow ，但是 flow-root 這個(gè)值是什么意思呢？
實(shí)際上，這個(gè)屬性并不是一個(gè)新的屬性，而是在CSS2里面就有的屬性。應(yīng)用這個(gè)屬性之后的元素會(huì)生成一個(gè)塊級(jí)容器盒，并使用流式布局將其內(nèi)容展示出來，它總是為其內(nèi)容創(chuàng)建新的塊級(jí)上下文。
下面的示例中展現(xiàn)了應(yīng)用 flow-root 及未應(yīng)用的區(qū)別。
實(shí)際上 display: inline-block 和 display: flow-root 兩個(gè)關(guān)聯(lián)緊密，因?yàn)?display: inline-block 實(shí)際上就是 display: inline flow-root 。我們現(xiàn)在能用這個(gè)雙值屬性嗎？
目前這個(gè)只有Firefox70支持了這一語法，其他的瀏覽器仍將其當(dāng)成非法的語法處理，因此生產(chǎn)情況下使用還是為時(shí)過早。目前所有的功能都可以用單一值來實(shí)現(xiàn)，所以這個(gè)新的語法可能會(huì)作為別名的形式存在，并且沒有必要進(jìn)行一刀式切換。然而，這種雙值的寫法有助于理解display屬性的對(duì)內(nèi)對(duì)外表現(xiàn)，它很清晰地展示了display對(duì)其自己以及其子元素的影響。無論是教學(xué)還是自學(xué)層面來說，清晰的關(guān)系總是會(huì)更好一些，不是嗎？
熱門跟貼