★文章内容学习来源：拉勾教育大前端就业集训营

一、CSS3 盒模型属性介绍

盒模型属性 具体含义
属性名 box-sizing
作用 指定盒模型（设置如何计算一个元素的总宽度和总高度）
属性值 具体含义
content-box 默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。（在 width 和 height 之外绘制元素的内边距和边框。）
border-box 怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 (为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。)

二、content-box 标准模式

1.介绍
  • Standard 模式：标准模式中；
  • 盒子总体大小为 width(height) + padding + border；
  • 内容区域是 width * height 部分。
2.举例
div {
   
   width: 100px;
   height: 100px;
   padding: 20px;
   border: 10px solid #f00;
   box-sizing: content-box;/*外扩。或者不设置，默认就是这样*/
}

三、border-box 怪异模式

1.介绍
  • Quirks 模式：怪异模式；
  • 盒子总体大小为 width *height；
  • 内容区域自动内减：添加了padding和border后， 内容区域会收缩。
2. 举例
div {
   
   width: 100px;
   height: 100px;
   padding: 20px;
   border: 10px solid #f00;
   box-sizing: border-box;/*内缩，实现盒模型自动内减*/
}

下篇继续：【40】CSS3 （3）——新增常用属性①边框圆角