border-sizing是CSS3的属性之一，其属性值为border-box、content-box
我们正常理解的盒模型其实是border-sizing的属性值是content-box，即正常盒模型，属性值为border-box的盒模型成为怪异盒模型。她们的区别是什么呢，我们看个正常的例子就一目了然了：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.con1{
width: 100px;
height: 100px;
background-color:royalblue;
border:1px solid red;
padding: 10px;
}
.con2{
width: 100px;
height: 100px;
background-color:yellow;
border:1px solid red;
padding: 10px;
box-sizing: border-box;}
</style>
</head>
<body>
<div class="con1"></div>
<div class="con2"></div>
</body>
</html>con1盒子的模型大小为
即整个盒子的大小为width+border*2+padding*2；
而con2的盒子模型为
即100px=border*2+padding*2+内容区，内容区自适应，而设置的的宽度width是整个盒子的大小
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
