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是整个盒子的大小