課程
/前端開發
/HTML/CSS
/十天精通CSS3
content-box外盒尺寸受內外邊距，邊框，元素尺寸影響
border-box外盒尺寸不受內外邊距，邊框，元素尺寸影響。內外邊距，邊框，元素尺寸受外盒尺寸影響。
2019-04-03
源自：十天精通CSS3 10-7
正在回答
我也是像樓主這么理解的，border-box 相當于限定了盒子的寬和高，當給里面的子元素增加尺寸時，盒子不會被撐大，而是里面的子元素會被縮小以適應盒子的大小。
當寫了元素的高或寬時，盒子模型計算：
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;
border: 2px solid orange;
</style>
</head>
<body>
<div class="content-box"></div>
<div class="border-box"></div>
</body>
</html>
效果圖：
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
2 回答這樣可以嗎？
2 回答邊框線的大小也對圖片邊框線有影響？可以這樣理解嗎？
1 回答這樣就可以了！
5 回答這樣設置也可以
4 回答請教下練習題可以backround-position : position1,position2,這樣來寫嗎？如果可以，怎么寫啊？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2019-05-25
我也是像樓主這么理解的，border-box 相當于限定了盒子的寬和高，當給里面的子元素增加尺寸時，盒子不會被撐大，而是里面的子元素會被縮小以適應盒子的大小。
2019-04-10
當寫了元素的高或寬時，盒子模型計算：
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>
效果圖：