计算真实div盒子的宽度和高度
box-sizing属性
结果为width: 100px; height: 100px;
<style>
.big {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid #000;
}
</style>
<body>
<div class="big"></div>
</body>
普通盒子的宽度和高度=内容区域+padding+border
结果为width: 122px; height: 122px;
<style>
.big {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid #000;
}
</style>
<body>
<div class="big"></div>
</body>