display:contents

这篇文章发表于 阅读 2

介绍

MDNdisplay:contents的介绍如下:

这些元素自身不会产生特定的盒子。它们被伪盒子(pseudo-box)和子盒子取代。

就是不会产生任何盒子,会由子元素(包括伪元素)来代替。但是可继承的属性依旧会对子元素产生影响。

下面有一段html,分别用不包含display:contents和包含display:contents来比较其中的差异:

<div class="container"> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </div>

不使用display:contents:

.container { display: flex; flex-direction: row; justify-content: space-between; } .main { border: 2px solid red; color: red; padding: 24px; }

使用display:contents:

.container { display: flex; flex-direction: row; justify-content: space-between; } .main { display: contents; border: 2px solid red; color: red; padding: 24px; }

看出第一个例子中子元素上下排列;第二个例子中子元素在同一行,也就是说flex布局作用到到子元素。同时第一个元素的边框也没有显示出来。所以设置display:contents的元素不会参与布局,但是可继承属性会被子元素继承,比如上面的color属性,但是padding属性就无效了。

作用

通过上面的例子可以看出display:contents主要用于不需要参与布局的场景,比如color不能直接设置在子组件上,就可以通过再添加一层元素,这样既不用影响布局,也不用修改子组件。

<div style="display:contents;"> <item>你好</item> </div>

兼容性

目前主流的浏览器都兼容display:contents,可以使用。 //file.vwood.xyz/2023/08/23/upload_y2ig5j6sizhi99tw4t5oo8rvbe3kdt7c.png