什么是盒模型？

当浏览器对一个页面进行布局的时候，浏览器的渲染引擎会把每个元素看视为一个盒子（box），这个盒子就是盒模型。盒模型是CSS布局的基础，理解盒模型对于理解CSS布局非常重要。

盒模型的四个组成部分

内容区域（content）

以上图为例，中间的黑色矩形就是内容区域，内容区域是盒模型的核心部分，包含了元素的实际内容，比如文本、图片等。

内边距（padding）

上图中黑色矩形和蓝色矩形框之间的白色部分就是padding，内边距是内容区域和边框之间的空间。内边距可以用来增加内容区域和边框之间的距离。

边框（border）

上图中蓝色矩形框就是边框，边框是元素的边界，边框也是有宽度和颜色的。

外边距（margin）

上图中蓝色矩形框和最外层的黑色矩形框之间的透明色部分就是外边距，外边距是元素和其他元素之间的空间。外边距可以用来增加元素之间的距离。

box-sizing对于盒模型的影响

CSS中的box-sizing属性决定了如何计算一个元素的宽度和高度，它有两个取值：content-box和border-box。

content-box

content-box是默认值，表示元素的宽度和高度只包括内容区域，不包括内边距（padding）和边框（border）。也就是说，如果你设置了一个元素的宽度为100px，高度为100px，那么它的实际宽度和高度就是100px，不包括内边距和边框。

计算公式如下：

1 2	元素的实际宽度 = CSS中的width 元素的实际高度 = CSS中的height

看一段CSS代码，因为没有指定box-sizing属性，所以默认是content-box，所以box元素的宽度是100px，高度是100px。

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

border-box

border-box表示元素的宽度和高度包括内容区域、内边距和边框。也就是说，如果你设置了一个元素的宽度为100px，高度为100px，那么它的实际宽度和高度就是100px - padding - border。计算公式如下：

1
2

元素的实际宽度 = CSS中的width - padding-left - padding-right - border-left - border-right
元素的实际高度 = CSS中的height - padding-top - padding-bottom - border-top - border-bottom

看一段CSS代码，你知道如何计算元素的实际宽高吗？

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

根据border-box的计算公式：

box元素的实际宽度 = 100px - 10px * 2 - 5px * 2 = 70px
box元素的实际高度 = 100px - 10px * 2 - 5px * 2 = 70px

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model

Philip

css-basic-box-model