|
原文：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的概念.
如果有一點(diǎn)Html基礎(chǔ)的話, 就應(yīng)該了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果將這些元素細(xì)分, 又可以分別歸為頂級(top-level)元素,塊級(block-level)元素和內(nèi)聯(lián)(inline)元素.
- Block-level element: 指能夠獨(dú)立存在, 一般的塊級元素之間以換行(如一個段落結(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會有個直觀的認(rèn)識.
出處：Jorux Notebook
責(zé)任編輯：moby
上一頁 下一頁 css基礎(chǔ)教程屬性篇之四 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 css基礎(chǔ)教程屬性篇之四 [1]
第 2 頁 
