border-box和content-box最直觀的區別和解釋【不理解包賠】
阿新 • • 發佈：2019-02-09
chrome瀏覽器預設是content-box，什麼是content-box，我用最簡單的語言解釋給你聽。
content-box就是用元素的width和height覺得元素的高寬，這就意味著元素的padding和border等不能算在width和height中。啥意識？簡潔介紹一下。
- 元素的width和height決定元素的內容，padding和border的改變不能改變width和height的值。
直接上程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset 控制檯元素結構如下圖所示:
border-box就是用元素內容和padding和border一起決定width和height，啥意識，就是width和元素的內容以及padding和border相互制約。下面用幾句話簡潔解釋一下。
- width和height改變，paddign和border不改變時，元素內容的寬高會發生相應的改變，改變的值就是width和height改變的值。
- paddign和border改變，width和height不改變時，元素內容的寬高會發生相應的改變，改變的值就是width和height改變的值。
- 元素內容的寬高等於：元素的寬高 - （ border + padding ）
直接上程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href=""/>
<style type="text/css">
.border-box{
height: 100px;
width: 300px;
padding: 20px;
background: skyblue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="border-box">這是border-box的高度</div>
<div class="border-box">這是border-box的高度</div>
<div class="border-box">這是border-box的高度</div>
</body>
</html>控制檯元素結構如下圖所示:
在實際工作的場景和目的
我更喜歡用border-box，因為border-box更靈活一點，舉個例子，我在業務中遇到一個問題，我的商品詳情頁的一個盒子是高度自適應的，為146px，但是在ie8瀏覽器上顯示為146.8px，如何解決，如果對盒子設定
height:146px;則會出現被撐高的情況，因為box-sizing預設為content-box，你給元素設定寬高，只是給元素內容設定寬高，你元素的總高度是heigtht + border + padding所以就會出現撐高，解決方法就是給當前的盒子設定box-sizing: border-box這樣你設定高度為146px時，會默然將元素內容的高度進行相應減少來保證整體高度為146px，這個最大的好處就是你這個盒子有好幾個，而且有不同的padding和border值，解決這個的最好的方法就是給盒子設定border-box