display: contents 元素本身不产生任何边界框,而元素的子元素与伪元素仍然生成边界框,元素文字照常显示(W3C解释)。
理解:当前div 不产生任何框 ,因此不会渲染其背景background 边框border 和 内边距padding/margin ,但字体颜色 / 字体大小等继承的属性还是会对其子元素产生效果
骚应用:用到button上去除button的默认样式 ,小程序中生效;但是用于<br><canvas><object><audio><iframe><img><video><frame><input><textarea><select>等同于display:none隐藏元素
案例:我们将元素button和img放进了p元素中,并设置display: contents ,我们发现img没有显示,button的默认样式去掉了,是不是一个骚操作?