原文：http://jorux.com/archives/property-4-if-you-love-css/
本文作為屬性篇的最后一篇文章, 將講述HTML和CSS的關(guān)鍵—盒子模型(Box model). 理解Box model的關(guān)鍵便是margin和padding屬性, 而正確理解這兩個屬性也是學(xué)習(xí)用css布局的關(guān)鍵.
注: 為什么不翻譯margin和padding? 原因一, 在漢語中并沒有與之相對應(yīng)的詞語; 原因二: 即使有這樣的詞語, 由于在編寫css代碼時, 必須使用margin和padding, 如果我們總用漢語詞語代替其來解釋的話, 到了實際應(yīng)用時容易混淆margin和padding的概念.
如果有一點Html基礎(chǔ)的話, 就應(yīng)該了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果將這些元素細分, 又可以分別歸為頂級(top-level)元素,塊級(block-level)元素和內(nèi)聯(lián)(inline)元素.

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

塊級元素是構(gòu)成一個html的主要和關(guān)鍵元素, 而任意一個塊級元素均可以用Box model來解釋說明.
Box Model: 任意一個塊級元素均由content(內(nèi)容), padding, background(包括背景顏色和圖片), border(邊框), margin五個部分組成. 立體圖如下(Fig. 1):

該立體圖引自: http://www.hicksdesign.co.uk/ (Under the Creative Commons License)
平面圖如下(Fig. 2):

根據(jù)以上兩圖, 相信大家對于Box model會有個直觀的認識.

最新評論