DIV CSS實例教程要點總結
本文和大家重點討論一下DIV CSS實例教程中的要點，此文為DIV CSS實例教程，還有DIV CSS實例之常見錯誤及DIV CSS實例初級常見錯誤，希望對你的學習有所幫助。
DIV CSS實例教程要點總結
從事頁面重構工作，從局部細節到頁面的整合，然后再看整體系統的結構。在各個步驟，都有不同的處理技巧和重構的思想方式。此文為DIV CSS實例教程，還有DIV CSS實例之常見錯誤及DIV CSS實例初級常見錯誤，原創總結了自己犯的一些錯誤，和細節處理的問題，以便讓您更靈活的掌握這門技術，提高制作效率和可用性。認真閱讀，我想你會有收獲的。
◆DIV CSS實例教程：文檔類型（DOCTYPES）對瀏覽器影響
定義文檔類型：
1、所有單位屬性必須指明 例如：{font-size:3px; margin:5px;}；（當值為0時可不指定單位)
2、影響盒模型，指定寬度和高度的時，要減去Padding，如一個DIV的顯示高度為200，而其Padding為：10px ，則div的Height不能定為200px，而應該是：180px;
未定義文檔類型：
1、所有的單位默認為px，因此當不指定時等價于px,例如margin:5;。 （當值為0時可不指定單位)
2、指定寬度和高度的時候，Padding不影響
3、所有IE版本支持統一。
◆DIV CSS實例教程：浮動要點
用更合理的方式對浮動進行控制。
1、IE6下浮動浮動方向和magrin方向一致，且浮動的元素是塊元素時.會引發雙倍的magrin值~此時應用display:inline；可解決浮動驅動margin的值。我以前應用IE6 hack "_"不合理；
2、clear 清除浮動各個適應代碼：.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、盒模型內嵌套浮動，解決高度的自動伸展：
底部加<div class="clear"></div>
IE:height:1%;FF:.runrunrun:after{ /*在pelement這個元素的后邊*/ content: "." /*寫入一個點*/display:block;/*塊級布局方式*/clear:both; /*清除左右浮動*/ height:0;visibility:hidden;/*不可見*/ }
◆DIV CSS實例教程：圓角樣式實現幾種方法
頁面最常用的設計圓角的方式，重要在擴展性和自適應性。例子 biaoshi.rar (1.07 KB)
biaoshi.rar (1.07 KB)
獲取附件：runner.web#gmail.com
1、用position: relative; 和position: absolute;用圓角圖片進行絕對定位；在設置border:1px solid #ccc; 應用margin負值進行定位，如：margin:-1px;
2、應用div{border:0 solid #A5DA94;font-size:0;height:1px;margin:0 1px;overflow:hidden;}；更愛maring值，和border-width:進行漸變效果；
◆DIV CSS實例教程：玩轉表格
附件:表格的應用10例子 web-table.rar (65.93 KB) web-table.rar (65.93 KB)
獲取附件：runner.web#gmail.com
1、根據需求利用表單各個元素：thead,tfoot,tbody,caption（說明）,col,th,summary(摘要)
2、IE6不支持CSS控制背景變色。#box-table-a tr:hover td(IE6不支持非A的hvoer偽類)
◆DIV CSS實例教程：網頁文字設置
1、字體全部是E文時，font-family: Arial, Helvetica, sans-serif; 否則特殊符號顯示變形。（需要定義內容為英文字體）
2、UTF-8模式下，宋體容易變成亂碼，原因在于編輯器使用時，要注意重新輸入。
3、文章列表在使用“⋅”時，font-family應該設置為宋體（）
4、對字體大小單位的定義為px，有一定的局限性。（從用戶體驗講 用EM***）
◆DIV CSS實例教程：常用瀏覽器HACK
附件:CSS hack瀏覽器兼容一覽表
1、“_property:value” 適應IE6一下
2、“*property:value” 適應所有IE
3、“*+html div ” 適應IE7 ie5
◆DIV CSS實例教程：布局隱藏的技巧
1、使用text-indent的負值;例如{text-indent:-9999px;} （值不用設置太大 太大會影響渲染速率）
2、使用display:none,將和模型整體隱藏。不影響其它樣式。
3、超出的部分隱藏;可以設置{overflow:hidden;}；
4、使用font設置超小字體，達到隱藏內容的目的，例{font-size:0;}。
◆DIV CSS實例教程：DIV自適應布局方法
1、背景的合理應用，從視覺達到自適應的目的；
2、自動居中顯示技巧：父級別設置：text-align:center;字模型設置：width:*px; margin:0 auto;
3、min-height IE6不支持（其實再IE6中height的值即為最小高度.），需要hack設置高度。例：_height:*px; IE6超出高度可自動擴展。
【編輯推薦】
