display:contents

2020-09-23135次阅读css

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 ,元素的整个框和内容都没有绘制在页面上。

 

上一篇: ECMAScript 2020(ES2020)空值合并操作符、可选链操作符  下一篇: FC类型来声明函数组件  

display:contents相关文章