正常盒模型
box-sizing:content-box;
怪异盒模型
box-sizing:border-box;
1、怪异盒模型的border和padding是内嵌的,不增加盒模型面积
2、如果内部空间不够,会向外扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怪异盒模型</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: gold;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
#second{
box-sizing: border-box;
}
/* 怪异盒模型的border和padding是内嵌的,不增加盒模型面积
如果内部空间不够,会向外扩展 */
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
</body>
</html>