CSS書寫順序
*{
/*顯示屬性*/
display
position
float
clear
cursor
…

/*盒模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字*/
color
font
content

/*邊框背景 為什么要把 boder和background放在最后的原因是修改的頻率會較之前的頻繁，放在最后查看起來方便，哈哈。*/
border
background
}
下表順序為從上到下，從左到右：
========================

display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor

CSS命名規(guī)則：
一．文件命名規(guī)范
全局樣式：global.css；
框架布局：layout.css；
字體樣式：font.css；
鏈接樣式：link.css；
打印樣式：print.css；
主要的 master.css
專欄 columns.css
主題 themes.css
主要的 master.css
模塊 module.css
基本共用 base.css
表單 forms.css
補丁 mend.css
二．頁面結(jié)構(gòu)
容 器: container
頁 頭：header
內(nèi) 容：content
頁面主體：main
頁 尾：footer
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
三．導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
摘要: summary
四．功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區(qū)：shop
標題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務(wù)：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright

Container div
#container
容器
Layout
#layout
布局
Header or banner div
#head, #header
頁頭部分
Footer div
#foot, #footer
頁腳部分
Navigation list
#nav
主導(dǎo)航
Sub-navigation list
#subNav
二級導(dǎo)航
Menu
#menu
菜單
Sub Menu
#submenu
子菜單
Left or right side columns
#sidebar_a, #sidebar_b
左邊欄或右邊欄
Main div
#main
頁面主體
Tag
#tag
標簽
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情連接
Title
#title
標題
Summary
#summary
摘要
Search input
#searchInput
搜索輸入框
Search output
#search_output
搜索輸出和搜索結(jié)果相似
Search
#search
搜索
Search bar
#searchBar
搜索條
Search results
#search_results
搜索結(jié)果
Copyright information
#copyright
版權(quán)信息
brand
#branding
商標
branding-logo
#logo
LOGO
Site information
#siteinfo
網(wǎng)站信息
Copyright information etc.
#siteinfoLegal
法律聲明
Designer or other credits
#siteinfoCredits
信譽
Join us
#joinus
加入我們
Partnership opportunities
#partner
合作伙伴
Services
#service
服務(wù)
Regsiter
#regsiter
注冊
Arrow
arr/arrow
箭頭
Little
#little
標題
Website map
#sitemap
網(wǎng)站地圖
List
#list
列表
Home page
#homepage
首頁
Sub page
subpage
二級頁面子頁面
Toolbar
#tool, #toolbar
工具條
Next pulls
#drop
下拉
Next pulls menu
#dorpmenu
下拉菜單
Status
#status
狀態(tài)
Container div
#container
容器
Header or banner div
#header
頁頭部分
Main or global navigation div
#mainNav
主導(dǎo)航
Menu
#menu
菜單
Sub Menu
#submenu
子菜單
Left or right side columns
#sidebarA, #sidebarB
左邊欄或右邊欄
Main div
#main
頁面主體
Content div
#content
內(nèi)容部分
The main content area
#contentMain
主要內(nèi)容區(qū)域
Footer div
#footer
頁腳部分
Tag
#tag
標簽
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情連接
Title
#title
標題
Summary
#summary
摘要
Sub-navigation list
#subNav
二級導(dǎo)航
Search input
#searchInput
搜索輸入框
Search output
#searchOutput
搜索輸出和搜索結(jié)果相似
Search
#search
搜索
Search results
#searchResults
搜索結(jié)果
Copyright information
#copyright
版權(quán)信息
brand
#branding
商標
branding-logo
#brandingLogo
LOGO
Site information
#siteinfo
網(wǎng)站信息
Copyright information etc.
#siteinfoLegal
法律聲明
Designer or other credits
#siteinfoCredits
信譽
Join us
#joinus
加入我們
Partnership opportunities
#partner
合作伙伴
Services
#service
服務(wù)
Regsiter
#regsiter
注冊
Status
#status
狀態(tài)
Products
.products
產(chǎn)品
Products prices
.productsPrices
產(chǎn)品價格
Products description
.productsDescription
產(chǎn)品描述
Products review
.productsReview
產(chǎn)品評論
Editor’s review
.editorReview
編輯評論
New release
.newsRelease
最新產(chǎn)品
Publisher
.publisher
生產(chǎn)商
Screen shot
.screenshot
縮略圖
FAQ
.faqs
常見問題
Keyword
.keyword
關(guān)鍵詞
Blog
.blog
博客
Forum
.forum
論壇

