使用Display:contents

Display:contents 目前还处于css3试验阶段,不过大部分PC和移动端浏览器已经支持了(除了IE)。

其作用是去掉了盒子模型,而展示的是子项的盒子。也可以说,相当于将子项“提级”到相当于本元素同一级别。

举个例子:

<div style="display:grid;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <ul>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

顶层元素想要实现grid布局,ul里面的li也想加入grid布局,两种方法 1:将li转为div,去掉ul,这叫flatter markup 2: 使用ul 上使用 display:contents

采用第二种方式有什么好处? 保持了文档结构,你开始使用ul肯定是有原因的,flatter markup动作太大,而只使用一个样式解决问题达到了直观最简单就是最正确的目的。

Refs: More accessible markup with display: contents


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1