資源描述：
《CSS bx盒子模型詳細(xì)解釋(margin,panding的區(qū)別).doc》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、CSSmargin,padding詳解BoxModel詳細(xì)圖解2009年08月13日星期四05:57P.M.AboutBoxModel:一個塊級元素由content,padding,background,border,margin五個部分組成.立體圖1如下:THECSSBOXMODEL:平面圖2如下:根據(jù)以上兩圖,相信大家對于Boxmodel會有個直觀的認(rèn)識.以下說明margin和padding屬性:1.Margin:包括margin-top,margin-right,margin-bottom,margin-left,控制塊級元素之間的距離,它們
2、是透明不可見的,對于2所示的上右下左margin值均為40px,因此代碼為:margin-top:40px;margin-right:40px;margin-bottom:40px;margin-left:40px;根據(jù)上,右,下,左的順時針規(guī)則,簡寫為margin:40px40px40px40px;為便于記憶,請參考下圖3:當(dāng)上下,左右margin值分別一致,可簡寫為:margin:40px40px;前一個40px代表上下margin值,后一個40px代表左右margin值.當(dāng)上下左右margin值均一致,可簡寫為:margin:40px;??2
3、.Padding:包括padding-top,padding-right,padding-bottom,padding-left,控制塊級元素內(nèi)部,content與border之間的距離,其代碼與margin屬性的寫法比較類似.至此,已經(jīng)基本了解margin和padding屬性的基本用法.但是,在實際應(yīng)用中,卻總是發(fā)生一些讓你琢磨不透的事,而它們又或多或少的與margin有關(guān).***************************************************************************************
4、**********注:當(dāng)你想讓兩個元素的content在垂直方向(vertically)分隔時,既可以選擇padding-top/bottom,也可以選擇margin-top/bottom,建議你盡量使用padding-top/bottom來達(dá)到你的目的,這是因為css中存在Collapsingmargins(折疊的margins)的現(xiàn)象.Collapsingmargins:margins折疊現(xiàn)象只存在于臨近或有從屬關(guān)系的元素,垂直方向的margin中.文字說明可能讓人費解,下面用一個例子說明margin-collapsing現(xiàn)象.例:在html
5、文件的
之間寫入如下代碼:
MarginsofID1andID2collapsevertically.
元素ID1與ID2的margins在垂直方向折疊. 在與其外聯(lián)的css文件中寫入:*{padding:0;margin:0;}#ID1{background-color:#333;????//背景色color:#FFF;??????????????????????????//字體色margin-top:10px;margin-bottom:10px
6、;}#ID2{font:normal14px/1.5Verdana,sans-serif;margin-top:30px;margin-bottom:30px;border:1pxsolid#F00;}代碼解釋:1.在html寫入的代碼表示,在html中插入id分別為ID1和ID2的兩個塊級元素div,h1;2.*{padding:0;margin:0;}:使瀏覽器默認(rèn)的元素padding和margin值均歸零;3.#ID1{…}:使id為ID1的元素div的背景顏色為#333,字體顏色為#FFF,margin-top/bottom為10px;4.
7、#ID2{…}:使id為ID2的元素h1的字體大小為14px,verdana字體,行高為字體高的150%,正常粗細(xì).margin-top/bottom為30px,邊框為1px寬,紅色實線.依據(jù)以上解釋,我們應(yīng)該得到如下效果3:即ID1的margin-top/bottom=ab=ef=10px;???ID2的margin-top/bottom=bc=de=30px;但用瀏覽器打開html文件,卻得到Example4的效果,如下圖4:即ab=cd=30px,ID1的margin-top/bottom=10px被折疊了,而且ID1應(yīng)有的margin黑色背
8、景也一同被折疊消失了.為什么會折疊:造成以上現(xiàn)象的原因是,我們在css中并沒有聲明id為ID1的元素div的height(