五class的命名:
(1)顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用“font+字體大小“作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄樣式,使用“類別+功能“的方式命名,如
.barnews { }
.barproduct { }

XHTML-CSS寫作建議
1. 所有的xhtml代碼小寫
2. 屬性的值一定要用雙引號(“”)括起來，且一定要有值
3. 每個標簽都要有開始和結(jié)束，且要有正確的層次
4. 空元素要有結(jié)束的tag或于開始的tag后加上“/”
5. 表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等
6. <h1>到<h5>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7. 給每一個表格和表單加上一個唯一的、結(jié)構(gòu)標記id
8. 給重要的區(qū)塊加上注釋,如：
9. 給圖片加上alt標簽
10. 所有的標簽必須進行合理的嵌套
11. 根元素前必須有元素，宣告使用那一種DTD
12. 根元素必須有xmlns屬性來指定使用http://www.w3.org/1999/xhtml的namespace
一. 常規(guī)書寫規(guī)范及方法
1. 選擇DOCTYPE：
XHTML 1.0 提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現(xiàn)層的標識和屬性，例如<br>。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):專門針對框架頁面設(shè)計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情況當(dāng)然是嚴格的DTD，但對于我們大多數(shù)剛接觸web標準的設(shè)計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現(xiàn)層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
2. 指定語言及字符集：
為文檔指定語言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：
常用的語言定義：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
標準的XML文檔語言定義：
<?xml version=”1.0″ encoding=” utf-8″?>
針對老版本的瀏覽器的語言定義：
<meta http-equiv=”Content-Language” content=” utf-8″ />
為提高字符集，建議采用“utf-8”。
3. 調(diào)用樣式表：
外部樣式表調(diào)用：
頁面內(nèi)嵌法：就是將樣式表直接寫在頁面代碼的head區(qū)。 如：
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部調(diào)用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區(qū)用類似以下代碼調(diào)用。
<link rel=”stylesheet” rev=”stylesheet” href=style.css” type=”text/css” media=”all” />
在符合web標準的設(shè)計中，推薦使用外部調(diào)用法，可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調(diào)用同一個樣式表文件，那么改一個樣式表文件，可以改變所有文件的樣式。
4、選用恰當(dāng)?shù)脑兀?
根據(jù)文檔的結(jié)構(gòu)來選擇HTML元素，而不是根據(jù)HTML元素的樣式來選擇。例如，使用P元素來包含文字段落，而不是為了換行。如果在創(chuàng)建文檔時找不到適當(dāng)?shù)脑兀瑒t可以考慮使用通用的div 或者是span；
避免過渡使用div和span。少量、適當(dāng)?shù)氖褂胐iv和span元素可以使文檔的結(jié)構(gòu)更加清晰合理并且易于使用樣式；
盡可能少地使用標簽和結(jié)構(gòu)嵌套，這樣不但可以使文檔結(jié)構(gòu)清晰，同時也可以保持文件的小巧，在提高用戶下載速度的同時，也易于瀏覽器對文檔的解釋及呈視；
5、派生選擇器：
可以使用派生選擇器給一個元素里的子元素定義樣式，在簡化命名的同時也使結(jié)構(gòu)更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.gif;)}
6、輔助圖片用背影圖處理：
這里的”輔助圖片”是指那些不是作為頁面要表達的內(nèi)容的一部分，而僅僅用于修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動頁面的情況下通過CSS樣式來進行改動，如： #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、結(jié)構(gòu)與樣式分離：
在頁面里只寫入文檔的結(jié)構(gòu)，而將樣式寫于css文件中，通過外部調(diào)用CSS樣式表來實現(xiàn)結(jié)構(gòu)與樣式的分離。
8、文檔的結(jié)構(gòu)化書寫：
頁面CSS文檔都應(yīng)采用結(jié)構(gòu)化的書寫方式，邏輯清晰易于閱讀。如：
<div id=”mainMenu”>
<ul>
<li><a href=SPAN>”#” >首頁</a></li>
<li><a href=SPAN>”#” >介紹</a></li>
<li><a href=SPAN>”#” >服務(wù)</a></li>
</ul>
</div>

