Skip to main content

怪异盒模型

box-sizing属性用于控制元素的盒模型如何计算宽度和高度。它有两个可选的值:content-boxborder-box

  1. content-box(默认值):元素的宽度和高度只包括内容区域,不包括边框和内边距。这意味着如果您设置元素的宽度为100px,那么元素的实际宽度将会是100px + 内边距 + 边框。

  2. border-box:元素的宽度和高度包括内容区域、内边距和边框。这意味着如果您设置元素的宽度为100px,那么元素的实际宽度将会是100px,包括内边距和边框在内。

示例:

/* 使用 content-box */
.element {
width: 100px;
padding: 10px;
border: 1px solid black;
box-sizing: content-box;
}

/* 使用 border-box */
.element {
width: 100px;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}

当您设置box-sizing: border-box;时,元素的总宽度和高度将包括边框和内边距,从而更容易控制元素的大小和布局。这对于开发响应式设计和布局时特别有用,因为您可以更方便地控制元素的盒模型行为。

总结

要注意,如果我们的盒子模型是border-box 当你设置padding 和 margin 的时候,你要意识到这也是盒子模型的一部分,当你增大p和m的时候,盒子会变大的。

我更喜欢border-box 这个更符合直觉