html - 深入了解元素的宽度/高度来自何处

Question

<分区>

Answer 1

元素的宽度会受到多种因素的影响，要准确了解影响因素的最佳方式是首先查看检查器中的“盒模型”选项卡。你应该看到这样的东西:

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

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

此外，请记住，根据您使用的 box-sizing 方法，元素的总宽度将根据这些属性以不同方式计算。例如，如果您设置了 box-sizing: border-box;，然后应用这些样式规则:

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

你会看到像这样的盒子模型图:

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

希望对您有所帮助，如果您需要任何进一步的说明，请告诉我。