/*=====主導(dǎo)航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主導(dǎo)航結(jié)束=====*/
9、鼠標手勢：
在XHTML標準中，hand只被IE識別，當(dāng)需要將鼠標手勢轉(zhuǎn)換為“手形”時，則將“hand”換為“pointer”，即“cursor:pointer;”
10．注釋書寫規(guī)范
1、行間注釋：
直接寫于屬性值后面，如：
.search{
border:1px solid #fff;/*定義搜索輸入框邊框*/
background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
}
2、整段注釋：
分別在開始及結(jié)束地方加入注釋，如：
/*=====搜索條=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索條結(jié)束=====*/
3．協(xié)助注釋
非作者維護時所加入的表示修改時間、修改人等標識信息。
在區(qū)域注釋或單行注釋的基礎(chǔ)上加上修改人和修改時間等信息。
例(區(qū)域注釋)：
<!--==S 注釋內(nèi)容[修改人和修改時間]-->
<div>
...
</div>
<!--==E 注釋內(nèi)容[修改人和修改時間]-->
/*=S 注釋內(nèi)容[修改人和修改時間]*/
.class{
...
}
.class{
...
}
/*=E 注釋內(nèi)容[修改人和修改時間]*/
例(單行注釋)：
<div>
<!-- 注釋內(nèi)容[修改人和修改時間]-->
...
</div>
.class{
/*注釋內(nèi)容[修改人和修改時間]*/
...
}
11．樣式屬性代碼縮寫
1、不同類有相同屬性及屬性值的縮寫：
對于兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應(yīng)對其加以合并縮寫，特別是當(dāng)有多個不同的類而有相同的屬性及屬性值時，合并縮寫可以減少代碼量并易于控制。如：
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
兩個不同類的屬性值有重復(fù)之處，剛可以縮寫為：
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同一屬性的縮寫：
同一屬性根據(jù)它的屬性值也可以進行簡寫，如：
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、內(nèi)外側(cè)邊框的縮寫：
在CSS中關(guān)于內(nèi)外側(cè)邊框的距離是按照上、右、下、左的順序來排列的，當(dāng)這四個屬性值不同時也可直接縮寫，如：
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
則可縮寫為：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

而如果當(dāng)上邊與下邊、左邊與右邊的邊框?qū)傩灾迪嗤瑫r，則屬性值可以直接縮寫為兩個，如： .btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}

