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

Question

你能解释一下带造型和不带造型的高度和宽度是如何计算的吗？我无法理解这一点，不管有没有造型。谢谢!

Answer 1

这取决于如何为该特定元素设置方框大小(CSS属性)。框大小有两个可能的值:内容框和边框。

content ，内容框，您的宽度/高度，应用样式，不包括填充、内容和边框.这意味着，如果元素的宽度为20 of，左填充为10 of，则总宽度为30 of；

带有边框的边框，您的宽度/高度包括填充、内容和边框.在上面的例子中，您的总宽度将是20 as，因为填充现在包含在宽度中。这允许您在CSS中指定更精确的宽度和高度。请注意，边距总是在您定义的任何宽度/高度之外。

浏览器的默认设置是content，尽管现在大多数人使用：

* { box-sizing: border-box; }