前端开发：CSS盒模型

前言

在前端开发中，CSS的使用是前端开发的“三驾马车”之一，剩余的其他两个是JS和HTML。有关CSS使用设置页面布局的时候，重中之重的就是关于盒模型的理解以及使用，而且CSS是比较抽象的，没有JS那样有很强的逻辑性，需要掌握的内容比较多、比较散，所以就算是入行开发多年的前端工程师也会觉得CSS不好驾驭。本篇博文就来分享一下关于CSS盒模型相关的知识点，方便查阅使用，如有不妥之处还请大家指正。

盒模型概念

关于盒模型的概念，比较专业的官方解释是这样说的：所有HTML元素都可看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型实质上是一个盒子，封装周围的HTML元素，其中包括：margin（外边距）、border（边框）、padding（内边距/填充）和content（实际内容）等四要素。

• margin（外边距） —— 清除边框区域。Margin没有背景颜色，是完全透明的。
• border（边框） —— 边框周围的填充和内容。边框会受到盒子的背景颜色影响的。
• padding（内边距/填充） —— 清除内容周围的区域。同样会受到框中填充的背景颜色影响。
• content（实际内容） —— 盒子的实际内容，用来显示文本和图像等内容。

注意：在盒模型中，外边距