概念

CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin

盒模型的分类

标准盒子模型

怪异盒子模型（IE）

两种盒模型的区别

宽度和高度的计算方式不同

标准盒子模型：

实际盒子宽 = margin + border + padding + width （width = content ）
实际盒子高 = margin + border + padding + height （height = content ）

怪异盒子模型：

实际盒子宽 = margin + width（width = border + padding + content ）
实际盒子高 = margin + height（height = border + padding + content ）

如何在CSS 设置这两个模型

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

width:100px; 
height:100px; 
padding:10px; 
/* 设置标准盒子模型 */
box-sizing:content-box;

此时盒子的实际宽高是120px,padding会将宽高撑开，content宽高是100px

如下图：

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

 width: 100px;
 height: 100px;
 padding: 10px;
 /* 设置怪异盒子模型 */
 box-sizing: border-box;

此时盒子的实际宽高是100px,content宽高是80px

如下图：