国外浏览器网站/网站优化公司哪家好
主要看这两种盒子模型的优缺点及适用场景
一、区别
盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)；
标准 W3C 盒子模型的 content 部分不包含其他部分。
IE 盒子模型的 content 部分包含了 border 和 padding。(IE 6-用的自家模型，IE6,7 怪异， 8+已经 和W3C 同步了)
区 别:
- IE的 width = border + padding + content（即：宽度固定，增加border或padding会向内挤压content）
- W3C (标准盒子模型）width = content
用代码对比演示一下，就很明显啦！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 100px;height: 100px;padding: 10px;margin: 10px;border: 10px solid peru;background-color: pink;box-sizing: content-box; /* 默认样式，W3C盒子/标准盒子 */}#box2{width: 100px;height: 100px;margin: 10px;padding: 10px;border: 10px solid peru;background-color: skyblue;box-sizing: border-box; /* IE盒子 */}</style></head><body><div id="box">content-box（默认）</div><div id="box2">border-box</div></body>
</html>
二、标准盒子与IE盒子的优劣
标准盒子的好处在于比较符合人定义元素的宽高度，但IE 盒子更适合布局和表单。 有一个场景会比较常见，比如有两个div，各占50% ， 很明显如果设定padding border margin ， 这两个div就不会在一行了。所以IE 盒子更适合布局。目前css3有个属性 box-sizing 可以 设定div 的盒子模型类别。如下：
box-sizing: conteng-box(标准的) | border-box(IE的) | inherit