盒模型（IE，W3C）

W3C盒模型

 

IE盒模型

 

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：

ie 盒子模型的 content 部分包含了 border 和 pading。

两者的不同体现在width和height上

IE：width=content+padding+border 

W3C:  width=content

　 　例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，

• 假如用IE模型解释，那么这个盒子

1. 占据的位置：width: 200+40=240, height: 50+40 = 90

• 假如用w3c盒子模型，那么这个盒子

1. 占据的位置：width: 200+20+2+40=262, height: 50+20+2+40=112

 

　　那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？

很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了

 

 

兼容性处理：

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。规定容器元素的最终尺寸计算方式

box-sizing: content-box|border-box|inherit:

content-box: 默认值， 宽度=content+padding+border，设置div的width=100， 就是content的宽度是100，实际宽度，会得到一个比预期大了padding和border的盒子 ==》W3C

border-box: 宽度=content， 设置div的width=100，得到最终宽度为 100的盒子，padding和border都会在这个盒子里减去，实际content为width-padding-border ==> IE