HTML_CSS学习：CSS盒子模型

CSS盒子模型定义了元素如何显示以及与其他元素间的关系。CSS3引入了新的盒子模型，称为box-sizing，允许你指定如何计算一个元素的总宽度和总高度。

CSS盒子模型主要由四个部分组成：

1. 内容（content）
2. 填充（padding）
3. 边框（border）
4. 外边距（margin）

CSS代码示例：

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: content-box; /* 默认值，宽度和高度只包含内容，不包含填充和边框 */
}
 
.box-border-box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* 宽度和高度包含内容、填充和边框，不包含外边距 */
}

HTML代码示例：

<div class="box">内容区域</div>
<div class="box-border-box">内容区域（border-box）</div>

在这个例子中，.box类使用默认的content-box盒子模型，.box-border-box类使用border-box盒子模型。当你设置box-sizing: border-box;时，元素的宽度和高度将包括内容、填充和边框，但不包括外边距。这通常用于创建自适应盒模型，在这种模型中，元素的外边距和内容区域大小不变，而填充和边框的增加不会影响可用空间。