一、作用
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，此時元素的填充、邊框等就不會顯示了，同時子元素不改變。
有其他使用場景歡迎交流_