CSS盒模型是CSS中的一种重要的布局方式，它是由盒子组成的，盒子中包含元素的内容、内边距、边框和外边距。下面我们详细了解一下CSS盒模型的使用方法。
首先我们需要了解一下CSS盒模型包含哪些属性：
.box {
width: 200px;
/* 盒子的宽度 */
height: 200px;
/* 盒子的高度 */
padding: 20px;
/* 内边距 */
border: 1px solid #000;
/* 边框 */
margin: 10px;
/* 外边距 */
}
如上代码所示，包括盒子的宽度、高度、内边距、边框和外边距这五个属性。
下面我们来详细解释一下这些属性的使用方法：
1.盒子的宽度与高度：
用width和height来控制盒子的宽度和高度，例如：
.box {
width: 200px;
height: 200px;
}
这里我们设置盒子宽度和高度都是200px，当然也可以设置百分比的值。
2.盒子内边距：
用padding来控制盒子的内边距，例如：
.box {
padding: 20px;
}
这里我们设置盒子的内边距是20px，也可以对上下左右四个方向分别设置内边距。
3.盒子边框：
用border来设置盒子的边框，例如：
.box {
border: 1px solid #000;
}
这里我们设置盒子的边框为1px的黑色实线，也可以对边框粗细、边框样式和边框颜色进行分别设置。
4.盒子外边距：
用margin来设置盒子的外边距，例如：
.box {
margin: 10px;
}
这里我们设置盒子的外边距是10px，也可以对上下左右四个方向分别设置外边距。
以上就是CSS盒模型的基本使用方法，希望能对大家有所帮助。
