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

DIV CSS實(shí)例教程要點(diǎn)總結(jié)

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

◆DIV CSS實(shí)例教程：文檔類(lèi)型（DOCTYPES）對(duì)瀏覽器影響

定義文檔類(lèi)型：

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

未定義文檔類(lèi)型：

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

◆DIV CSS實(shí)例教程：浮動(dòng)要點(diǎn)

用更合理的方式對(duì)浮動(dòng)進(jìn)行控制。

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

2、clear 清除浮動(dòng)各個(gè)適應(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)嵌套浮動(dòng)，解決高度的自動(dòng)伸展：
底部加<div class="clear"></div>
IE:height:1%;FF:.runrunrun:after{　/*在pelement這個(gè)元素的后邊*/ content: "."　/*寫(xiě)入一個(gè)點(diǎn)*/display:block;/*塊級(jí)布局方式*/clear:both;　/*清除左右浮動(dòng)*/ height:0;visibility:hidden;/*不可見(jiàn)*/ }

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

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

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

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

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

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

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

◆DIV CSS實(shí)例教程：常用瀏覽器HACK

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

◆DIV CSS實(shí)例教程：布局隱藏的技巧

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

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

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

【編輯推薦】

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