可以這樣理解嗎？
content-box外盒尺寸受內(nèi)外邊距，邊框，元素尺寸影響
border-box外盒尺寸不受內(nèi)外邊距，邊框，元素尺寸影響。內(nèi)外邊距，邊框，元素尺寸受外盒尺寸影響。
qq_慕用2213857
2019-04-03
2 回答
舉報(bào)
0/150
提交
取消
2019-05-25
我也是像樓主這么理解的，border-box 相當(dāng)于限定了盒子的寬和高，當(dāng)給里面的子元素增加尺寸時(shí)，盒子不會(huì)被撐大，而是里面的子元素會(huì)被縮小以適應(yīng)盒子的大小。
2019-04-10
當(dāng)寫了元素的高或?qū)挄r(shí)，盒子模型計(jì)算：
content-box：外邊距*2+邊框*2+內(nèi)填充*2+內(nèi)容的高或?qū)挘▽懙脑氐母呋驅(qū)挘?/p>
border-box：外邊距*2+寫的元素的高或?qū)挘ㄟ吙?2+內(nèi)填充*2+內(nèi)容的高或?qū)?，這些都已經(jīng)包括在了寫的高或?qū)捴校?/p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型的計(jì)算</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>
效果圖：