大忙人可以直接看結論
關於box-sizing的值
box-sizing: content-box 盒模型寬/高 = width/height + padding + border
box-sizing: border-box 盒模型寬/高 = width/height
不忙的小夥伴來跟着我一起看看詳細的例子加深印象
代碼如下，結構清晰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>box-sizing</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: block;
width: 150px;
height: 150px;
background-color: red;
}
.box1 {
box-sizing: content-box;
padding: 10px;
}
.box2 {
box-sizing: border-box;
padding: 10px;
}
</style>
</head>
<body>
<img src="img/3.1-1.jpg" alt="box-sizing" class="box">
<img src="img/3.1-1.jpg" alt="box-sizing" class="box box1">
<img src="img/3.1-1.jpg" alt="box-sizing" class="box box2">
</body>
</html>
子元素繼承父元素的寬高150px
box1爲content-box，width/height代表內容的寬高，當有padding、border的時候，內容不會壓縮，盒子看起來是向外擴張了，佔位變化了，盒模型寬/高 = width/height + padding + border
box2爲border-box，width/height代表整個盒子的寬高，盒子已經固定寬高爲150px，當有padding、border的時候，內容往裏壓縮，佔位大小不變。盒模型寬/高 = width/height
讓我們繼續驗證這個結論，若此時將box1和box2再加上border
.box1 {
box-sizing: content-box;
padding: 10px;
border: 10px solid #ccc;
}
.box2 {
box-sizing: border-box;
padding: 10px;
border: 10px solid #ccc;
}
假如我們有2張圖片，需要在一行顯示下，每張圖片佔比50%，該如何實現呢？
如果代碼改成這樣如何？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>box-sizing</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: block;
width: 150px;
height: 150px;
background-color: red;
width: 50%;
float: left;
padding: 5px;
}
</style>
</head>
<body>
<img src="img/3.1-1.jpg" alt="box-sizing" class="box">
<img src="img/3.1-2.jpg" alt="box-sizing" class="box">
</body>
</html>
這裏明明是每個box的寬度是50%，卻因爲padding: 5px導致一行放不下。解決辦法就是如果有邊框，那麼就把內容往裏壓縮一點，這就會用到box-sizing: border-box; 我們來試試
.box {
display: block;
width: 150px;
height: 150px;
background-color: red;
box-sizing: border-box; /*就加上這一行屬性*/
width: 50%;
float: left;
padding: 5px;
}
運行結果
這樣就達到了理想效果
提示: 經常在開發中清除內外邊距的時候也會看到這樣的寫法，結合上面的例子思考一下吧
* {
box-sizing: border-box; /*經常會加上這一句*/
padding: 0;
margin: 0;
}
關注、留言，我們一起學習。
===============Talk is cheap, show me the code================