display: contents——可以去掉盒子的边框
七娃博客163 次
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的默认样式去掉了,是不是一个骚操作?
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:display: contents——可以去掉盒子的边框 - Qui-Note
评论 | 0 条评论