CSS盒模

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>