如何理解CSS的盒子模型

当我们在写一个html页面时，页面中的每一个元素都相当于一个盒子。在网页上右键选择“检查”时，我们可以在开发者工具的Element选项中看到页面中有哪些元素，点击某一个元素，可以看到该元素的宽高和背景色等信息，同时下方会展示一个方框套一个方框的盒子，上面标注有尺寸信息，如下图所示。我们在学习盒子模型时首先要了解三个概念：border是盒子的边框，相当于盒子的四个挡板，可以设置颜色（border-color），宽度（border-width），样式（border-style），边框可以用连写模式（border:border-width border-style border-color）；padding是盒子的内边距，相当于盒子的填充物，用于设置盒子的内容和边框之间的距离；margin用于设置盒子之间的距离。