用box-sizing属性设置盒子模型以及盒子模型的计算

盒子模型分为 w3c 标准盒子模型和 IE 的传统盒子模型（IE6 以下，不包含 IE6 版本或 “QuirksMode 下 IE5.5+”）。

如果添加 文档类型声明，按照标准盒子模型解析，如果没有添加文档类型声明，各浏览器按照自己的方式解析，比如 IE 浏览器用传统盒子模型解析，火狐浏览器用标准盒子模型解析。

box-sizing 可以设置使用哪一种盒子模型，即使用哪种方式解析盒子尺寸。

语法

box-sizing : content-box | border-box;

盒子模型计算

不管哪种盒子模型，都包括 margin 、padding、border、content 这四个元素。

标准盒子模型（content-box）

盒子在页面所占宽度：左外边距+左边框+左内边距+所设置宽度（内容宽度）+右内边距+右边框+右外边距
盒子在页面所占高度：上外边距+上边框+上内边距+所设置宽度（内容高度）+下内边距+下边框+下外边距
所设置的宽度（高度）=内容宽度（高度）

IE 盒子模型（border-box）

盒子在页面所占宽度：左外边距+所设置宽度（左边框+左内边距+内容宽度+右内边距+右边框）+右外边距
盒子在页面所占高度：上外边距+所设置高度（上边框+上内边距+内容高度+下内边距+下边框）+下外边距
所设置的宽度（高度）=内容宽度（高度）+内边距+边框

代码

效果图：

content-box.jpg

border-box.jpg

两个盒子设置的宽和高都是一样的，现在计算一下盒子在页面中所占的宽和高。

• content-box
  width=30px+2px+20px+100px+20px+2px+30px=204px
  height=30px+2px+20px+100px+20px+2px+30px=204px
• border-box
  width=30px+100px=130px
  height=30px+100px=130px
  其中100px=2px+20px+56px+20px+2px。