縮寫為： .btn {margin:10px 5px;}
而當(dāng)上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如：
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
縮寫為：
.btn{margin:10px;}
4、顏色值的縮寫：
當(dāng)RGB三個顏色值數(shù)值相同時，可縮寫顏色值代碼。如：
.menu { color:#ff3333;}
可縮寫為:
.menu {color:#f33;}
12．hack書寫規(guī)范
因為不同瀏覽器對W3C標準的支持不一樣，各個瀏覽器對于頁面的解釋呈視也不盡相同，比如IE在很多情況下就與FF存在3px的差距，對于這些差異性，就需要利用css 的hack來進行調(diào)整，當(dāng)然在沒有必要的情況下，最好不要寫hack來進行調(diào)整，避免因為hack而導(dǎo)致頁面出現(xiàn)問題。
1、 IE6、IE7、Firefox之間的兼容寫法：
寫法一：
IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;
根據(jù)上述表達，同一類/ID下的CSS hack可寫為：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*僅IE7*/
*background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序為：FF、IE7、IE6.
寫法二：
IE6可識別“_”，而IE7及FF皆不能識別，所以當(dāng)只針對IE6與IE7及FF之間的區(qū)別時，可這樣書寫：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*僅IE6可識別*/
}
寫法三：
*+html 與 *html 是IE特有的標簽, Firefox 暫不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*僅IE6*/
*+html .searchInput {background-color:#555;}/*僅IE7*/
屏蔽IE瀏覽器：
select是選擇符，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨有的。
*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
IE6可識別：
這里主要是通過CSS注釋分開一個屬性與值，注釋在冒號前。
select { display /*IE6不識別*/:none;}
IE的if條件hack寫法：
所有的IE可識別：
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以識別:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包換IE5.5都可以識別:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
僅IE6可識別:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可識別:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
僅IE7可識別:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
13、清除浮動：
在Firefox中，當(dāng)子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

注意事項:
1. id和class命名采用該版塊的英文單詞或組合命名，并第一個單詞小寫，第二個單詞首個字母大寫，如:newRelease（最新產(chǎn)品/new+Release)
常用類的命名應(yīng)盡量以常見英文單詞為準，做到通俗易懂，并在適當(dāng)?shù)牡胤郊右宰⑨?。對于二級?ID命名，則采用組合書寫的模式，后一個單詞的首字母應(yīng)大寫：諸如“搜索框”則應(yīng)命名為“searchInput”、“搜索圖標”命名這“searchIcon”、“搜索按鈕”命名為 “searchBtn”……
2. CSS樣式表各區(qū)塊用注釋說明
3. 盡量使用英文命名原則
4. 不用加中杠和下劃線
5. 盡量不縮寫，除非一看就明白的單詞
6．檢查HTML元素是否有拼寫錯誤、是否忘記結(jié)束標記
即使是老手也經(jīng)常會弄錯div的嵌套關(guān)系。可以用dreamweaver的驗證功能檢查一下有無錯誤。
7. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結(jié)尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。
8. 確定錯誤發(fā)生的位置
如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復(fù)正常，即可確定錯誤發(fā)生的位置。
9. 利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。
10. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
11. float元素務(wù)必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內(nèi)容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
12. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性（可以在float元素內(nèi)部嵌套一個div來設(shè)置margin和padding）。也可以使用hack方法為IE指定特別的值。
13. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
14. 是否重設(shè)了默認的樣式？
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發(fā)前首先將全體的margin、padding設(shè)置為0、列表樣式設(shè)置為none等。
15、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)
程序代碼
<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在 程序代碼
<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>
之間加上 程序代碼
<#div class=”clear”></#div>
這個div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可：
程序代碼
.clear{
clear:both;}
此外，為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時候，高度自動適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：
程序代碼
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
16、margin加倍的問題。
設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div里面加上display:inline;
例如：
<#div id=”imfloat”></#div>
相應(yīng)的css為
程序代碼
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
17、關(guān)于容器的包涵關(guān)系
很多時候，尤其是容器內(nèi)有平行布局，例如兩、三個float的div時，寬度很容易出現(xiàn)問題。在IE中，外層的寬度會被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
18、關(guān)于高度的問題
如果是動態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時候不會自動往下?lián)伍_，不知道具體怎么回事）

常見兼容問題：
1.DOCTYPE 影響 CSS 處理
2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時已經(jīng)居中, IE 不行
3.FF: body 設(shè)置 text-align 時, div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設(shè)置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設(shè)一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯位, 若不設(shè) height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據(jù)阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx!important;

10.IE5 和IE6的BOX解釋不一致
IE5下 程序代碼
div{width:300px;margin:0 10px 0 10px;}
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關(guān)于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了?。海?
11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義
程序代碼ul{margin:0;padding:0;}
注意書寫格式的問題：
一定要注意縮進。對齊。要有良好的編程習(xí)慣。