Chrome瀏覽器box-sizing默認是content-box，content-box就是元素的width和height決定了元素的寬高，這意味着元素的border和padding等不能算在元素的width和height中 ，padding和border的改變不能改變width和height的值。
代碼：
<!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: content-box;
}
</style>
</head>
<body>
<div class="border-box">這是content-box的高度</div>
<div class="border-box">這是content-box的高度</div>
<div class="border-box">這是content-box的高度</div>
</body>
</html>
控制檯元素結構如下：
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
原文地址：https://blog.csdn.net/andynikolas/article/details/79169798