主要看这两种盒子模型的优缺点及适用场景
一、区别
盒模型: 内容(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