今天海淘科技為你帶來(lái)的是display：contents 與消失的盒模型。

在CSS3可視化模塊中，display: contents是display屬性一個(gè)新的屬性值。FireFox已經(jīng)實(shí)現(xiàn)了對(duì)該屬性的支持，這里將簡(jiǎn)單介紹該屬性的作用，及其被瀏覽器廣泛支持后存在實(shí)用價(jià)值的原因。"元素本身不能生成任何盒模型，但是它的子元素或者偽元素可以正常生成。為了盒模型的生成與布局，該元素就好像在Dom樹(shù)中被子元素與偽元素所替代一樣“。上述規(guī)范說(shuō)明了我們可以在文檔中添加一個(gè)HTML元素，并在該元素的選擇器中添加display:contents樣式，那么該元素就會(huì)像是不存在一樣，它的子元素會(huì)替代它在Dom樹(shù)中的位置。

使用示例理解起來(lái)更加容易，因此我們需要使用FireFox。假設(shè)現(xiàn)在我們有兩個(gè)Div元素，外層的Div元素?fù)碛蓄?lèi)content，內(nèi)層Div元素?fù)碛蓄?lèi)inner。分別為它們添加背景色與邊界，如下所示：

如果為外層Div元素添加display:contents屬性，示例變?yōu)?

外層Div消失了，我們看不到外層Div的背景，邊框 ，甚至應(yīng)用到該元素的寬度也已經(jīng)失效了，內(nèi)層Div元素則占據(jù)了整個(gè)視口。display:contents便是這樣起作用的?？梢允褂肍ireFox打開(kāi)CodePen中的該示例查看效果。在不支持該屬性的瀏覽器中，display:contents將會(huì)被忽略。需要注意的是，內(nèi)部Div元素不能繼承的屬性?xún)H僅是那些與盒模型生成或布局相關(guān)的。我們可以在外層Div元素上設(shè)置font-size屬性，其子元素則會(huì)繼承該屬性。

使用 display:contents 來(lái)實(shí)現(xiàn)Flex項(xiàng)目的“繼承”

這可能有用嗎?如果你正在使用彈性布局，那么你應(yīng)該知道只有Flex容器的直接子元素可以成為Flex項(xiàng)目。而Flex項(xiàng)目的子元素是不能夠使用父元素的規(guī)則來(lái)進(jìn)行布局的。我們可以通過(guò)一個(gè)簡(jiǎn)單的示例來(lái)印證。有一個(gè)Div包含快，內(nèi)部直接嵌套了三個(gè)類(lèi)名分別為box1、box2、box3的Div元素，這三個(gè)Div均是Flex項(xiàng)目，可以對(duì)它們使用彈性布局。然而box4、box5是box2元素的子元素，因此盡管我們已經(jīng)應(yīng)用Flex項(xiàng)目屬性到box5，但由于其父元素display屬性沒(méi)有被設(shè)置為flex，因此會(huì)被忽略。

我們給第二個(gè)Flex項(xiàng)目添加一個(gè)明顯的背景和邊界來(lái)幫助我們看清楚發(fā)生了什么。

如果為box2添加屬性displsy:content，則在FireFox中我們將看到box2已經(jīng)消失了，我們也不能看到橘色的邊界和背景。不僅僅是這樣，它好像已經(jīng)在Dom樹(shù)中完全消失不見(jiàn)了。而box2的子元素則像Flex項(xiàng)目一樣，應(yīng)用到box5上面的樣式也生效了。

這是站點(diǎn)CodePen上的一個(gè)示例。

如果想添加一些有語(yǔ)義但又不顯示的元素，那么該屬性是非常有用的。如果有一些內(nèi)容在語(yǔ)義上適合被標(biāo)記為article，然而article元素在布局上是Flex項(xiàng)目，但是你真正希望的是使article內(nèi)部嵌套的元素作為Flex項(xiàng)目存在。那么為了使article嵌套的元素成為Flex項(xiàng)目，比起去除article元素，你更應(yīng)該使用display:contents來(lái)移除article產(chǎn)生的盒模型。這樣做你將會(huì)在語(yǔ)義化以及顯示效果上都能得到很好地效果。聽(tīng)起來(lái)還不錯(cuò)。

今天的display：contents 與消失的盒模型，就到這里了，還有搜索引擎seo推廣的文章。文章下載，點(diǎn)擊：display：contents 與消失的盒模型