html – 到达元素的宽度高度来自[封闭]的底部

概述在Firefox DOM检查器中检查我的 HTML时,我总是看到这一点. 元素的实际宽度(在这种情况下为1170px)与假定选择的规则(750px)不匹配.我发现这可能是由最大宽度规则引起的,但在这种情况下没有最大宽度.我假设有一个媒体查询或某个其他奇怪的规则负责这一点.有没有办法,使用Firefox或Chrome或任何开发控制台来获取在一个地方影响元素宽度/高度的所有规则的摘要？ 元素的宽度可能 在firefox DOM检查器中检查我的 HTML时,我总是看到这一点.

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

解决方法 元素的宽度可能受到各种因素的影响,并且确切地看到对其产生影响的最佳方法是首先查看检查器中的“Box模型”选项卡.你应该看到这样的东西：

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

如果您在此处看到与指定相同的数字,则较大的宽度来自元素的填充/边距/边框,因此您应该开始检查样式规则以查看您为这些属性设置的内容,以及.

另外,请记住,根据您使用的框大小调整方法,元素的总宽度将以不同的方式从这些属性计算出来.例如,如果您设置了Box-sizing：border-Box;和您应用这些样式规则：

div {    wIDth: 500px;    padding: 100px;    border: 5px solID black;}

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

请注意,基本宽度数不再是500,因为填充和边框规则现在对宽度有贡献.因此,当您指定宽度时,它将是所有这些属性的总宽度,并且您的基本宽度将只是填充或边框属性未使用的剩余部分.

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

总结

以上是内存溢出为你收集整理的html – 到达元素的宽度/高度来自[封闭]的底部全部内容，希望文章能够帮你解决html – 到达元素的宽度/高度来自[封闭]的底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。