查明元素宽度/高度的来源

Question

我经常在Firefox DOM检查器中检查HTML时看到这种情况。

元素的实际宽度（此处为1170px）与所选规则（750px）不匹配。我发现这可能是由于max-width规则引起的，但在这种情况下没有max-width。我认为可能是由媒体查询或其他奇怪的规则导致的。是否有一种方法可以使用Firefox、Chrome或其他开发控制台，在一个地方获取影响元素宽度/高度的所有规则的摘要？

- J-bob

---

我偶尔会遇到这样的问题，当我元素内部的某些东西将宽度推到大于其指定宽度时。例如，您可能在div.container中有一张1170像素宽的图像（或者，也许该图像没有清除浮动）。由于没有设置max-width，div.container已经扩展以容纳图像。 - maguijo

请问您能否提供一个最小、完整且可验证的示例？ - Hidden Hobbes

Answer 1

一个元素的宽度可能受到各种因素的影响，最好的方法是首先查看您的检查器中的“盒模型”选项卡。您应该看到类似于这样的内容：

在这里，您可以看到元素大小的每个组件的细分。中心框表示元素的基本大小。几乎在所有情况下，如果您在CSS中设置了width规则，则应该在此处看到相同的数字；如果没有，则应该开始检查元素的子级，以查看是否有任何子级比您为width属性指定的数字更宽，因为子级扩展其父级是一个相当常见的问题/意外结果。

如果您在此处看到与指定的相同的数字，则较大的宽度来自元素的padding/margin/border，因此您应该开始检查您的样式规则以查看您已设置哪些属性以及在哪里设置了它们。

此外，请记住，根据您使用的哪种box-sizing方法，元素的总宽度将以不同的方式从这些属性计算出来..例如，如果您设置了box-sizing: border-box;，并且应用了这些样式规则：

div {
    width: 500px;
    padding: 100px;
    border: 5px solid black;
}

你将会看到一个类似于下面这样的盒模型图表： 请注意，基础宽度数字不再是500了，因为padding和border规则现在也会对宽度产生影响。所以当您指定一个宽度时，它将是所有这些属性的总宽度，而您的基础宽度仅是未被padding或border属性占用的剩余部分。

希望这可以帮助你，如果你需要进一步的解释，请告诉我。

- Blake Mann