1. 首页
  2. css

CSS准备`显示:内容`

去年我问,\”我们会把CSS网格的HTML展平吗?\”问题在于,元素共同参与同一个CSS网格(或flexbox)的唯一方式是让它们成为兄弟元素。因此,在某些情况下,为了布局的好处(不是很好),我们可能会被激励放弃HTML语义。
一个答案是display: contents;-一个神奇的新显示值,它本质上使容器消失,使元素的子元素在DOM中处于下一个级别。
快进到今天,Chrome正在发布它,WebKit正在发布它,Firefox已经发布了它。在边缘投赞成票。想更好地理解它吗?Rachel Andrew写了\”带显示内容的消失框\”,并阐明了它的工作原理:
如果您想添加一些元素,这个值会很有用,因为它在文档语义方面有意义,但在显示方面没有意义。也许你有一些有意义的内容被标记为一篇文章,那篇文章在你的布局中是一个弹性项目,但是你真正想成为弹性项目的元素被嵌套在那篇文章中。您可以使用display:contents删除由article生成的框,而不是展平标记并删除article元素以使这些内部元素成为flex布局的一部分。然后,您将获得两个方面的最佳效果,即语义标记和设计所需的视觉显示。听起来不错。
曼努埃尔•雷戈也尝试着解释一下:
display: contents使div不生成任何框,因此它的背景、边框和填充都不会被渲染。但是,继承的属性(如颜色和字体)会对子元素(span元素)产生预期的影响。
还有一个与此非常相关的主题:子网格。可能是字面上的display: subgrid;。在维护语义方面,它可能不如display: contents;重要,但也不同。埃里克·迈耶称之为子网格是必不可少的:
网格布局是过去20年来第一个填补这个漏洞的重要候选方案,我不想看到它们从一开始就受到束缚。子网格对于网格的采用至关重要。我希望他们能尽快实施,并理解其中的区别,Rachel Andrew还写道:\”为什么显示:内容不是CSS网格布局子网格\”:如果没有人建议display: contents解决了大多数问题,那么我们真的需要子网格吗?事实并非如此,display: contents确实解决了一类问题,但这些问题与子网格可以帮助我们解决的问题不同。

CSS准备`显示:内容` 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%87%86%e5%a4%87%e6%98%be%e7%a4%ba%ef%bc%9a%e5%86%85%e5%ae%b9/