当我们在写一个html页面时，页面中的每一个元素都相当于一个盒子。在网页上右键选择“检查”时，我们可以在开发者工具的Element选项中看到页面中有哪些元素，点击某一个元素，可以看到该元素的宽高和背景色等信息，同时下方会展示一个方框套一个方框的盒子，上面标注有尺寸信息，如下图所示。我们在学习盒子模型时首先要了解三个概念：border是盒子的边框，相当于盒子的四个挡板，可以设置颜色（border-color），宽度（border-width），样式（border-style），边框可以用连写模式（border:border-width border-style border-color）；padding是盒子的内边距，相当于盒子的填充物，用于设置盒子的内容和边框之间的距离；margin用于设置盒子之间的距离。
操作方法
01
我们通过一个案例来讲解盒子模型，假设有一个宽400px高300px背景颜色是粉色的大盒子，有一个宽200px高140px背景颜色为红色的小盒子，我们在不改变盒子大小的情况下，将小盒子放入大盒子的中心位置，如何实现呢？我们创建一个html页面，在
标签中设置一个div，class取值为big，在div中再嵌套一个div，class取值为small。然后我们在标签中添加