一、介绍
display: contents使元素本身不会产生任何的边框，但是子元素和其伪元素正常显示；
<!DOCTYPE html>
<html>
<head>
<style>
.item {
display: contents;
color: red;
border: 2px solid blue;
background-color: #ffffff;
padding: 20px;
margin: 20px;
}
.item::before {
content: 'before';
color: blue;
}
.item::after {
content: 'after';
color: white;
}
</style>
</head>
<body style="background-color: black;">
<div class="item">
<span>demo</span>
</div>
</body>
</html>
上面这段代码中class="item"的元素，设置了before、after、以及一个span子元素，效果如下：
由于设置了display:contents的元素的元素没有边框，所以元素的背景、padding、margin值都不会显示，但是可继承的属性会被子元素继承（例如color）。
二、作用
1、交互的时候需要改变父元素的显示
元素在某种情况下不需要不需要填充，但不影响子元素的显示.
.item {
color: red;
border: 2px solid blue;
background-color: #ffffff;
padding: 20px;
margin: 20px;
}
设置display:contents，此时元素的填充、边框等就不会显示了，同时子元素不改变。
有其他使用场景欢迎交流_
9160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
