今天在调试前端的时候遇到一个奇怪的问题，设置好的属性，移植到新的页面之后，宽高发生了变化，百思不得其解，最后经过耐心的排查，发现是box-sizing属性的问题，记录一下box-sizing的两个属性
border-box: div的宽高包括border的高度
content-box：div的宽高就是div的宽高，border的宽度另算
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style>
.div-border-box{
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: aqua;
border: 20px solid red;
}
.div-content-box{
box-sizing: content-box;
width: 100px;
height: 100px;
background-color: bisque;
border: 20px solid red;
}
</style>
</head>
<body>
<div class="div-content-box">
content-box
</div>
<br>
<br>
<br>
<div class="div-border-box">
border-box
</div>
</body>
</html>
效果图
