css中的盒子模型

css中的盒子模型

    css中的盒子模型，有两种，一种是“标准 W3C 盒子模型”，另外一种是IE盒子模型。

 

1.w3c盒子模型

  从图中可以看出：w3c盒子模型的范围包括了：margin，border，padding，content；

  重点：content不包含其他的部分！

  2.IE盒子模型

从上图中我们也可以看到IE盒子模型中也包含了margin，border，padding，content；

重点是：IE盒子模型中：content包含了我们的额border和padding的部分；

 ps：你可以使用jq来检测，代码如下：

var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持："+sBox+"盒子模型");

 那应该选择按个盒子模型呢？

 答案可定是我们的”标准w3c盒子模型“！

 网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，

 而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，

那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

3.css3中的box-sizing

  语法：box-sizing：content-box|border-box|inherit；

  Firefox 支持替代的 -moz-box-sizing 属性

  主流浏览器都支持。

 box-sizing：border-box；你可以理解成IE下的盒子模型，你设置的width是包含了padding和border的值滴呀 

 box-sizing：content-box；你可以理解成w3c的盒子模型。