CSS 框模型(Box Model)

CSS 框模型(Box Model)

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了框模型(Box Model)：

不一樣部分的說明：

• Margin - 清除邊框區域。Margin沒有背景顏色，它是徹底透明

• Border - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響

• Padding - 清除內容周圍的區域。會受到框中填充的背景顏色影響

• Content - 盒子的內容，顯示文本和圖像

摘自：W3CSCHOOL

http://www.w3cschool.cc/css/css-boxmodel.html

-------------------------------------------------------------------------------------------------------------------------------

BoxModule就像一個快遞包裹：

Margin：快遞塑料包裝

Border：快遞紙盒

Padding：紙盒裏緊貼內壁的一層泡沫板

Content：你的東西