`width` 和 `height` 默认设置的差异答案

【问题标题】：Difference in `width` and `height` default settings`width` 和 `height` 默认设置的差异
【发布时间】：2013-07-14 15:53:35
【问题描述】：

对于我浏览器中的默认设置，width 获取默认值 100% 和 height 获取默认值 auto。

众所周知，垂直和水平的默认效果非常不同。默认情况下，盒子的宽度（例如<div>，但使用的元素当然会改变结果）将是周围容器块元素的 100%。并且高度显然等于文本高度。

但是如果我设置width: auto;，意思是width和height现在有相同的值auto，那么效果还是有很大不同的（实际上宽度没有区别）。

（我在 Windows 7 上使用的是最新版本的 Google Chrome，但这并没有什么大的区别 - 浏览器在这里并没有那么不同。）

我的问题是，width 和height 这两个非常相似的比例怎么会有这么大的区别？如此大的差异以至于auto 的值给出了与两者截然不同的结果？

在另一个元素上获得与默认效果相同的效果是相当累人的。也就是说，要获得 100% 高度的效果以及适合文本宽度的宽度效果，这非常困难并且需要额外的工作/解决方法。我正在寻找的是更好地了解这两个比例及其auto 值。如果你们有一些好的资源和链接，我会很高兴。

【问题讨论】：

【解决方案1】：

您的问题令人困惑，但我会根据我的理解回答

div 是一个块级元素，默认height 为auto，默认width 为100%，因此如果您期望高度 = 文本高度，那么宽度 = 句子/段落宽度比你需要使用display: inline-block; 或float

简而言之，height 默认为 auto，width 为块级元素的100%。

对于内联元素，height 是自动的，width 是自动的（height、width 不会生效，除非你使用 display: inline-block;）

【讨论】：

【解决方案2】：

很简单，在传统 CSS 中评估 auto 的高度和宽度的方式彼此非常不同，这是由于 Normal Flow 的工作方式而导致的。

宽度和高度从auto 等值转换为使用值的方式在section 10 of the CSS 2.1 spec 中有详细描述。

【讨论】：