Question

如果在stackoverflow上已经说明了这个问题，请纠正我！我道歉，如果它有，但我一直在寻找一段时间，只发现 hows 而不是为什么。

我的问题是：除非为{ display: inline-block; }指定，否则父div似乎会自动占用页面的整个宽度。指定后，它会根据其子元素的宽度调整宽度。这真的很方便，但我觉得知道为什么发生这种情况对我很重要。这是一些可视化表示的代码。提前谢谢！

编辑：我看到有些人将我的问题标记为副本，但是请告诉我在另一个问题中它解释了为什么显示内联块会自动调整其子项的高度和宽度。谢谢！

#wrapper {
  border: 1px solid black;
  display: inline-block;
}
#child_div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}

<div id="wrapper">
  <div id="child_div"></div>
</div>

Answer 1

display: inline-block基本上是display: inline;（默认为span，strong，em等）和{{1}之间的最佳点。（display: block;，div等默认值。）

内联元素是为文本构建的，因此它们应与文本内联，并且只与它们包含的文本一样宽。因此，您无法设置p元素的宽度。

默认情况下，块元素用于填充所有可用宽度，因此它们位于自己的行上而不是内联流。这对段落之类的东西很有用，但有时你想要更短的线条，这样就可以调整inline元素的宽度。

内联块元素位于中间。它们像block元素一样内联，但您可以将宽度设置为display: inline;元素。

Answer 2

内联块默认为缩小到适合宽度的原因是因为如果它不，那么您将无法在其上放置多个内联块相同的行，因为每个内联块将坚持占据其线框的整个宽度，没有任何其他内联级框的空间，从而打破了具有内联级块容器盒的目的（这是如何“ inline-block“在spec中定义。

块框默认为水平填充其包含块的原因是因为块框在正常流中垂直堆叠，内联内容在由它们建立的内联格式化上下文中流动。此内联内容需要有空间流动，并且通过使用块框水平填充其包含块来提供空间。

另见：

Answer 3

我想说属性echo json_encode($json);有一个W3C规范：

这里有一些来自MDN的文档： https://developer.mozilla.org/de/docs/Web/CSS/display

这是W3C规范： https://www.w3.org/TR/css-display-3/

并回答你：为什么？

在浏览器中用C ++编写的CSS后面有一个布局引擎。通常情况下，这些元素的行为与您从CSS中所知道的不同。来自浏览器的人需要说明在哪里绘制这些元素和线条以及元素应该如何表现，因此所有这些属性都像：

display或

display: block | inline-block等

因此引擎知道如何绘制用户最终在浏览器窗口中看到的所有行。

以下是有关此内容的详细信息： https://www.w3.org/TR/CSS2/visuren.html

我希望这是你的问题，我可以帮助你更多地了解这一点。

Answer 4

宽度和高度的默认值是auto，由...计算浏览器。

在您的情况下，wrapper div的宽度未指定（取为auto）且为display: inline-block（可设置高度/宽度），因此其宽度由浏览器计算关于其子元素的宽度（child_div）。

为什么内联块会根据孩子的宽度自动调整宽度？

4 个答案: