CSS的display:contents詳解

 

定義：元素本身不生成任何框，但其子元素和偽元素仍然生成框和文本正常運行。出於框生成和布局的目的，必須將元素視為已經在元素樹中由其內容替換（包括其源文檔子元素及其偽元素，例如::before和::after偽元素，它們是在元素的子元素之前/之后生成正常）。

例子：

html+css

 

效果(還木有添加display:contents屬性)：

 

 

父元素contents添加 display: contents

 

 

效果：

 

 

總結：

display：contents 使 div 不產生任何框 ，因此不會渲染其背景 邊框 和 內邊距 ，但顏色 / 字體等繼承的屬性還是會對其子元素產生效果

( 即在盒子上添加 display : contents , 當前盒子若設置了 background border padding width height 等屬性會失效 )