DIV+CSS網(wǎng)站制作可能遇到的問(wèn)題總結(jié)與解決方式

很多眉山網(wǎng)站制作QQ群里經(jīng)常有人問(wèn)到一些DIV+CSS使用過(guò)程中遇到的一些問(wèn)題,剛接觸的新手朋友肯定會(huì)遇到各種各樣的問(wèn)題,不過(guò)只要留心,記錄下每個(gè)問(wèn)題點(diǎn),一個(gè)個(gè)的解決,就能做出漂亮的網(wǎng)站,因?yàn)楣P者也是從這個(gè)階段過(guò)來(lái)的,筆者花了點(diǎn)時(shí)間,總結(jié)了下,供廣大新手朋友們參考.

1,div的垂直居中問(wèn)題

vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文本，就能垂直居中了,不過(guò)有個(gè)缺點(diǎn),就是要控制內(nèi)容不要換行.。

2,margin double的問(wèn)題    

設(shè)置為float的情況下div在ie瀏覽器里往往margin會(huì)出現(xiàn)加倍的情況.這因該是Ie6都會(huì)有樣的問(wèn)題,這類問(wèn)題的解決方案是在這個(gè)div里面加上display:inline就OK了;  這個(gè)問(wèn)題也是很多網(wǎng)站制作的朋友都會(huì)遇到的問(wèn)題.

3,浮動(dòng)ie產(chǎn)生的2倍間距

#box{ float:left; width:100px; margin:0 0 0 100px; //這種狀況下,往往IE會(huì)產(chǎn)生200px的距離 display:inline; //使浮動(dòng)忽略}  這里細(xì)說(shuō)一下block與inline這兩個(gè)元素：block元素往往會(huì)總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是,和其他元素在同一行上,不可控制(內(nèi)嵌元素);#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的效果 diplay:table。

4,IE與寬度和高度的問(wèn)題

因?yàn)镮E不識(shí)別min，會(huì)把正常的width與height當(dāng)看作有min的狀況來(lái)處理,所以就會(huì)出現(xiàn)問(wèn)題,,只用寬度和高度的情況下，在正常的瀏覽器里面這2個(gè)設(shè)置的值就不會(huì)變，如果只用min-width和min-height的話，在IE瀏覽器來(lái)看,相當(dāng)于沒(méi)有設(shè)置寬度和高度，比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的.

5,頁(yè)面的最小寬度

min -width是個(gè)非常方便的CSS命令，用它能夠指定元素最小的寬度，這樣就能保證排版準(zhǔn)確不會(huì)出現(xiàn)異常.不過(guò)IE不認(rèn)得這個(gè)，而它實(shí)際上把width當(dāng)做最小寬度來(lái)用,為了讓這一命令在IE上也能用，可以把一個(gè)