CSS的display:contents详解

 

定义：元素本身不生成任何框，但其子元素和伪元素仍然生成框和文本正常运行。出于框生成和布局的目的，必须将元素视为已经在元素树中由其内容替换（包括其源文档子元素及其伪元素，例如::before和::after伪元素，它们是在元素的子元素之前/之后生成正常）。

例子：

html+css

 

效果(还木有添加display:contents属性)：

 

 

父元素contents添加 display: contents

 

 

效果：

 

 

总结：

display：contents 使 div 不产生任何框 ，因此不会渲染其背景 边框 和 内边距 ，但颜色 / 字体等继承的属性还是会对其子元素产生效果

( 即在盒子上添加 display : contents , 当前盒子若设置了 background border padding width height 等属性会失效 )