css三个盒子怎么写

我们在使用CSS进行网页布局时，经常用到三个盒子模型，分别为内容盒子（content-box）、边框盒子（border-box）和外边距盒子（margin-box）。那么，这三个盒子分别是怎么写的呢？下面就详细介绍一下。
1. 内容盒子（content-box）
内容盒子是指一个元素的宽度和高度仅仅包括内容的宽度和高度。我们可以使用下面的CSS代码来设置一个元素的内容盒子：

p {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  border: 1px solid black;
} 

其中，“box-sizing: content-box;”表示盒子模型为内容盒子，“width”和“height”分别设置内容盒子的宽度和高度，“border”则设置了边框的样式。
2. 边框盒子（border-box）
边框盒子是指一个元素的宽度和高度包括了内容、边框和内边距。我们可以使用下面的CSS代码来设置一个元素的边框盒子：

p {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
} 

其中，“box-sizing: border-box;”表示盒子模型为边框盒子，“width”和“height”分别设置边框盒子的宽度和高度，“border”设置了边框的样式，“padding”则设置了内边距的宽度。
3. 外边距盒子（margin-box）
外边距盒子是指一个元素的宽度和高度包括了内容、边框、内边距和外边距。我们可以使用下面的CSS代码来设置一个元素的外边距盒子：

p {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
} 

其中，“box-sizing: border-box;”表示盒子模型为外边距盒子，“width”和“height”分别设置外边距盒子的宽度和高度，“border”设置了边框的样式，“padding”设置了内边距的宽度，“margin”则设置了外边距的宽度。
通过上面的介绍，我们可以更好地理解和应用CSS的盒子模型。在实际开发中，要根据具体需求选择不同的盒子模型，以达到更好的布局效果。