一文搞懂 CSS 盒子模型：概念、种类、布局方式、边距塌陷全都在这里了

CSS盒子模型是CSS的核心特性之一，它定义了如何显示网页元素，包括它们的大小、位置以及边框等。

CSS盒子模型主要有两种：标准模型和IE模型。

1. 标准模型的宽度和高度只包含内容区域，不包含边距、边框和填充。盒子的总宽度计算公式是：宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。其高度同理计算。
2. IE模型的宽度和高度包含内容区域、内边距和边框，不包括外边距。盒子的总宽度计算公式是：宽度 = 内容宽度 + 左右内边距 + 左右边框。其高度同理计算。

在CSS中，可以通过box-sizing属性来指定使用哪种盒子模型。

/* 使用标准盒子模型 */
div {
  box-sizing: content-box;
  width: 300px;
  padding: 10px;
  border: 5px solid;
  margin: 20px;
}
 
/* 使用IE盒子模型 */
div {
  box-sizing: border-box;
  width: 300px;
  padding: 10px;
  border: 5px solid;
  margin: 20px;
}

CSS3中的Flexbox和Grid布局提供了更现代的盒子模型布局方式，它们能够提供强大的布局能力，包括方向、对齐和分布空间。

/* Flexbox布局 */
.container {
  display: flex;
  flex-direction: row; /* 设置主轴方向 */
  justify-content: flex-start; /* 设置项目在主轴上的对齐方式 */
  align-items: center; /* 设置项目在交叉轴上的对齐方式 */
}
 
/* Grid布局 */
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 定义网格的列和行大小 */
  grid-gap: 10px; /* 设置网格之间的间隙 */
}

CSS盒子模型是CSS布局的基础，理解并掌握它对于网页布局是至关重要的。