HTML和CSS的關(guān)鍵:盒子模型(Box model)

原文：http://jorux.com/archives/property-4-if-you-love-css/

本文作為屬性篇的最后一篇文章, 將講述HTML和CSS的關(guān)鍵—盒子模型(Box model). 理解Box model的關(guān)鍵便是margin和padding屬性, 而正確理解這兩個(gè)屬性也是學(xué)習(xí)用css布局的關(guān)鍵.

注: 為什么不翻譯margin和padding? 原因一, 在漢語(yǔ)中并沒(méi)有與之相對(duì)應(yīng)的詞語(yǔ); 原因二: 即使有這樣的詞語(yǔ), 由于在編寫(xiě)css代碼時(shí), 必須使用margin和padding, 如果我們總用漢語(yǔ)詞語(yǔ)代替其來(lái)解釋的話(huà), 到了實(shí)際應(yīng)用時(shí)容易混淆margin和padding的概念.

如果有一點(diǎn)Html基礎(chǔ)的話(huà), 就應(yīng)該了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果將這些元素細(xì)分, 又可以分別歸為頂級(jí)(top-level)元素,塊級(jí)(block-level)元素和內(nèi)聯(lián)(inline)元素.

1. Block-level element: 指能夠獨(dú)立存在, 一般的塊級(jí)元素之間以換行(如一個(gè)段落結(jié)束后另起一行)分隔. 常用的塊級(jí)元素包括: p, h1~h6, div, ul等;
2. Inline element: 指依附其他塊級(jí)元素存在, 緊接于被聯(lián)元素之間顯示, 而不換行. 常用的內(nèi)聯(lián)元素包括: img, span, li, br等;
3. Top-level element: 包括html, body, frameset, 表現(xiàn)如Block-level element, 屬于高級(jí)塊級(jí)元素.

塊級(jí)元素是構(gòu)成一個(gè)html的主要和關(guān)鍵元素, 而任意一個(gè)塊級(jí)元素均可以用Box model來(lái)解釋說(shuō)明.

Box Model: 任意一個(gè)塊級(jí)元素均由content(內(nèi)容), padding, background(包括背景顏色和圖片), border(邊框), margin五個(gè)部分組成. 立體圖如下(Fig. 1):

該立體圖引自: http://www.hicksdesign.co.uk/  (Under the Creative Commons License)

平面圖如下(Fig. 2):

根據(jù)以上兩圖, 相信大家對(duì)于Box model會(huì)有個(gè)直觀(guān)的認(rèn)識(shí).

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)