标准盒模型：width+padding+border+margin
ie盒模型：width（contentWidth+padding+border）+margin
box-sizing属性可以指定盒子模型种类
box-sizing兼容性：
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
box-sizing语法：
box-sizing: content-box|border-box|inherit;
box-sizing 默认值：content-box （对应CSS2.1规范中标准的盒子模型计算方式）
inherit :指定box-sizing属性的值，从父元素继承
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style>
*{padding: 0;margin: 0}
div{width: 100%;background: green;margin-top: 40px;color: #fff;text-align: center}
.div1{border: 20px solid #000;}
.div2{border: 20px solid #000;;box-sizing: border-box}
.div3{border: 20px solid #000;padding-left: 100px}
.div4{border: 20px solid #000;padding-left: 100px;box-sizing: border-box}
.div5{height: 60px;}
.div6{border: 20px solid #000;height: 60px;padding-left: 100px;box-sizing: border-box}
.span{height: 50px}
</style>
</head>
<body>
<div class="div1">
一个width 100%+boder的div1，结果出现拖动框
</div>
<div class="div2">
一个width 100%+boder的div2，不过用了box-sizing: border-box，结果没有出现拖动框,
</div>
<div class="div3">
一个width 100%+boder+padding的div3，结果出现拖动框
</div>
<div class="div4">
一个width 100%+boder+padding的div4，不过用了box-sizing: border-box，结果没有出现拖动框,
</div>
<div class="div5">
一个width 100%+高60px的div5
</div>
<div class="div6">
一个width 100%+高60px的div6
</div>
</body>
</html>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)