标准盒模型和IE怪异盒模型

野性酷女 2021-10-09 04:14 383阅读 0赞

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式

.box {
        width: 200px;
        height: 200px;
        border: 20px solid black;
        padding: 50px;
        margin: 50px;
    }

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

[![标准模式盒模型][231]][231 1]

标准模式盒模型

在怪异模式下的盒模型如下图所示，**盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，**

盒子总宽度/高度=width/height + margin       =     内容区的宽度/高度 + padding + border + margin;

[![怪异模式盒模型][229]][229 1]

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识，下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box，另一个是border-box。

**当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；**

**当设置为box-sizing:border-box时，将采用怪异模式解析计算；**

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

盒子模型是css中一个重要的概念，其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来理解下两种不同的盒子：

![Image 1][]

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型

![Image 1][]

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

[231]: http://7vik63.com1.z0.glb.clouddn.com/wp-content/uploads/2013/06/2.png?imageView2/2/w/238/h/231
[231 1]: http://7vik63.com1.z0.glb.clouddn.com/wp-content/uploads/2013/06/2.png
[229]: http://7vik63.com1.z0.glb.clouddn.com/wp-content/uploads/2013/06/1.png?imageView2/2/w/247/h/229
[229 1]: http://7vik63.com1.z0.glb.clouddn.com/wp-content/uploads/2013/06/1.png
[Image 1]: