資源描述：
《圖解css的padding,margin,border屬性(詳細(xì)介紹及舉例說明)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、2009-03-2204:55圖解CSS的padding,margin,border屬性(詳細(xì)介紹及舉例說明)圖解CSS的padding,margin,border屬性W3C組織建議把所有網(wǎng)頁上的對像都放在一個(gè)盒(box)中，設(shè)計(jì)師可以通過創(chuàng)建定義來控制這個(gè)盒的屬性，這些對像包括段落、列表、標(biāo)題、圖片以及層。盒模型主要定義四個(gè)區(qū)域：內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。對于初學(xué)者，經(jīng)常會(huì)搞不清楚margin，background-color，background-image，padding，co
2、ntent，border之間的層次、關(guān)系和相互影響。這里提供一張盒模型的3D示意圖，希望便于你的理解和記憶。??·margin：層的邊框以外留的空白·background-color：背景顏色·background-image：背景圖片·padding：層的邊框到層的內(nèi)容之間的空白??·border：邊框??·content：內(nèi)容padding、margin兩個(gè)重要屬性的詳細(xì)介紹及舉例說明本文將講述HTML和CSS的關(guān)鍵—盒子模型(Boxmodel).理解Boxmodel的關(guān)鍵便是margin和padding屬性,而正確理解這兩個(gè)屬性也是學(xué)習(xí)用css
3、布局的關(guān)鍵.注:為什么不翻譯margin和padding?原因一,在漢語中并沒有與之相對應(yīng)的詞語;原因二:即使有這樣的詞語,由于在編寫css代碼時(shí),必須使用margin和padding,如果我們總用漢語詞語代替其來解釋的話,到了實(shí)際應(yīng)用時(shí)容易混淆margin和padding的概念.如果有一點(diǎn)Html基礎(chǔ)的話,就應(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-lev
4、elelement:指能夠獨(dú)立存在,一般的塊級(jí)元素之間以換行(如一個(gè)段落結(jié)束后另起一行)分隔.常用的塊級(jí)元素包括:p,h1~h6,div,ul等;2.Inlineelement:指依附其他塊級(jí)元素存在,緊接于被聯(lián)元素之間顯示,而不換行.常用的內(nèi)聯(lián)元素包括:img,span,li,br等;3.Top-levelelement:包括html,body,frameset,表現(xiàn)如Block-levelelement,屬于高級(jí)塊級(jí)元素.塊級(jí)元素是構(gòu)成一個(gè)html的主要和關(guān)鍵元素,而任意一個(gè)塊級(jí)元素均可以用Boxmodel來解釋說明.BoxModel:任意一個(gè)塊
5、級(jí)元素均由content(內(nèi)容),padding,background(包括背景顏色和圖片),border(邊框),margin五個(gè)部分組成.立體圖如下(Fig.1):該立體圖引自:http://www.cncfan.com/url.asp?url=http://www.hicksdesign.co.uk/(UndertheCreativeCommonsLicense)平面圖如下(Fig.2):根據(jù)以上兩圖,相信大家對于Boxmodel會(huì)有個(gè)直觀的認(rèn)識(shí).以下說明margin和padding屬性:1.Margin:包括margin-top,margin
6、-right,margin-bottom,margin-left,控制塊級(jí)元素之間的距離,它們是透明不可見的,對于Fig.2所示的上右下左margin值均為40px,因此代碼為:margin-top:40px;margin-right:40px;margin-bottom:40px;margin-left:40px;根據(jù)上,右,下,左的順時(shí)針規(guī)則,簡寫為margin:40px40px40px40px;為便于記憶,請參考下圖:當(dāng)上下,左右margin值分別一致,可簡寫為:margin:40px40px;前一個(gè)40px代表上下margin值,后一個(gè)40p
7、x代表左右margin值.當(dāng)上下左右margin值均一致,可簡寫為:margin:40px;2.Padding:包括padding-top,padding-right,padding-bottom,padding-left,控制塊級(jí)元素內(nèi)部,content與border之間的距離,其代碼,簡寫請參考margin屬性的寫法.至此,我們已經(jīng)基本了解margin和padding屬性的基本用法.但是,在實(shí)際應(yīng)用中,卻總是發(fā)生一些讓你琢磨不透的事,而它們又或多或少的與margin有關(guān).注:當(dāng)你想讓兩個(gè)元素的content在垂直方向(vertically)分隔時(shí)
8、,既可以選擇padding-top/bottom,也可以選擇margin-top/bottom,再此Joru
