两种盒模型？

两种盒模型？
随着的新的css3出现，现在的盒模型类型大致有两种，分别是默认的content-box和border-box通过观察效果来说，content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。默认情况下我们代码中元素的是以content-box作为标准的盒子，元素是哪种盒模型，我们可以使用浏览器的F12 下的布局选项中进行查看。content-box的大小是不包括边框显示的容器,设置大小能够完美地展示出来，border-box被定义了大小无法被改变；为了让大家清楚的了解二者的区别，我新建了一个html页面，制作了两个以不同背景色填充的盒子。为两个盒子分别设置相同px的宽度、内边距和边框。其中一个为border-box盒模型，一个为content-box,我们可以为它们设置边框来区别它们。我再给他们加上10px的像素。效果如下：通过页面效果我们不难发现，border-box的大小没有发生改变，但是content-box，反而得到了边框的属性附加值宽高各加了10px，也就是边框的大小。所以border-box的大小一旦固定不能被附加的边框属性改变大小；content-box会随着边框属性大小而改变。 总结以上数据来说：标准盒模型，简单的说就是margin=》border=》padding =》width/height这样的最终尺寸大小计算方式。标准模式是指，<！DOCTYPE …>声明了标准的协议，这个跟xml知识相关，参考XML与DTD怪异盒模型:box-sizing:border-box;盒子的宽 = width(左右padding+左右border+content)+左右margin盒子的高 = height(上下padding+上下border+content)+上下margin兼容模式这个现行的说法一般来说，双核心浏览器（ie+webkit）为了兼容老的一些ms的active插件做模式，打开这种模式以后会切换到ie内核，正常以webkit内核运行。怪异盒模型一般而言是在ie内核中，没有DTD定义，浏览器会自动促发quirks模式。还有一种定义兼容模式也是在ie6789中特有的兼容视图方式。浏览器本身去以较低的版本去渲染页面，以保证老旧的空间也能正常的运行。具体在菜单里面找找。怪异盒模型本质上跟兼容模式没什么必然性的关联。主要跟DTD有关。可以查阅html4的标准DTD。