CSSdisplay: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).
简略翻译一下便是,将设定了该属性值的元素自身将不会发生任何盒子,但是它的从保存其子代元素的正常展现。
看个简略的例子。有如下简略三层构造:
简略的 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,再看看结果:
可以看到,没有了中间层的 border: 2px solid red 的红色边框,整个 .wrap div 宛如不存在同样,但是它的子元素却是正常的渲染了。
重点,设定了display: contents的元素自身不会被渲染,但是其子元素能够正常被渲染。
这个属性我不断在思索有什么非常适合的运用点。
总结来说,这个属性适用于那些充当遮罩(wrapper)的元素,这些元素自身没有什么作用,可以被忽略的一些布局场景。
充当无语义的包裹框
比来写 React、Vue 的时候,发明这个属性在写 JSX 的时候能有非常不错的作用,而且也非常相符这个属性自身的定位。
我们在写 React、RN 时,时常需要输出一段模板。
return (Title
... )
我们只是想输出 .wrap div 内的内容,但是因为框架请求,输出的 JSX 模板必需包括在一个父元素之下,所以不得已,需要增加一个 .wrap 进行包裹,但是这个 .wrap 自身是没有任何样式的。
要是输出的元素是要放在其他 display: flex、display: grid 容器之下,加了一层无心义的 .wrap 之后,整个布局又需要从新进行调整,费事。
一种办法是运用框架供给的容器
在 Vue 中相似的是 元素, 也是不会被渲染在 DOM 树中,查看页面构造也没法看到,但是 display: contents 是存在于页面构造中的,只是没有生成任何盒子。
这个多出来的父元素其实是没须要的。这个时候,我们也可以增加上 display: contents,像是这样:
return (Title
... )
这样,它既起到了包裹的作用,但是在现实渲染中,这个 div 其实没有生成任何盒子,两全其美。而且像一些 flex 布局、grid 布局,也不会挨到影响。
Codepen Demo -- display: contents | display: flex 的穿透影响
让代码更加相符语义化
考虑这个非常现实的场景,此刻我们的页面上充斥了批量的可点击按钮,或者点击触发响应功能的文字等元素。但是,从语义上而言,它们应当是一个一个的