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