到达元素宽度/高度的底部

Question

我在Firefox DOM检查器中检查HTML时始终看到这一点。

元素的实际宽度（在这种情况下为1170px）与所谓选择的规则（750px）不匹配。我发现这可能是由max-width规则引起的，但在这种情况下没有max-width。我假设有一个媒体查询或某个其他奇怪的规则负责这一点。有没有办法，使用Firefox或Chrome或任何开发控制台来获取影响元素宽度/高度的所有规则的摘要？

Answer 1

元素的宽度可能会受到各种因素的影响，而确切地看到元素宽度的最佳方法是首先查看检查器中的“Box模型”选项卡。你应该看到这样的东西：

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

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

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

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

你会看到一个像这样的盒子模型图：

请注意，基本宽度编号不再是500，因为padding和border规则现在对宽度有贡献。因此，当您指定宽度时，它将是所有这些属性的总宽度，而您的基本宽度将只是padding或border属性未使用的剩余部分。

我希望有所帮助，如果您想进一步澄清任何事情，请告诉我。