盒子模型(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。