一,前言
這不是一篇css的入門教程,關(guān)于css的基本特性,請參考：http://baike.liehuo.net/index.php?doc-view-1645
Css的優(yōu)點很多,首先可以使html代碼清晰明了,不會有太多的標(biāo)簽,然后css可以節(jié)省網(wǎng)絡(luò)流量,因為你的css文件只需要下載一次就可以永久使用,以后用戶請求你的網(wǎng)站的時候會直接從本地取css文件,不過這里也存在一個問題,那就是當(dāng)你修改了css文件后,用戶并察覺不到這種改變,需要手動刷新瀏覽器才能看到變化,一個解決辦法就是每次更改css的時候都改一下css的文件名.css還有一個優(yōu)點就是可以靈活控制布局,不像table布局那樣麻煩,只需要簡單的代碼就可以實現(xiàn)流動布局和任意布局.
那css的缺點在哪里呢,不用說,跟JavaScript的兼容性一樣,ie和ff等瀏覽器對這二者的某些元素都有著不同的解釋方法,事實上ff瀏覽器和chrome瀏覽器是遵循的國際標(biāo)準(zhǔn),而ie8雖然也改進了很多,但是大多數(shù)用戶還停留在ie6階段,在這個領(lǐng)域,不能圖省事,在網(wǎng)頁里提示"請用ie8或者ff瀏覽器瀏覽本站"是對用戶的一種極大傷害,本來我們就是為了用戶而存在,如果還要用戶來適應(yīng)我們,那是很不明智的.
二,絕對居中,任意排版?
在css的所有問題中,最讓人頭疼的就是頁面絕對居中問題,因為所有瀏覽器對position和left等屬性的解釋不同,造成在ff瀏覽器里調(diào)通的頁面在ie6里嚴(yán)重變形,其中原理涉及到ie6對塊的解釋和其他瀏覽器不同,這里不詳細解釋,只說解決辦法.
直接上html,這是一段純html代碼,不包含任何布局的元素,標(biāo)準(zhǔn)的html都是這樣編寫的:
下面簡單說明一下這些代碼有何特點,使得能夠兼容所有瀏覽器,絕對居中,而又可以任意布局。
提示：可修改后代碼再運行!
首先注意body標(biāo)簽外邊潛逃的
標(biāo)簽,這個是必須的,也是大家所熟悉的,這段代碼的特殊之處其實在于#head,#nag2,#content標(biāo)簽的css屬性:position,注意: 要再一個層里任意布局一個層,必須外嵌一個position為relative的層 ,在此html頁面中包含三個大的部分,分別是頭部,導(dǎo)航和正文,每個部分都是獨立的,所以都外嵌一個層,然后設(shè)置position為relative,這樣這三個層就會以流動的方式自動布局,而里面得層則可以分別在各自的區(qū)域里面自由布局,自由布局的position要設(shè)置為:absolute,然后分別設(shè)置left和top屬性就可以任意布局了,left和top指的是相對于外邊嵌套的層的位置,而不是相對于整個頁面的位置.
至此其實就解決了所有問題,以后所有的層都寫在外面的嵌套的層里面,這樣寫出來的html不僅清晰明了,而且布局簡單,然后再說一個小問題:
三.Padding問題
在ff和ie里面對有個屬性的解釋也有差別,那就是padding,在ff里padding的意思是向?qū)永锩鎵嚎s指定的像素,而在ie里卻是向外壓縮指定的像素,造成層的表現(xiàn)不一致,而這又是一個非常常用的屬性,那如何解決這個問題呢,正如我在nag2層里所使用的那樣,我在nag2層里嵌套了一個小層,設(shè)置這個層的padding為10像素,然后隱藏這個層的顯示,之后不管這個層是膨脹還是收縮,他的總體積總是變大的,在用戶看來最后的效果都是實現(xiàn)了padding的效果,這是一個非常巧妙的辦法,切實解決了此問題,其實還有一種類似hack的方法,那就是如果是單行的文字,可以通過設(shè)置 line-height來改變文字和層邊界的距離,從而達到padding的效果.當(dāng)時這個方法并不適合多行的情況。
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
