box-sizing之content-box和border-box

HTML中的盒子模型

当在HTML顶部声明了 doctype后 网页就是标准模式下渲染，
HTML中的块级元素就是一个盒子模型

标准盒模型：box-sizing: content-box

一个标准盒模型所占的空间 = 实际宽高（width/height）+ 内边距（padding）+ 边框（border）+ 外边距（margin）

例如：定义一个宽高为100px的标准盒模型，然后给他加上border、margin和padding
div: {
width: 100; // 盒子的宽
height: 100; // 盒子的高
border: 10px solid green; // 盒子的边框
margin: 10px; // 外边距
padding: 10ox // 内边距
}
此时盒子在页面所占的实际空间为：
宽：100px + 20px(margin) + 20px(border) + 20px(padding) = 160px
高：100px + 20px(margin) + 20px(border) + 20px(padding) = 160px

盒子内容所占区域:
宽：100px
高：100px

怪异盒模型: box-sizing: border-box

一个怪异盒模型所占的空间 = 实际宽高（width/height）+ margin
怪异盒子的padding和border会占据盒子的width/height
例如：定义一个宽高为100px的怪异盒模型，然后给他加上border、margin和padding
div: {
box-sizing: border-box; // 把盒子变为怪异模式
width: 100; // 盒子的宽
height: 100; // 盒子的高
border: 10px solid green; // 盒子的边框
margin: 10px; // 外边距
padding: 10ox // 内边距
}
此时盒子在页面所占的实际空间为：
宽：100px + 20px(margin) = 120px
高：100px + 20px(margin) = 120px

盒子内容所占区域:
宽: 100px - 20px - 20px = 60px
高: 100px - 20px - 20px = 60px

总结

废话这么多，总结两句话（不算上margin外边距）

• 怪异盒子设置padding和border
  盒子不会变大，不会影响布局，盒子总区域不变，盒子内容区域 = 盒子width/height - padding - border
• 标准盒子设置padding和border
  盒子会变大，会影响布局，盒子内容区域不变，盒子总区域 = 盒子width/height + padding + border

最后，有什么不足之处和错误，请各位大佬指出，谢谢！