一、盒子模型有哪些内容

CSS中组成一个块级盒子需要

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
• Padding box: 包围在内容区域外部的空白区域，大小通过 padding 相关属性设置
• Border box: 边框盒包裹内容和内边距，大小通过 border 相关属性设置
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过 margin 相关属性设置

二、盒子模型的种类

标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box
padding、border、width、height 一起决定整个盒子的大小。

注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间

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

盒子模型宽度 = (350 + 25 + 25 + 5 + 5) px = 410 px
盒子模型高度 = (150 + 25 + 25 + 5 + 5) px = 210px

IE 盒模型

IE 盒模型别称：怪异盒模型、替代盒模型

你可能会认为盒子大小要加上 border、padding，你的想法是对的！因为这个原因，css 提供了 IE 盒模型
可以通过设置 box-sizing: border-box将盒子变为 IE 盒。
在 IE 模型中，如果你给盒设置 width 和 height，实际设置是 content box + padding box + border box

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

盒子模型宽度 = 350 px
盒子模型高度 = 210 px

如果你希望所有元素都是 IE 盒模型，可以设置 box-sizing 在 html元素上，然后设置其他元素继承该属性

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

参考资料

《什么是盒子模型——mdn》