Html 找到元素'；s宽度/高度来自

在FirefoxDOM检查器中检查HTML时，我一直看到这一点

---

元素的实际宽度（本例中为1170px）与假定选择的规则（750px）不匹配。我发现这可能是由

max width

规则引起的，但在这种情况下没有

max width

。我想这是媒体查询或其他奇怪的规则造成的。有没有办法，使用Firefox或Chrome或任何开发人员控制台来获得一个位置上影响元素宽度/高度的所有规则的摘要？

元素的宽度可能会受到各种因素的影响，而要准确了解影响它的因素，最好的方法是首先查看inspector中的“框模型”选项卡。您应该看到如下内容：

在这里，您可以看到元素大小的每个组件的细分。中心框指示元件的基本尺寸。在几乎所有的情况下，如果您在CSS中设置了

宽度

规则，您应该在这里看到相同的数字；如果没有，则应开始检查元素的子元素，以查看是否有任何子元素的宽度大于为

width

属性指定的数字，因为子元素扩展其父元素是一个相当常见的问题/意外的结果

如果您在此处看到与指定相同的数字，则较大的宽度来自元素的

填充

/

边距

/

边框

，因此您应该开始检查样式规则，查看您为这些属性设置了什么，以及在何处设置

此外，请记住，根据您使用的

框大小调整方法，元素的总宽度将根据这些属性进行不同的计算。。例如，如果已设置
框大小：边框框，然后应用以下样式规则：

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

您将看到如下的长方体模型图表：


请注意，基本宽度编号不再是
500
，因为
填充
和
边框
规则现在对宽度起作用。因此，当您指定一个宽度时，它将是所有这些属性的总宽度，而您的基本宽度将仅是
填充
或
边框
属性未使用的剩余宽度

我希望这会有所帮助，如果您需要任何进一步的澄清，请告诉我。
我遇到过这样的情况，有时我的元素中有东西将宽度推到大于其规定宽度。例如，您可能在div.container中有一个1170px宽的图像（或者，该图像可能没有清除浮点）。由于没有设置最大宽度，div.container已扩展以容纳图像。请提供一个？