盒子模型
一、提出问题
- 什么是盒子模型？
- 盒子模型的两种计算方式是什么？
- 块级元素和行内元素使用盒子模型的注意事项。
二、什么是盒子模型？
盒子模型就是浏览器看待元素的方式。当我们打开浏览器查看元素时，会显示如下图所示的盒子模型：
三、盒子模型的两种计算方式是什么？
盒子模型有两种计算方式，区别在于盒子的 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 发生折叠如下图所示：
如何避免？
- 给父元素设置 border 和 padding
- 父元素的 overflow：hidden
4.2 行内元素盒子模型的注意事项
使用行内元素时，其高度可以由 line-height 来设置或者由内容区来撑开。
行内元素之间的外边距不会发生折叠。
