本文和大家重點討論一下DIV CSS實例教程中的要點，此文為DIV CSS實例教程，還有DIV CSS實例之常見錯誤及DIV CSS實例初級常見錯誤，希望對你的學(xué)習(xí)有所幫助。

DIV CSS實例教程要點總結(jié)

從事頁面重構(gòu)工作，從局部細(xì)節(jié)到頁面的整合，然后再看整體系統(tǒng)的結(jié)構(gòu)。在各個步驟，都有不同的處理技巧和重構(gòu)的思想方式。此文為DIV CSS實例教程，還有DIV CSS實例之常見錯誤及DIV CSS實例初級常見錯誤，原創(chuàng)總結(jié)了自己犯的一些錯誤，和細(xì)節(jié)處理的問題，以便讓您更靈活的掌握這門技術(shù)，提高制作效率和可用性。認(rèn)真閱讀，我想你會有收獲的。

◆DIV CSS實例教程：文檔類型（DOCTYPES）對瀏覽器影響

定義文檔類型：

1、所有單位屬性必須指明 例如：{font-size:3px; margin:5px;}；（當(dāng)值為0時可不指定單位)
2、影響盒模型，指定寬度和高度的時，要減去Padding，如一個DIV的顯示高度為200，而其Padding為：10px ，則div的Height不能定為200px，而應(yīng)該是：180px;

未定義文檔類型：

1、所有的單位默認(rèn)為px，因此當(dāng)不指定時等價于px,例如margin:5;。 （當(dāng)值為0時可不指定單位)
2、指定寬度和高度的時候，Padding不影響
3、所有IE版本支持統(tǒng)一。

◆DIV CSS實例教程：浮動要點

用更合理的方式對浮動進行控制。

1、IE6下浮動浮動方向和magrin方向一致，且浮動的元素是塊元素時.會引發(fā)雙倍的magrin值~此時應(yīng)用display:inline；可解決浮動驅(qū)動margin的值。我以前應(yīng)用IE6 hack "_"不合理；

2、clear 清除浮動各個適應(yīng)代碼：.clear{clear:both;font-size:1px;width:1px;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0}/*ie and firefox1.5*/；

3、盒模型內(nèi)嵌套浮動，解決高度的自動伸展：
底部加<div class="clear"></div>
IE:height:1%;FF:.runrunrun:after{　/*在pelement這個元素的后邊*/ content: "."　/*寫入一個點*/display:block;/*塊級布局方式*/clear:both;　/*清除左右浮動*/ height:0;visibility:hidden;/*不可見*/ }

◆DIV CSS實例教程：圓角樣式實現(xiàn)幾種方法

頁面最常用的設(shè)計圓角的方式，重要在擴展性和自適應(yīng)性。例子 biaoshi.rar (1.07 KB)
biaoshi.rar (1.07 KB)
獲取附件：runner.web#gmail.com
1、用position: relative; 和position: absolute;用圓角圖片進行絕對定位；在設(shè)置border:1px solid #ccc; 應(yīng)用margin負(fù)值進行定位，如：margin:-1px;
2、應(yīng)用div{border:0 solid #A5DA94;font-size:0;height:1px;margin:0 1px;overflow:hidden;}；更愛maring值，和border-width:進行漸變效果；

◆DIV CSS實例教程：玩轉(zhuǎn)表格

附件:表格的應(yīng)用10例子  web-table.rar (65.93 KB) web-table.rar (65.93 KB)

獲取附件：runner.web#gmail.com
1、根據(jù)需求利用表單各個元素：thead,tfoot,tbody,caption（說明）,col,th,summary(摘要)
2、IE6不支持CSS控制背景變色。#box-table-a tr:hover td(IE6不支持非A的hvoer偽類)

◆DIV CSS實例教程：網(wǎng)頁文字設(shè)置

1、字體全部是E文時，font-family: Arial, Helvetica, sans-serif; 否則特殊符號顯示變形。（需要定義內(nèi)容為英文字體）
2、UTF-8模式下，宋體容易變成亂碼，原因在于編輯器使用時，要注意重新輸入。
3、文章列表在使用“⋅”時，font-family應(yīng)該設(shè)置為宋體（）
4、對字體大小單位的定義為px，有一定的局限性。（從用戶體驗講 用EM***）

◆DIV CSS實例教程：常用瀏覽器HACK

附件:CSS hack瀏覽器兼容一覽表
1、“_property:value” 適應(yīng)IE6一下
2、“*property:value” 適應(yīng)所有IE
3、“*+html div ” 適應(yīng)IE7 ie5

◆DIV CSS實例教程：布局隱藏的技巧

1、使用text-indent的負(fù)值;例如{text-indent:-9999px;} （值不用設(shè)置太大 太大會影響渲染速率）
2、使用display:none,將和模型整體隱藏。不影響其它樣式。
3、超出的部分隱藏;可以設(shè)置{overflow:hidden;}；
4、使用font設(shè)置超小字體，達(dá)到隱藏內(nèi)容的目的，例{font-size:0;}。

◆DIV CSS實例教程：DIV自適應(yīng)布局方法

1、背景的合理應(yīng)用，從視覺達(dá)到自適應(yīng)的目的；
2、自動居中顯示技巧：父級別設(shè)置：text-align:center;字模型設(shè)置：width:*px; margin:0 auto;
3、min-height IE6不支持（其實再IE6中height的值即為最小高度.），需要hack設(shè)置高度。例：_height:*px; IE6超出高度可自動擴展。
 

【編輯推薦】

1. DIV CSS的XHTML代碼結(jié)構(gòu)淺談
2. 解析DIV布局之四大屬性用法
3. Html中DIV和Span的區(qū)別揭秘
4. 使用Div CSS構(gòu)架的三大好處
5. Div CSS實例教程：頁面制作方法全程指導(dǎo)