html - 了解没有 CSS 的浏览器默认设置如何工作

Question

你能解释一下在有样式和没有样式的情况下如何计算高度和宽度吗？无论有没有造型，我都无法理解这一点。谢谢!

Answer 1

这取决于您如何为该特定元素设置框大小(CSS 属性)。 box-sizing 有两个可能的值:content-box 和 border-box。

内容框使用内容框，您的宽度/高度，应用样式，不包括填充、内容和边框。这意味着如果您有一个宽度为 20px 且左内边距为 10px 的元素，则总宽度将为 30px；

边框框使用边框框，您的宽度/高度包括填充、内容和边框。在上面的示例中，您的总宽度为 20px，因为填充现在包含在宽度中。这允许您在 CSS 中指定更准确的宽度和高度。请注意，边距始终超出您定义的任何宽度/高度。

浏览器默认是 content-box，虽然现在大多数人用:

* { box-sizing: border-box; }