今天在調(diào)試前端的時(shí)候遇到一個(gè)奇怪的問(wèn)題，設(shè)置好的屬性豪娜，移植到新的頁(yè)面之后餐胀，寬高發(fā)生了變化，百思不得其解瘤载，最后經(jīng)過(guò)耐心的排查否灾，發(fā)現(xiàn)是box-sizing屬性的問(wèn)題，記錄一下box-sizing的兩個(gè)屬性
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>
效果圖
