最近看JJ做那個(gè)什么系統(tǒng)做得很蛋疼，盟主和豬哥的畢業(yè)設(shè)計(jì)也是做網(wǎng)站，樣式一會(huì)兒一個(gè)問(wèn)題。其實(shí)這些問(wèn)題我以前也有遇到，只是現(xiàn)在一般不會(huì)有了，我自有我的一套方法去解決。至于大家是不是這個(gè)方法，我就不清楚了。

在開(kāi)始廢話之前，我建議在做網(wǎng)頁(yè)的時(shí)候，首先把頭、身、腳分出來(lái)，然后輸入一些東西作為占位符。例如所示

 

首先就是居中問(wèn)題，說(shuō)到居中問(wèn)題，我是嚴(yán)重反對(duì)使用text-align:center;的方式居中，因?yàn)檫@樣很有可能把其他內(nèi)容的樣式也給居中了。建議的居中方式是使用margin: 0 auto;同時(shí)配合寬度屬性，這樣就可以實(shí)現(xiàn)居中了。具體效果可以看看下圖。

 

padding和margin的區(qū)別，這兩個(gè)屬性我一直就分不清楚，一直到最近才弄明白。padding是內(nèi)邊距，margin是外邊距，其實(shí)明不明白都不要緊，在使用的時(shí)候分別測(cè)試就知道了。

和margin相關(guān)的屬性一共有5個(gè)，分別是margin，margin-top，margin-right，margin-bottom，margin-left，margin=margin-top + margin-right + margin-bottom + margin-left，請(qǐng)注意順序是上右下左。margin使用時(shí)有3種方法：1、margin : 10px; 表示四個(gè)方向都是10px外邊距；2、margin:10px 30px;表示上/下10px外邊距，右/左30px邊距；3、margin:10px 20px 30px 40px;表示上10px外邊距，右20px外邊距，下30px外邊距，左40px外邊距。這些都是很基礎(chǔ)的了，padding用法完全一樣。效果圖如下所示

 

關(guān)于float，不得不說(shuō)這個(gè)東西是造成布局錯(cuò)位的元兇。IE對(duì)float的解析一直就不同于其他非IE內(nèi)核的瀏覽器，直到IE8才恢復(fù)。

首先解釋下這個(gè)float，就是浮動(dòng)。要知道網(wǎng)頁(yè)中div不可能永遠(yuǎn)都是占一行，很多情況下都是一行中顯示了多個(gè)div，要實(shí)現(xiàn)這個(gè)效果就需要使用到float屬性。在具體說(shuō)這個(gè)東西之前先來(lái)看看IE7 IE8 和谷歌對(duì)這個(gè)屬性的解析，通過(guò)這個(gè)圖，大家就會(huì)明白為什么自己做的網(wǎng)頁(yè)在不同瀏覽器下就是要亂。

 

以前我一直認(rèn)為，只要同級(jí)的上一個(gè)div浮動(dòng)了，那么這個(gè)div就會(huì)自動(dòng)與上一個(gè)div變成同一個(gè)高度（在寬度允許的情況下），但是實(shí)際上這個(gè)是錯(cuò)誤的。要實(shí)現(xiàn)這個(gè)效果呢，需要配合margin屬性，就如圖IE7顯示的例子，正確的寫(xiě)法應(yīng)該是醬紫的。

 

float的使用規(guī)則，假設(shè)同一行需要顯示N個(gè)div，那么第至第N-1個(gè)div都需要設(shè)置float屬性，第N個(gè)div的margin-X（X=float的方向）的大小=前面第1至第N-1個(gè)div的寬度總和，需要注意的是，這些div的父級(jí)div的寬度，不能小于N個(gè)子div的寬度和。當(dāng)吧這個(gè)問(wèn)題弄清楚以后，布局就不是問(wèn)題了。

至于div之間的距離，那么只需要增加margin-X的值即可，例如

 

 可能你會(huì)感到奇怪，在IE7沒(méi)有margin-X的值的時(shí)候，顯示也是正常的，如果我兼容了高版本的瀏覽器，IE7會(huì)不會(huì)亂呢？答案就是不會(huì)亂，不信可以自己嘗試一下。

高度屬性。高度屬性最好不要設(shè)置，其默認(rèn)屬性為自動(dòng)適應(yīng)，可以參考各個(gè)新聞網(wǎng)站的新聞頁(yè)面，不同新聞的內(nèi)容各不相同，但是新聞頁(yè)面的框架都是一樣的，顯示新聞的部分都是自動(dòng)增長(zhǎng)的，為了避免內(nèi)容跑到框外面去，所以高度屬性都是默認(rèn)的自動(dòng)適應(yīng)。

絕對(duì)定位與相對(duì)定位。其實(shí)這個(gè)東西我也不明白，一般來(lái)說(shuō)我都是用的相對(duì)定位，這樣邏輯比較清晰。

div與ul/table。我本人是一般都不用ul，哪怕是菜單欄，能不用table就不用table，除非是100%肯定是列表。因?yàn)槲矣X(jué)得這兩者很容易牽一發(fā)而動(dòng)全身，div則感覺(jué)靈活一些。當(dāng)然這個(gè)就是全看自己了。當(dāng)你把浮動(dòng)的相關(guān)問(wèn)題解決了的時(shí)候，那么布局的大問(wèn)題也就沒(méi)什么了

關(guān)于網(wǎng)頁(yè)開(kāi)發(fā)的建議：盡量不要使用IE，因?yàn)镮E的解析和其他瀏覽器解析有差異的，一般來(lái)說(shuō)其他瀏覽器沒(méi)問(wèn)題，那么IE就沒(méi)問(wèn)題，但是IE沒(méi)問(wèn)題不見(jiàn)得其他瀏覽器沒(méi)問(wèn)題。推薦分別下載谷歌瀏覽器、火狐瀏覽器、opera瀏覽器和蘋(píng)果瀏覽器。