盒子模型是什麼？
阿新 • • 發佈：2020-07-27
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px; height: 30px; margin: 10px; padding: 20px; border: 5px solid chocolate; } </style>
</head>
<body>
<div class="box">
content
</div></body>
</html>
#### 1. 盒子模型包括 `外間距-邊框-內間距-內容` 4個部分。開啟瀏覽器F12檢視, 可以清晰的看到盒子的外邊距-邊框-內邊距和最後的內容構造，這就是整個盒子模型  #### 2. 常見的盒子模型又兩種,可以通過box-sizing進行設定 1. `border-box` (IE盒子模型) 2. `content-box` (W3C標準盒子模型) - 現在我們新增屬性`box-sizing:border-box`,可以明顯的看到我們定義的寬度`width(100px) = content(50px) + padding(40px) + border(10px)`， 那麼盒子的寬度就是`width(100px) + margin(20px) = 120px`  - 修改`box-sizing: content-box`,可以看到`width(100px) = content(100px)`， 那麼盒子的寬度就是`width(100px) + padding(40px) + border(10px) + margin(20px) = 170px`  #### 3. 外邊距的問題 > 相鄰的兩個元素之間的間距，取最大
<style>
.box2{
width: 50px;
height: 10px;
margin: 20px;
padding: 30px;
border: 10px solid seagreen;}
</style>
<div class="box">
content</div>
<div class="box2">
content2</div>
- 這裡我們可以看到兩個盒子相鄰的外邊距，是最大的box2的外邊距  #### 4. 由於ie的怪異盒子模型，導致的瀏覽器顯示不一致的解決辦法 > 相信大家不難發現，相比較border而言，我們的關鍵問題在於padding(border較少),那麼最佳的解決方案，就是能用margin，就不用padding。 > 但是有些情況，不是說不用padding就能解決的。那怎麼辦呢？這裡我們能發現，所有的一切都是因為width 和padding/border 同時使用造成的。 > 那麼最終的解決方案就出來了。 > 可以在盒子內出定義一個無width的盒子，將padding 和boder 賦值到整個盒子上，外面的盒子。我們只給width和margin就可以了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
margin: 20px;
}
.content{
padding: 20px;
border: 5px solid chocolate;
}
</style></head>
<body>
<div class="box">
<div class="content">
content
</div>
</div></body>
</html>
- 可以看到，我們裡面的盒子雖然沒有設定寬度，但是經過外面的盒子包裹，已經有200px的寬度了。正式外層盒子的寬度，但是同時又有padding 和border ，這樣就可以完美的解決怪異盒子的問題。
