CSS 盒模型
CSS 盒模型是指在网页布局中，每个元素都被看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。了解盒模型对于掌握网页布局和设计非常重要。
内容区域
内容区域是盒子中实际显示内容的部分，它的大小由元素的宽度和高度决定。可以通过设置元素的 width 和 height 属性来控制内容区域的大小。
.box {
width: 200px;
height: 100px;
}内边距
内边距是内容区域与边框之间的空间，可以通过设置 padding 属性来控制。内边距可以分为上、右、下、左四个方向，也可以单独设置某个方向的内边距。
.box {
padding: 10px; /* 上右下左内边距均为10px */
padding-top: 20px; /* 上内边距为20px */
}边框
边框是内容区域和内边距之间的边界，可以通过设置 border 属性来定义。边框可以有不同的样式、宽度和颜色。
.box {
border: 1px solid #000; /* 1px 宽度，黑色实线边框 */
border-radius: 5px; /* 圆角边框 */
}外边距
外边距是盒子与其他元素之间的空间，可以通过设置 margin 属性来控制。外边距也可以分为上、右、下、左四个方向，也可以单独设置某个方向的外边距。
.box {
margin: 10px; /* 上右下左外边距均为10px */
margin-top: 20px; /* 上外边距为20px */
}理解盒模型的概念和属性对于设计网页布局和美化页面至关重要。在实际开发中，灵活运用盒模型的相关属性，可以实现各种各样的布局效果。