小結一下前端html+css的經驗（一）

1、不要使用太小的圖片作背景平鋪，這就是爲什麼不少人都不用 1px 的緣由，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，須要 200*200=40, 000 次，佔用資源。

2、無邊框，推薦的寫法是 border:none; *border:0px; 由於border:0px; 只是定義邊框寬度爲零，但邊框樣式、顏色仍是會被瀏覽器解析，佔用資源,爲了IE瀏覽器兼容，我一般那麼寫。。

3、慎用 * 通配符，所謂通配符，就是將 CSS 中的全部標籤均初始化，無論用的不用的，過期的先進的，一視同仁，這樣，大大的佔用資源。要有選擇的初始化標籤如reset.css中的ul{margin：0px;padding:0px}，不要用*號，而是寫上一般要reset的標籤。

4、樣式放頭上，腳本放腳下。不內嵌，只外鏈，這是基本的。

5、最好用fireworks處理圖片，好像PS和fireworks區別不是很大，可是圖片多起來就見分曉，參考http://www.th7.cn/Article/pm/fw/201101/20110113222200.html

6、堅定不用 CSS 表達式，css就是css，扯上javascript的expression進來，不但性能影響了，獨立性也不行。

7、使用 引用樣式表，而不是經過 @import 導入，引入樣式表是加載完css才渲染頁面，用戶體驗比較好，不會出現界面初始化紊亂的現象。

8、知道何時用什麼圖片格式，如：png是壓縮比較少的圖片格式，很清晰，但IE6不支持PNG-24,卻徹底支持PNG-8，（若是是不透明的PNG-24,IE6也是完美支持），gif用於要求不高的小圖標，兼容性很好，jpg是壓縮不少的圖片，也是使用最多的……

9、千萬不要在 HTML 中縮放圖片，放大很差看，縮小佔資源。

10、正文字體最好用偶數，12px、14px、16px，效果很是好。特例，15px。

11、block、ul、ol 等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。若是給序列表添加float屬性，記得必定要清楚浮動。能夠是clear:both;也能夠是<br clear=」all」/>注意浮動的兼容性。

12、中文標點用全角。英文夾雜在中文中，左右空格，半角。

13、記得定義全局的globle.css和reset.css。globle定義基本風格，如基本底色、用的比較多的顏色、用的比較多的樣式、寬度等。Reset重置基本標籤的一些屬性。

13、注意超連接點擊事後hover樣式就不出現的問題，被點擊訪問過的超連接樣式再也不具備hover和active樣式了,解決方法是改變CSS屬性的排列順序: L-V-H-A  連接正確順序 a: link; visited; hover; active;

14、IE6浮動標籤的margin雙倍邊距bug問題:加上display:inline解決

15、固定高度自適應，標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度，又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義： div { height:auto!important; height:200px; min-height:200px; }

16、定義1px左右高度的容器，IE6下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：overflow:hidden | zoom:0.08 | line-height:1px

17、怎麼樣才能讓層顯示在FLASH之上呢？解決的辦法是給FLASH設置透明:

<a href="http://www.chinaz.com/">:</a> <pre lang="html" line="1">

       <param name="wmode" value="transparent" />

      

18、怎樣使一個div層居中於瀏覽器中？

div{position:absolute;top:50%; left:50%; margin:-100px 0 0 -100px;width:200px; height:200px; border:1px solid red;}

19、處理文字常常用的：文字自動換行:word-wrap:break-word;       文字強制同一行：white-space: nowrap;     超出行用「…」 text-overflow: ellipsis; 超出範圍隱藏：overflow: hidden;

20、常常用的命名規則 頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制總體佈局寬度：wrapper 左右中：left right center 命名所有使用小寫字母，若是須要多個單詞，單詞間使用「-」分隔，好比user-list

21、display:none;隱藏對象。與 visibility 屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間.visibility:hidden此屬性爲隱藏的對象保留其佔據的物理空間。

22、overflow:hidden;一個比較合理的方法, display:block;/*統一轉化爲塊級元素*/，高度自適應:clear:both;  IE6的雙倍邊距BUG display:inline

23、IE6下圖片下方有空隙產生： 設置img 爲display:block 或者設置vertical-align屬性爲vertical-align:top | bottom |middle |text-bottom

IE6下這兩個層中間怎麼有間隙： .right也一樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;

24、水平居中和垂直居中 ： //注：html代碼前面必定要加上下列w3c聲明，不然沒法居中：

水平居中:div { width:400px; height:400px; margin:0 auto; }

垂直居中: 設置一個和層高度相同的行間距,div { width:400px; height:400px; line-height:400px;}