盒子模型（BOX MODEL）初體驗
阿新 • • 發佈：2019-02-20
寫在前面： 小拾是web的初學者，所寫僅為自己學習的內容與見解，若有錯誤盡情諒解。
盒子模型（Box model）
顧名思義，盒子模型就是形似盒子的表現形式，個人認為，相比於盒子，相框更能形象地表達這個模型，或者說，大盒套小盒也是非常形象的。具體可由下圖表示：
盒子的主要屬性：
width、height、margin、border、padding是盒子模型常用的屬性。
- margin：外邊框。這是盒子的“外殼”，也就是盒子的最外層，也就是掛有相框的牆。
- border：邊框。這是盒子的第二層（這是由外而內看的），也就是相框的框。
- padding：內邊框。這是盒子的最後一層，也就是相框的框與照片之間的部分。
- width和height：相信這兩個屬性是web學習這經常接觸到的屬性，width就是盒子內容(照片）的寬度而height就是高度。
ps：值得注意的是，這裡的width和height有兩種定義
標準盒子：這是標準的w3c盒子，width和height分別表示Content的寬和高；
IE盒子：與標準盒子不同的是，IE盒子的width和height表示的是Padding的寬和高。
樣例解析：
<html lang="en"> <head> <title>BOX</title> <style> div { width: 100px; height: 10px; border: 1px solid red; padding: 70px 20px; margin: 30px; text-align: center; } </style> </head> <body> <div>可愛的盒子</div> </body> </html>
這段程式碼在瀏覽器的顯示如下：
如果想要給盒子加上顏色，可在div中加上如下程式碼
background-color:#b3d4fc;這樣盒子就多了顏色
注意，background-color新增的顏色是padding和content上的。
另外，border邊框是可以拆分的，四個方向分別對應border-top,border-bottom,border-left,border-right。