盒模型有两种：
① 标准模式
② 怪异模式（quirks 模式）
---------------------------------------------分割线----------------------------------------------
在文件头使用<!DOCTYPE HTML>都会触发标准模式，如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。也可以在css上加入box-sizing:content-box;
box-sizing:content-box---------标准盒模型
例：
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
盒子总宽度/高度=width/height+padding+border+margin
也就是说，如果你设定width为200px，那么文本（内容）所占的宽度就是200px。无论设置border,还是padding都会影响那个盒子的宽度，这样的话会影响其他的位置，一般用于大框架里的小东西。
---------------------------------------------分割线----------------------------------------------
box-sizing:border-box--------怪异盒模型
例：
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
box-sizing:border-box;
}
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
可以说是，你设置width为200px时，那么盒子的宽度就是200px，无论设置border,还是padding都不会影响那个盒子的宽度。
在网页里设置那些大的框架会很好用。
网友评论