CSS中组成一个块级盒子需要(标准盒模型):

1. Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
2. Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
3. Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
4. Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。 margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

替代盒模型

.box { 
  box-sizing: border-box; 
}

全部是替代模型

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。