Question

如果HTML中只有p标记，其背景颜色为蓝色，并且具有margin: 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>

那么，display: grid是否使子元素具有display: inline-block？

Answer 1

答案是否定的。使用display: grid不会使子元素display: inline-block。

将元素设置为display: grid或inline-grid时，将建立网格格式上下文。这是具有其自己的一组规则的唯一布局结构。某些行为与块格式设置上下文中的行为一致的事实是偶然的。

网格项目的display值由网格容器控制。实际上，值（在浏览器检查器中）或作者声明的内容（您可以将display设置为所需的任何内容）无关紧要，这些值将被忽略，最终行为由网格容器。

弹性项目的display值的操作方式相同。

更多详细信息：

CSS网格规范：§ 6.1. Grid Item Display
CSS Flexbox规范：§ 4. Flex Items

Answer 2

左auto和右inline-block边距值在弯曲或网格元素的情况下表现不同。它将使一个元素完全折叠到其固有宽度，而不是使其按预期扩展。

这与inline-block显示值所产生的行为类似，但是所涉及的元素至关重要，并非您所怀疑的div { display: grid; grid-template-columns: 1fr; } p { background-color: blue; margin: auto; }。

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

.sc-launcher {
  right: 400px;
}

Answer 3

这是您描述的代码：

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

<div>
	<p>Some content goes here...</p>
</div>

以下是带有display: inline-block的代码：

p {
    background-color: blue;
    margin: auto;
}

div {
    display: inline-block;
}

<div>
	<p>Some content goes here...</p>
</div>

如您所见，结果略有不同。如果要检查控制台并选择网格，由于您仅设置了1列，因此它仍将是屏幕的整个宽度。但是，蓝色背景仅占该元素的一小部分。在网格内部的项目上使用margin: auto时，它将在内部居中，就像容器一样。

Answer 4

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    div {
    display: grid;
    grid-template-columns: 1fr;
    }
    p
    {
      background-color: blue;
      margin: auto;
    }
    </style>
    </head>
    <body>
      <div>
          <p>This is the p tag</p>
    </div>
      
    </body>
    </html>

使用display：网格的容器的直接子元素是哪种显示？

4 个答案: