在Firefox DOM检查器中检查我的
HTML时,我总是看到这一点.
元素的实际宽度(在这种情况下为1170px)与假定选择的规则(750px)不匹配.我发现这可能是由最大宽度规则引起的,但在这种情况下没有最大宽度.我假设有一个媒体查询或某个其他奇怪的规则负责这一点.有没有办法,使用Firefox或Chrome或任何开发控制台来获取在一个地方影响元素宽度/高度的所有规则的摘要？
解决方法
元素的宽度可能受到各种因素的影响,并且确切地看到对其产生影响的最佳方法是首先查看检查器中的“Box模型”选项卡.你应该看到这样的东西：
在这里,您可以看到元素大小的每个组件的细分.中间框表示元素的基本大小.几乎在所有情况下,如果你在CSS中设置了宽度规则,你应该在这里看到相同的数字;如果不这样做,您应该开始检查元素的子元素,以查看是否有任何子元素比您为width属性指定的数字宽,因为扩展父元素的子元素是一个相当常见的问题/意外结果.
如果您在此处看到与指定相同的数字,则较大的宽度来自元素的填充/边距/边框,因此您应该开始检查样式规则以查看您为这些属性设置的内容,以及.
另外,请记住,根据您使用的框大小调整方法,元素的总宽度将以不同的方式从这些属性计算出来.例如,如果您设置了Box-sizing：border-Box;和您应用这些样式规则：
div {
width: 500px;
padding: 100px;
border: 5px solid black;
}
你会看到一个像这样的盒子模型图：
请注意,基本宽度数不再是500,因为填充和边框规则现在对宽度有贡献.因此,当您指定宽度时,它将是所有这些属性的总宽度,并且您的基本宽度将只是填充或边框属性未使用的剩余部分.
我希望有所帮助,如果您想进一步澄清任何事情,请告诉我.
