了解浏览器默认如何在没有CSS的情况下工作

Question

你能解释一下有没有造型的高度和宽度怎么计算？ 无论有没有造型，我都无法理解这一点。谢谢！

Answer 1

这取决于如何为该特定元素设置box-sizing（CSS属性）。 Box-sizing有两个可能的值：content-box和border-box。

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

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

浏览器默认为内容框，但现在大多数人都使用以下内容覆盖：

* { box-sizing: border-box; }