CSS display: contents 怎样运用？
display: contents 是一个比力生疏的属性，虽然属于 display 这个根本上是最常见的 CSS 属性，但是 contents 这个取值根本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支撑。
本文将深入一下这个成心思的属性值。
根本用途
按照 W3C 对 display: contents 的定义。
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
简便翻译一下便是，将设定了该属性值的元素本身将不会发生任何盒子，但是它的从保存其子代元素的正常展现。
看个简便的例子。有如下简便三层构造：
<div class="container">
<div class="wrap">
<div class="inner"></div>
</div>
</div>简便的 CSS 如下：
.container {
width: 200px;
height: 200px;
background: #bbb;
}
.wrap {
border: 2px solid red;
padding: 20px;
box-sizing: border-box;
}
.inner {
border: 2px solid green;
padding: 20px;
box-sizing: border-box;
}展现如下：
这个非常好懂得，但是假如，我们给中心层的容器增加上 display: contents，再看看结果：
<div class="container">
<div class="wrap" style="display: contents">
<div class="inner"></div>
</div>
</div>
可以看到，没有了中心层的 border: 2px solid red 的红色边框，整个 .wrap div 仿佛不存在一样，但是它的子元素却是正常的渲染了。
重点，设定了display: contents的元素本身不会被渲染，但是其子元素能够正常被渲染。
这个属性我不断在思索有什么非常适合的使用点。
总结来说，这个属性适用于那些充当遮罩（wrapper）的元素，这些元素本身没有什么作用，可以被忽略的一些规划场景。
充当无语义的包裹框
比来写 React、Vue 的时候，发明这个属性在写 JSX 的时候能有很好的作用，并且也非常相符这个属性本身的定位。
我们在写 React、RN 时，经常需要输出一段模板。
return (
<div class="wrap">
<h2>Title</h2>
<div>...</div>
</div>
)我们只是想输出 .wrap div 内的内容，但是由于框架要求，输出的 JSX 模板必需包括在一个父元素之下，所以不得已，需要增加一个 .wrap 停止包裹，但是这个 .wrap 本身是没有任何样式的。
假如输出的元素是要放在其他 display: flex、display: grid 容器之下，加了一层无意义的 .wrap 之后，整个规划又需要从新停止调整，费事。
一种办法是使用框架供给的容器 <React.Fragment>，它不会向页面插入任何余外节点。
在 Vue 中相似的是 <template> 元素， <template> 也是不会被渲染在 DOM 树中，查看页面构造也没法看到，但是 display: contents 是存在于页面构造中的，只是没有生成任何盒子。
这个多出来的父元素其实是没必要的。这个时候，我们也可以增加上 display: contents，像是这样：
return (
<div class="wrap" style="display: contents">
<h2>Title</h2>
<div>...</div>
</div>
)这样，它既起到了包裹的作用，但是在实际渲染中，这个 div 其实没有生成任何盒子，面面俱到。并且像一些 flex 规划、grid 规划，也不会受到影响。
Codepen Demo -- display: contents | display: flex 的穿透影响
让代码愈加相符语义化
思考这个非常实际的场景，此刻我们的页面上充斥了大量的可点击按钮，或者点击触发响应功效的文字等元素。但是，从语义上而言，它们应当是一个一个的 <button>，但是实际上，更多时候我们都是使用了 <p>、<div>、<a> 等标签停止了模拟，给他们加上了响应的点击事情罢了。
像是下面这样，虽然没什么问题，但是相对而言不那么相符语义化：
<p class="button">
Button
</p>
<p class="button">
Click Me
</p>.button {
width: 120px;
line-height: 64px;
text-align: center;
background-color: #ddd;
border: 2px solid #666;
}
我们不使用 <button> 的缘由有许多，<button> 相对 div 而言没那么好操纵，且会引入许多默许样式。但是，有了 display: contents，我们可以让我们的代码既相符语义化，同时不需要去解决 <button> 带来的一些样式问题：
<p class="button">
<button style="display: contents">
Button
</button>
</p>
<p class="button">
<button style="display: contents">
Click Me
</button>
</p>增加了 <button style="display: contents">Click Me</button> 的包裹，不会对样式带来什么影响，button 也不会实际渲染在页面构造中，但是页面的构造语义上好了不少。
CodePen Demo -- Button with display: contents
关于对页面构造、语义化有强迫症的一些同学而言，灵敏使用这个属性可以解决许多问题。
在更换元素及表单元素中一些成心思的现象
display: contents 并非在所有元素下的展现都一致。
关于可更换元素及大部分表单元素，使用 display: contents 的作用相似于 display: none。
也就是说关于一些常见的可更换元素、表单元素：
<br>
<canvas>
<object>
<audio>
<iframe>
<img>
<video>
<frame>
<input>
<textarea>
<select>
作用了 display: contents 相当于使用了 display: none ，元素的整个框和内容都没有绘制在页面上。
<button> 的一些异同
与其他表单元素不一样，正常而言，增加了 display: contents 相当于被潜藏，不会被渲染。但是实际使用历程中发明，<button></button> 假如包裹了内容，其一些可继承样式还是会被子内容继承。这个实际使用的历程中需要留意一下。
对 A11Y 的影响
在一些外文文档中有一些计议是关于 display: contents 的使用会影响到页面的可拜访性。例如作用了 display: contents 的容器及列表，会对页面的可拜访性带来一些不测结果。
[css-a11y][css-display] display: contents; strips semantic role from elements
这个我看临时没有明白的结论，假如你的页面临可拜访性的要求很高，详细使用的此属性的话也是需要留意一下这一点。
CSS 中相似的一些影响规划的属性
CSS 本身其实也在不断在努力，增添了各种属性去让我们在规划上有更多的空间与操纵权。总而言之给我的感受是让 CSS 愈加的像是一个完全的工程而不仅仅只是展示样式。
相似的一些成心思的属性：
CSS新特性contain，操纵页面的重绘与重排
CAN I USE
看看兼容性。
不算太暗澹，但也不算全面普及。思考用在一些渐进增强的场景傍边。
引荐教程：《CSS教程》
以上就是CSS display: contents 怎样使用？的具体内容，更多请关注百分百源码网其它相关文章！
