盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
网页中的盒子模型；我们常常要控制盒子模型的宽度width:
w3c中的盒子模型的宽:包括margin+border+padding+width;
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
iE中的盒子模型的width:也包括margin+border+padding+width;
上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；
例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释，那么这个盒子模型占用的
宽度为：20*2+10*2+10*2+200=280px;
高度：20*2+10*2+20*2+50=130px;
盒子的实际宽度大小为:10*2+10*2+200=240px;
实际高度：10*2+10*2+50=90px;
用ie的盒子模型解释 ：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;
盒子的实际大小为：宽度:200px, 高度:50px;
我们常常理解的盒子模型是w3c这样的盒子模型
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持："+sBox+"模型");
按照曾顺的测试，ie7中采用的是IE的盒子模型。真的让人搞不懂，为什么微软的IE6都还遵循W3C的盒子模型，而在IE7中却又采用了IE的盒子模型。
后来我查阅了下资料，我用的是vs创建的网页，因此，它会在第一行加上如下的DOCTYPE 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果把这一行注释掉后，那么IE6下就采取的是IE的盒子模型了。也就是说，不管是什么样的IE浏览器还是其它标准的浏览器，都可以在代码前加上DOCTYPE声明而统一的采取W3C的盒子模型。 既然如此，就可以不使用Jquery的boxModel属性来事先判断浏览器的盒子模型了。
CSS3规范定义了一个名为box-sizing的规则，这个规则具有两个值：border-box和content-box，这两个值分别对应着传统模型和W3C模型。现在，Opera和Firefox都支持这一规则，开发者可以根据情况选择不同的盒子模型。在Firefox里，这个属性的语法有些细微的差别：Firefox在这个规则名字的前面加上了–moz-，并且它也支持–moz-box-sizing:padding-box，这个值的意义非常清楚，应该不需要解释。
如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype：
|
1
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法：
|
1
|
<!DOCTYPE html>
|
很简洁，好处显而易见：一、你可以轻松的写下这个doctype，而不用担心会写错；二、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它。
如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！正确的说法应该是没有定义doctype才会开启怪异模式，也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式（标准模式）下渲染页面，而不需要指定某个类型dtd。让我们来回顾一下，所有的浏览器都需要两种模式：怪异模式和严格模式（也有人叫标准模式）。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。关于两种模式，你需要知道以下几点：
注意：你可以根本不需要根据你选择的doctype来验证你的页面，只要doctype标签存在就足以开启严格模式（标准模式）了。如果你对我说的这些还是感到怀疑，那么请前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的内容。我们只需要一小段JavaScript代码就可以得到答案，它就是：
|
1
|
mode
=
document
.
compatMode
;
|
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
