html – 使用display：grid的容器的直接子元素是什么类型的显示？

概述如果 HTML中只有一个p标签,背景颜色为蓝色,并且边距为：auto,那么它会占用页面的宽度,宽度和填充可以更改,就像内联块一样. p { background-color: blue; margin: auto;} <p>Lorem ipsum</p> 但是,如果我将父div添加到p标签,并使div为display：grid,使用grid-template-columns：1fr,则蓝 如果 HTML中只有一个p标签,背景颜色为蓝色,并且边距为：auto,那么它会占用页面的宽度,宽度和填充可以更改,就像内联块一样.

p {  background-color: blue;  margin: auto;}

<p>Lorem ipsum</p>

但是,如果我将父div添加到p标签,并使div为display：grID,使用grID-template-columns：1fr,则蓝色背景仅占用文本的宽度.

div {  display: grID;  grID-template-columns: 1fr;}p {  background-color: blue;  margin: auto;}

<div>  <p>Lorem ipsum</p></div>

那么,是否显示：grID使子元素显示：inline-block？

解决方法 答案是不.使用display：grID不会显示子元素：inline-block.

当您将元素设置为display：grID或inline-grID时,可以建立网格格式上下文.这是一个独特的布局结构,具有自己的一套规则.某些行为与块格式化上下文中的行为重合的事实是偶然的.

网格项的显示值由网格容器控制.事实上,值(在浏览器检查员中)或作者声明的内容(您可以将显示设置为您想要的任何内容)无关紧要,忽略这些值并且最终行为由网格容器控制.

flex项的显示值以相同的方式运行.

更多细节：

> CSS网格规格：§ 6.1. Grid Item Display
> CSS FlexBox规格：§ 4. Flex Items

总结

以上是内存溢出为你收集整理的html – 使用display：grid的容器的直接子元素是什么类型的显示？全部内容，希望文章能够帮你解决html – 使用display：grid的容器的直接子元素是什么类型的显示？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。