w 3C标准的‘标准盒模型’ 和 在IE下的‘怪异盒模型’。
我们知道无论是哪个模型,一个盒子的 总宽度 = content(内容) + padding + border 。
在html的首部,我们经常会看到一个<!Doctype html>的声明,浏览器根据这个声明来判断这个文件是什么类型的,并根据这来判断怎么解析文件。
1.当我们写了<!Doctype html>的声明的时候,无论在哪种内核的浏览器下盒子模型都会被解析为 标准盒模型。即:
width = content
即我们单独设置的宽度只显示在内容上,比如我设置css样式 width: 100px 这个100px指的就只是content的宽度。
总宽度 = 我们设置的width + padding + border
2.但是当我们没写声明或声明丢失的时候,部分有IE内核的浏览器则会触发怪异模型(IE6,7,8)。(注1)
width = content + padding + border 即宽度为三个加一起的宽度
总宽度 = width
在CSS3中我们可以通过设置 box-sizing的属性来完成标准或者怪异模式之间的切换。
(1)box-sizing : content-box 采用标准模式 也是默认样式
(2)box-sizing: border-box 采用怪异