display屬性

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

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

有了 display 屬性，你就可以切換元素不同的狀態(tài)。比如說，通常一個(gè) h2 元素是一個(gè)塊級元素，但是通過切換，它就能以內(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 對一個(gè)元素的產(chǎn)生了對外和對內(nèi)兩方面的影響。當(dāng)一個(gè)原本是內(nèi)聯(lián)元素 span 的 display 屬性被設(shè)置為 flex ，這個(gè) span 元素就會(huì)變?yōu)橐粋€(gè)塊級元素，但其子元素卻變?yōu)閒lex元素。如果我們想要這個(gè)被應(yīng)用 display: grid 或 display: flex 的元素保持內(nèi)聯(lián)效果不變，則可以設(shè)置其為 display: inline-grid 或 display: inline-flex 。請看下面的代碼片段：

改造display屬性

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

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

目前為止，這個(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里面就有的屬性。

[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)用這個(gè)屬性之后的元素會(huì)生成一個(gè)塊級容器盒，并使用流式布局將其內(nèi)容展示出來，它總是為其內(nèi)容創(chuàng)建新的塊級上下文。

下面的示例中展現(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屬性的對內(nèi)對外表現(xiàn)，它很清晰地展示了display對其自己以及其子元素的影響。無論是教學(xué)還是自學(xué)層面來說，清晰的關(guān)系總是會(huì)更好一些，不是嗎？

本文名稱：web前端入門到實(shí)戰(zhàn)：CSSDisplay屬性的雙值寫法
URL鏈接：http://jinyejixie.com/article46/gdjseg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、軟件開發(fā)、響應(yīng)式網(wǎng)站、微信小程序、自適應(yīng)網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)