公司网站制作服务策划咨询
CSS盒模型就像一个快递包裹，网页上的每个元素都可以看成是这样一个包裹，它主要由以下几个部分组成：
- 内容（content）：就像包裹里真正装的东西，比如文字、图片等。在CSS里，可用
width（宽度）和height（高度）来规定内容区的大小。例如，一个<div>元素里放了一些文字，这些文字所在的区域就是内容区。 - 内边距（padding）：相当于包裹里物品和包裹内壁之间的那层缓冲材料，像泡沫、气泡垫等，让物品和包裹边缘有一定距离，防止物品受损。在CSS中，可以用
padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置四个方向的内边距，也可以用padding属性一次性设置。 - 边框（border）：类似于包裹的硬纸盒，把里面的东西和外面隔开。在CSS里，可以设置边框的
width（宽度）、style（样式，如实线、虚线等）和color（颜色）。比如border: 1px solid black;就表示1像素宽的黑色实线边框。 - 外边距（margin）：是包裹与包裹之间的空间，用于控制元素和其他元素之间的距离。同样有
margin-top、margin-right、margin-bottom、margin-left和margin属性，作用和内边距类似。
以下是一个简单的CSS盒模型代码示例及对应的效果展示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>.box {width: 200px;height: 150px;padding: 20px;border: 5px solid blue;margin: 30px;background-color: lightgray;}</style>
</head><body><div class="box">这是一个展示CSS盒模型的示例</div>
</body></html>
在上述代码中，.box类定义了一个盒子，内容区宽200px、高150px，内边距为20px，边框是5px宽的蓝色实线，外边距为30px，背景色为浅灰色。
以下是一个CSS盒模型的示意图：
图中能楚地展示了内容、内边距、边框和外边距在盒模型中的位置和关系。