css标准盒模型与IE盒模型(怪异盒模型)

一、盒模型基本概念

根据MDN的描述，当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。

1、一个盒子的组成

图1
*内容区域（content area）,尺寸为内容宽度（或称content-box宽度）,内容高度（或称content-box高度）。
这个概念是区分标准盒模型与IE盒模型的关键。
*内边距区域（padding area）,尺寸是 padding-box 宽度 和 _padding-box 高度_。
*边框区域（border area）,尺寸为 border-box  宽度 和 _border-box 高度_。
*外边距区域（margin area）,尺寸为 margin-box 宽度 和 _margin-box 高度_；由于盒之间共享外边距，外边距不容易弄清楚（BFC）。
对于行内元素来说，如果设置了内边距（padding）和边框（border），但其占用空间则由line-height属性决定，即使padding和border会显示在内容周围；此时设置了宽和高无效，外边距margin只有margin-left和margin-right生效。如图2所示

span {
 width: 50px;
 height: 50px;
 background-color: #ffa238;
 padding: 10px;
 border-radius: 10px;
 border: 2px solid #000;
 margin: 10px;
 }

图2

2、标准盒模型
图3
浏览器默认设置，box-sizing: content-box，顾名思义，内容盒子，content的宽高即盒子宽高，不包括padding与border。（这个模型个人不习惯使用，当设置元素宽高为100%的时候，如果元素还包含padding和border，就会溢出。）

3、IE盒模型（怪异模式）
图4

元素css设置 box-sizing: border-box，顾名思义，宽高是以border为边界，盒子宽高包括padding与border。（经常使用）