display的contents属性

一、作用

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，此时元素的填充、边框等就不会显示了，同时子元素不改变。

有其他使用场景欢迎交流^_

display的contents属性相关推荐

DHTML中style的display和visibility属性
DHTML中style的display和visibility属性 display是隐藏该对象,使该对象不占用页面排版空间. document.all("tr1").style.di ...
html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？
代码如下面所示,我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换.但是,实际展示的时候,width 变换确实用了2秒 ...
display的各种属性
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接: https://blog.csdn.net/qq_39429962/article ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS 中的内联元素、块级元素以及display的各个属性的特点
1. display:block 1.1 block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 1.2 block元素可以设置width,he ...
display:column常用属性解释
1.官方网址: http://www.displaytag.org/1.2/displaytag/tagreference.html 2.<display:column>介绍: 顾名思义, ...
css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性前提:使用如下属性,必须在父代设置displ ...
display内联属性
block,inline和inline-block概念和区别总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 ...
display的常用属性
display的属性值 display所有的取值在下图中: 常用的几种取值 1. display:none 此元素不会被显示,并且不占据页面空间与visibility:hidden的区别 hidde ...
java中display中的属性_浅谈CSS3中display属性的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...

display的contents属性

一、作用

二、引用

1、交互的时候需要改变父元素的显示

display的contents属性相关推荐

最新文章

热门文章