盒子模型

一、提出问题

1. 什么是盒子模型？
2. 盒子模型的两种计算方式是什么？
3. 块级元素和行内元素使用盒子模型的注意事项。

二、什么是盒子模型？

盒子模型就是浏览器看待元素的方式。当我们打开浏览器查看元素时，会显示如下图所示的盒子模型：

三、盒子模型的两种计算方式是什么？

盒子模型有两种计算方式，区别在于盒子的 width 和 height 的值是怎么计算得到的。可以通过 CSS 的 box-sizing 来控制盒子模型的计算方式。

3.1 box-sizng: content-box

当 box-sizing: content-box；时，我们设置元素的 widht 和 height 实际上就是盒子模型中内容区的width 和 height。此时，盒子的 width = width(内容区) + padding + border，盒子的 height 计算方法同样是如此。具体计算入下图所示：

3.2 box-sizing: border-box

当 box-sizing: border-box;时，此时设置元素的 width 和 height 即为设置盒子的 width 和 height。此时盒子模型的计算方式如下图所示：

四、块级元素和行内元素盒子模型的注意事项

4.1 块级元素的盒子模型注意事项

（1）块级元素相邻时：

块级元素在垂直方向上造成外边距的重叠，即两块级元素之间的外边距以较大外边距的值为准。

（2）块级元素嵌套时：

当一个块级元素中包含另一个块级元素时，如果此时父元素没有设置 border 和 padding，那么父元素上下的 margin 和子元素上下的 margin 会发生折叠，以大的值为最终父元素的 margin 值。子元素和父元素上边的 margin 发生折叠如下图所示：

如何避免？

1. 给父元素设置 border 和 padding
2. 父元素的 overflow：hidden

4.2 行内元素盒子模型的注意事项

使用行内元素时，其高度可以由 line-height 来设置或者由内容区来撑开。
行内元素之间的外边距不会发生折叠。