display:contents于2016年就已经得到了Firefox的支持。
display:contents使盒子不产生任何框 ，因此不会渲染其背景、边框和内边距，但颜色、字体等继承的属性还是会对其子元素产生效果。( 即在盒子上添加display:contents , 使盒子设置了background border padding width height 等属性会失效 )。
display:contents在React、Vue中的运用
写React、RN时，经常需要输出一段模板。
return (
<div class="wrap">
<h2>Title</h2>
<div>...</div>
</div>
)JSX模板必须包含在一个父元素之下，所以不得已，需要添加一个.wrap进行包裹，但是这个.wrap本身是没有任何样式的。
如果输出的元素是要放在其他 display: flex、display: grid 容器之下，加了一层无意义的 .wrap 之后，整个布局又需要重新进行调整。
除了使用框架提供的容器 <React.Fragment>，它不会向页面插入任何多余节点外，不妨试试给.wrap添加display: contents样式试试。
display: contents在替换元素或表单元素中一些表现
对于可替换元素及大部分表单元素，使用 display: contents 的作用类似于 display: none。
也就是说对于一些常见的可替换元素、表单元素：
- <br>
- <canvas>
- <object>
- <audio>
- <iframe>
- <img>
- <video>
- <frame>
- <input>
- <textarea>
- <select>
作用了 display: contents 相当于使用了 display: none ，元素的整个框和内容都没有绘制在页面上。
