以上几种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
在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,
盒子总宽度/高度=width/height + margin = 内容区的宽度/高度 + padding + border + margin;
看到这里你应该对盒模型的两种模式有了清晰的认识,下面在此基础上介绍一下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 盒子模型。他们对盒子模型的解释各不相同,先来理解下两种不同的盒子:
从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
ie 盒子模型
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。