什么是盒子模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。这里的盒子模型主要是指display:block的元素。

如上图所示、盒子模型包括内容、内边距、边框、外边距四部分组成：

1. 内容(Content): 盒子的内容，显示文本和图像；
2. 外边距(Margin): 占据边框外的区域，外边距是透明的。
3. 边框(Border): 围绕在内边距和内容外的边框。
4. 内边距(Padding): 占据内容周围的区域，内边距是透明的。

盒子的宽高

默认情况下：
盒子的高度=内容的高度+上下内边距的高度+上下边框的大小+上下外边距 上图元素的高度为380 盒子的宽度=内容的宽度+左右内边距的宽度+左右边框的大小+左右外边距 上图元素的宽度也是380
为什么强调是默认呢？
因为CSS中有个属性box-sizing，该属性定义了浏览器怎么计算元素的总调度和总高度。默认值为content-box,这时使用上述方式计算高度和宽度。
当box-sizing设置成border-box时：
盒子的高度=内容的高度+上下外边距 上图元素的高度为260 盒子的宽度=内容的宽度+左右外边距 上图元素的宽度也是260
box-sizing曾经还有padding-box,已经弃用 box-sizing浏览器兼容性: 参考网站：
developer.mozilla.org/zh-CN/docs/… blog.csdn.net/qq_29493173…

特殊的盒子：替换元素

常见的替换元素有iframe、video、img等。替换元素加载的是外部内容，并不会受现有的 CSS 属性的影响，但可以通过 CSS 来控制替换元素在盒子中的位置。
参考网站： blog.csdn.net/qq_29493173…

其他备忘知识

1. 上下相邻的元素都设置margin时，中间的margin不是两者之和，而是两者取大的那个值。