源自：10-7 CSS3 盒子模型
可以这样理解吗？
content-box外盒尺寸受内外边距，边框，元素尺寸影响
border-box外盒尺寸不受内外边距，边框，元素尺寸影响。内外边距，边框，元素尺寸受外盒尺寸影响。
提问者：qq_慕用2213857
2019-04-03 10:25
个回答
-
- 慕数据3446481
- 2019-05-25 10:22:53
我也是像楼主这么理解的，border-box 相当于限定了盒子的宽和高，当给里面的子元素增加尺寸时，盒子不会被撑大，而是里面的子元素会被缩小以适应盒子的大小。
-
- 桃花魂归何处
- 2019-04-10 13:38:17
当写了元素的高或宽时，盒子模型计算：
content-box：外边距*2+边框*2+内填充*2+内容的高或宽（写的元素的高或宽）；
border-box：外边距*2+写的元素的高或宽（边框*2+内填充*2+内容的高或宽，这些都已经包括在了写的高或宽中）；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型的计算</title>
<style type="text/css">
.content-box{
box-sizing: content-box;
width: 100px;
height: 100px;
margin: 30px;
padding: 20px;
border: 2px solid red;
}
.border-box{
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 30px;
padding: 20px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="border-box"></div>
</body>
</html>
效果图：
