今天依然說說網(wǎng)站建設(shè)技術(shù)方面的事情,對于大多從事div+css布局的人來說,margin 0 auto這個(gè)代碼是再熟悉不過了,意思是說讓某個(gè)模塊相對于其上一層的模塊居中一下,很是簡單,當(dāng)然這個(gè)僅是用來確定模塊本身位置的,至于模塊內(nèi)部的東西如果要居中,還要再次設(shè)置一下這個(gè)模塊的text-align屬性為center值。
詳細(xì)的說一下這個(gè)margin 0 auto(注:以下內(nèi)容僅是菜鳥專用,高手請繞過),有四層意思,即margin-top:0px、margin-right:auto、margin-bottom:0px、margin-left:auto,換句話說,即上下為0px,左右側(cè)為自動居中auto,而margin的參數(shù)含義順序?yàn)樯隙、右端、下端、左端,?dāng)要某個(gè)模塊居中時(shí),直接使用margin 0 auto,就是說左右居中,上下不空隔。
啰嗦了這么長的時(shí)間,究想表達(dá)什么呢?網(wǎng)站布局中margin的auto使用不能重復(fù)定義,否則就會產(chǎn)生嚴(yán)重沖突,致使布局雜亂無章。
比如有時(shí)需要設(shè)置某個(gè)模塊上端空個(gè)50px出來,或是下端空一點(diǎn)出來,菜鳥們會這樣寫 margin 0 auto;margin-top:50px,其實(shí)這樣做是非常錯誤的,因?yàn)檫@個(gè)margin 0 auto已經(jīng)包含上端空隙了,反復(fù)定義二次,兩者margin就會有沖突,顯然程序就會亂套,正確的寫法是嚴(yán)格按照先前我講的格式寫,比如這個(gè)模塊上端要空50px,下端要空70px出來,則必須這樣寫:margin 50px auto 70px(三個(gè)參數(shù)),或是margin 50px auto 70px auto(四個(gè)參數(shù)),兩者一樣。
今天表達(dá)的就是這個(gè)意思,但如果覺得麻煩,也可使用padding來實(shí)現(xiàn),比如可以這樣寫:margin 0 auto; padding-top:50px;padding-bottom:70px,當(dāng)然在實(shí)際的網(wǎng)站建設(shè)過程中,要弄清padding的意思,其是內(nèi)部的填充,不是模塊外的填充。