一、 善用css縮寫規則
1. 關于邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四邊都相同）
2. 簡化所有：
*/ body{margin:0}------------表示網頁内所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0
3. 縮寫（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. 關于文字的縮寫規則：
Font-style:italic; 斜體形式
Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開寫。
5. 關于背景圖檔的：
Background:#FFF url(log.gif) no-repeat fixed top left;
6. 關于清單：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
縮寫成：
List-style:none inside url(filename.gif);
二、 運用4種方法來引入CSS樣式
1.link
<link rel=”stylesheet” type=”text/css” href=”a.css”>
rel 關系
type 資料類型,有多種
href 路徑
部分浏覽器支援候選樣式,關鍵字:alternate:
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>
2.内部樣式塊
<style>
<!–
h1{color:red;}
–>
</style>
[email protected]
@import url{a.css}
注意:此指令必須放在<style>容器中,并且在所有樣式之前
建議放在一個html注釋中,<!– –>浏覽器會不顯示注釋内的内容,而import等css代碼能正常工作
4.内聯樣式
<p style=”color:red;”>
選擇器是css的一個基本概念，基本規則如下：
1.規則結構：
h1 {color:red;}
選擇器 {屬性:值;}
這類是元素選擇器，基本可以包括所有html的元素
屬性值可以包括多個元素，如：border：1px solid red;
常用文法
1)分組：
選擇器和聲明都可以分組:
h1,h2,h3{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割
2)類選擇器,即通過class=”stylename”應用的聲明
定義:
.stylename{color:red;}
注意:
在html中可以使用多類選擇:如class=”cn1 cn2 cn3″
3)ID選擇器,即與id屬性對應的樣式
定義:
#a{color:red;} ->這個定義對用id=”a”的元素
2.這部分都是我們常見的css文法，下面談一下我們不常見的選擇器文法
1)父子結構,跟文檔結構圖對應
如p span{border:1px solid red;}對應的是<p>下面的<li>标簽,這個很用用途,可以準确定位.
一些特殊應用(IE7支援):
(1) p > span{},比對所有p下所有的span
(2) p + span{} ,比對緊接着p元素後出現的第一個span标簽,2者要有相同的父标簽
2)屬性選擇器:(注意:屬性選擇器ie7才開始支援,以下版本并不支援,其他的浏覽器基本可以)
文法:img[alt]{border:1px solid;}
表示對應有alt屬性的img标簽,當然可以支援多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img标簽,也可以與具體值對應:如:img[alt=”攝影”]{};
屬性選擇器中的進階應用,特殊比對:
(1)img[class~=”b”], ~= : 與屬性中的一個值對應的,即與<img class=”a b c”>對應
(2)[class^=”a”],以a開頭的
(3)[class$=”a”],以a結束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a開頭的
3)僞類和僞元素
日常使用中主要是<a>标簽的幾個僞類:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:動态僞類可以應用到任何元素,如,input:focus{background:red;}當input标簽獲得焦點時背景變紅
以上文法組合使用,就能實作定位準确、簡單間接的樣式了。
三、 選擇器分類整合
優先級别遵循：行内樣式 >ID > Class >标記
| 基本選擇器 | 标記選擇器（eg:<p></p>） |
| 類别選擇器(eg:class) | |
| ID選擇器 | |
| 複合選擇器 | “交集”複合選擇器(eg:p.menu{color:red}) 必須是标記+類别/ID組合 |
| “并集”複合選擇器(eg:h1,h2,h3{color:red}) | |
| “後代”複合選擇器(eg: #menu .menulist{ ... }) | |
| “子” 複合選擇器(eg: #menu .menulist .selectit { ... }) |
四、 使用子選擇器減少id和class的定義
示例結構：
<div id="menu">
<div class="menulist">
<div class="selectit">content</div>
</div>
</div>
示例CSS：
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
五、 使用組選擇器為不同元素應用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字型16像素，字型粗體
六、 僞類和選擇符的配合使用
将僞類和類組合起來用，就可以在同一個頁面中做幾組不同的連結效果了，例如，我們定義一組連結為紅色，通路後為藍色；另一組為綠色，通路後為黃色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現在應用在不同的連結上：
<a class="red" href="..." target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >這是第一組連結</a>
<a class="blue" href="..." target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >這是第二組連結</a>
七、 CSS的最近優先原則
以下是引用片段：
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此處顯示為紅色</p>
<p class="blue">此處顯示為藍色</p>
<p class="blue" style="color:green">此處顯示為綠色</p>
<p class="blue yellow">此處顯示為黃色</p>
注意：
（1）注意樣式的幾個優先順序(優先級由上至下遞減，下面的樣式覆寫上面的樣式)：
--元素style設定
--head區<style></style>中的設定
--外部引用css檔案
（2）優先級不是按通路順序來設定的，而是又css中的聲明順序來設的。
如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色，因為在css定義中.yellow在.blue的後面。
八、 書寫正确的連結樣式
當用css定義連結的各種狀态時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。
:link --------連結的顔色
:visited -----滑鼠點選後的顔色
:hover -------滑鼠放上去未點的顔色（懸停）
:active-------滑鼠點選瞬間的顔色
九、 :hover的靈活運用
IE6不支援除a标簽以外的:hover屬性，我們了解:hover屬性是滑鼠懸停效果。在IE7和FF中，對幾乎任意元素都可以設定:hover屬性效果。這對我們做不同的通路效果很好。
如：
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
----------------此效果針對IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果針對IE6
十、 定義A标簽要注意的小問題
當我們定義a{color:red;}時，它代表了A的四種狀态的樣式，如果此時要定義一個滑鼠放上的狀态隻要定義a:hover就可以了，其它三種狀态就是A中所定義的樣式。
隻定義了一個a:link時，一定要記得把其它三種狀态定義出來！
十一、 禁止内容換行與強制内容換行
在表格或層中我們可能希望内容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。
禁止換行：white-space:nowrap
強制換行：word-break: break-all; white-space: normal;
十二、 差別relative和absolute
Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照浏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，預設依據父級的做标原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那麼目前的absolute則以浏覽器左上角為原始點進行定位，位置将由TRBL決定。
Relative---CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級内有padding等CSS屬性時，目前級的原始點則參照父級内容區的原始點進行定位。
十三、 差別塊級元素block和内聯元素inline
塊級---可定義寬高，另起獨占一行 （如：div ul）
内聯---不可定義寬高，如文本元素 （如a span）
十四、 差別display和visibility
display:none和visibility:hidden都可以隐藏一個元素,但visibility:hidden隻是隐藏了元素的内容，但其使用的位置空間仍然被保留。而display:none則相當把元素從頁面中去除，其占用位置也将被删除。
十五、 背景background的一些文法
background-image:url(背景圖案.jpg,gif,bmp);
background-color:#FFFFFF; （背景顔色）
background-color : transparent; <--設定背景為透明色 –>
background-repeat 改變背景圖檔的重複并排的設定
說明
repeat 背景圖檔并排
repeat-x 背景圖檔以X方向 并排
repeat-y 背景圖檔以Y方向 并排
no-repeat 背景圖檔不 以并排的方式處理
background-attachment是否固定圖檔位置
說明
scroll 拉動卷軸時，背景圖檔會跟着移動（預設值）
fixed 拉動卷軸時，背景圖檔不會跟着移動
以長度定位background-position: x y
使用百分比定位 background-position: x% y%
說明
x% 往右移
y% 往下移
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
以關鍵字定位
關鍵字 說明
top 上 ( y = 0 )
center 中 ( x = 50, y = 50 )
bottom 下 ( y = 100 )
left 左 ( x= 0 )
Exp:
background-position:center;
圖檔在指定背景中央X=50% Y=50%位置
background-position: 200px 30px
十六、 注釋的寫法
在Html中：
<-- footer -->
content
<-- end footer -->
在CSS中：
style
十七、 CSS的命名規範
1. id的命名
(1)頁面結構
容器: container
頁頭：header
内容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
(2)導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
标題: title
摘要: summary
(3)功能
标志：logo
廣告：banner
登陸：login
登入條：loginbar
注冊：regsiter
搜尋：search
功能區：shop
标題：title
加入：joinus
狀态：status
按鈕：btn
滾動：scroll
标簽頁：tab
文章清單：list
提示資訊：msg
目前的: current
小技巧：tips
圖示: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載下傳：download
投票：vote
合作夥伴：partner
友情連結：link
版權：copyright
2. 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 { }
注意事項::
u 一律小寫;
u 盡量用英文;
u 不加中杠和下劃線;
u 2個組合的單詞不用中杠和下劃線可以将第二個單詞的首字母大寫（eg:mainContent）；
u 盡量不縮寫，除非一看就明白的單詞.
3. 主要的站點css檔案
主要的 master.css
子產品 module.css
基本共用 base.css（root.css）
布局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
更新檔 mend.css
列印 print.css
十八、 Padding影響寬度問題
如果一組要嵌套的标簽之間需要些間距的話，那就留給位于裡面的标簽的margin屬性吧，而不要去定義位于外面的标簽的padding
十九、 完美的單象素外框線表格
table{border-collapse:collapse;}
td{border:1px solid #000;}
二十、 如果文字過長,則将過長的部分變成省略号顯示
<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap”>
二十一、 并不是所有樣式都要簡寫
當樣式表前定義了如p{padding:1px 2px 3px 4px}時，在後續工程中又增加了一個樣式上補白5px，下補白6px。我們并不一定要寫成p.style1{padding:5px 6px 3px 4px}。可以寫成p.style1{padding-top:5px;padding-right:6px;},你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重複定義了樣式，另外你可以不必去找原來的下補白與左補白的值是多少！如果以後前一個樣式P變了話，你定義的p.style1的樣式也要變。(此種方法對後期修改樣式很重要)
二十二、 幾個常用到的CSS細節處理上的樣式
1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;
2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過隻能處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它隻隐藏。
***萬能強制換行：white-space:normal;word-break:break-all;
禁止換行：white-space:nowrap
強制換行：word-wrap: break-word; word-break: normal;
.AutoNewline
{
word-wrap:break-word; word-break:break-all;
}
.NoNewline
{
white-space:nowrap;
}
3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
4）<acronym title=”輸入要提示的文字” style=”cursor:help;”>文字</acronym>用滑鼠放在前面的文字上看效果。這個效果在國外的很多網站都可以看到，而國内的少又少。
5）圖檔設為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通過，FF未通過，這是因為這個樣式是IE私有的東西；
6）FLASH透明：選中swf,打開原代碼視窗，在</object>前輸入<param name=”wmode” value=”transparent”> 以上是針對IE的代碼。
針對FIREFOX 給<embed> 标簽也增加類似參數wmode=”transparent”
7）在做網頁時常用到把滑鼠放在圖檔上會出現圖檔變亮的效果，可以用圖檔替換的技巧，也可以用如下的濾鏡：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8）層在浏覽器中居中對齊問題
body { text-align: center }
#content { text-align: left; width: 700px; margin: 0 auto }
9)單行内容在層中垂直對齊問題
# content{height:19px; line-height:19px; }缺點是要内容不要換行。
10）層在浏覽器中垂直居中對齊問題
缺點是：水準、垂直方向上不能出現滾動條，隻能是在一屏的情況下
其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位，使用外更新檔margin負值的方法。負值的大小為層自身寬度高度除以2。
如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設定成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實作了層垂直居中于浏覽器的樣式編寫。
請看執行個體代碼：
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid red;
}
11）CSS控制圖檔自适應大小
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
二十三、 使用float屬性的元素要注意的問題
1. 利用border屬性确定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性确定元素邊界，錯誤原因即水落石出。
2. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
3. float元素務必指定width屬性
很多浏覽器在顯示未指定width的float元素時會有bug。是以不管float元素的内容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做機關。
4. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。是以不要對float元素指定margin和padding屬性(可以在float元素内部嵌套一個div來設定margin和padding)。也可以使用hack方法為IE指定特别的值。
5. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的浏覽器将不能正常顯示。是以請保證寬度之和小于99%。
二十四、 浏覽器的相容性問題（針對FF/IE6/IE7）
1.CSS hack:區分IE6，IE7，firefox
差別FF，IE7，IE6：
background:green !important; background:orange; *background:blue;
IE6能識别*，但不能識别 !important,
IE7能識别*，也能識别!important;
FF不能識别*，但能識别!important;
另外再補充一個，下劃線”_“,
IE6支援下劃線，IE7和firefox均不支援下劃線。
于是大家還可以這樣來區分firefox，IE7，IE6
background:green!important; *background:orange; _background:blue;
注：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。
2.在firefox和IE中的BOX模型解釋不一緻導緻相差2px解決方法
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識别，但别的浏覽器可以識别。是以在IE下其實解釋成這樣：div{maring:30px;margin:28px}重複定義的話按照最後一個來執行，是以不可以隻寫margin:XXpx!important;
3.條件性注釋來選擇不同的浏覽器（比CSS hack簡潔）
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>
4.區分IE8
.color{
background-color: #CC00FF;
background-color: #FF0000\9;
*background-color: #0066FF;
_background-color: #009933;
二十五、 W3C遵循的标準原則
1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以内，并且應該盡量避免 <colspan> <rowspan> 兩個标記，經驗表明，這兩個标記會帶來許多麻煩。
2. 一個網頁要盡量避免用整個一張大表格，所有的内容都嵌套在這個大表格之内，因為浏覽器在解釋頁面的元素時，是以表格為機關逐一顯示，如果一張網頁是嵌套在一個大表格之内，那麼很可能造成的後果就是，當浏覽者敲入網址，他要先面對一片空白很長時間，然後所有的網頁内容同時出現。如果必須這樣做，請使用 <tbody>标記，以便能夠使這個大表格分塊顯示。
3. 排版中我們經常會遇到需要進行首行縮進的處理，不要使用 或者全角空格來達到效果，規範的做法是在樣式表中定義 p { text-indent: 2em; } 然後給每一段加上 <p> 标記，注意，一般情況下，請不要省略 </p> 結束标記 。
4. 原則上，我們禁止用 <img width=? height=?> 來人為幹預圖檔顯示的尺寸，而且建議 <img> 标簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖檔往往需要反複的修改，這樣可以避免人為幹預圖檔顯示的尺寸，盡可能的發揮浏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖檔時，不會留出圖檔的站位大小，可能會造成網頁在加載過程中抖動（如果圖檔是插在一個固定大小的表格裡的，不會有這個現象），尤其是當圖檔的尺寸較大時，這種現象會很明顯，是以當預料到這種會明顯導緻網頁抖動的情況會發生時，請大家務必在最後給 <img>附上 width 和 height 屬性。
5. 為了最大程度的發揮浏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工幹預分段。
6. 不同語種的文字之間應該有一個半角空格，但避頭的符号之前和避尾的符号之後除外漢字之間的标點要用全角标點，英文字母和數字周圍的括号應該使用半角括号。
7. 所有的字号都應該用樣式表來實作，禁止在頁面中出現 <font size=?> 标記。
8. 請不要在網頁中連續出現多于一個的也盡量少使用全角空格（英文字元集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖檔來實作。
9. 中英文混排時，我們盡可能的将英文和數字定義為verdana 和arial 兩種字型。
10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
11. 網站中的路徑全部采用相對路徑，一般連結到某一目錄下的預設檔案的連結路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>
12. 嵌入圖形文本的使用較大的字型，建議不要在圖形中包括文本。
13.“網頁大小”定義為網頁的所有檔案大小的總和，包括HTML檔案和所有的嵌入的對象。使用者喜歡快的而不是新奇的站點。對于解調器使用者，網頁大小保持在34K以下為合适。
14. float元素務必指定width屬性
很多浏覽器在顯示未指定width的float元素時會有bug。是以不管float元素的内容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做機關。
15. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。是以不要對float元素指定margin和padding屬性（可以在float元素内部嵌套一個div來設定margin和padding）。也可以使用hack方法為IE指定特别的值。
16. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的浏覽器将不能正常顯示。是以請保證寬度之和小于99%。
二十六、 清單元素ul ol li dl dt dd釋義
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
<dl>
<dt>标題<dt>
<dd>内容描述1</dd>
<dd>内容描述2</dd>
</dl>
l dt 和dd中可以再加入 ol ul li和p
二十七、 清除浮動
clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的HACK來對父級做一次定義，那麼就可以解決這個問題 。
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
**這種用法在進行圖文混排時比較多，但是不太好控制，用margin配合clear{clear:both}直接來控制。
二十八、 文字的處理
1. 一般的字型：
font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋體",sans-serif;
标題字型（h1/h2）：font-family: Cambria, Georgia, "Times New Roman", Times, serif;
2. 首字下沉：
P:first-letter{padding:10px,fontsize:32pt;float:left}
3. 拼音漢字：
<ruby>布魯斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby>
二十九、 Min-height多浏覽器相容問題
Div{
min-height:450px;
height:auto!important;
height:450px;
overflow:visible;????
}
三十、 CSS布局口訣 - CSS BUG順口溜
· IE邊框若顯若無，須注意，定是高度設定已忘記；
· 浮動産生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；
· 三像素文本慢移不必慌，高度設定幫你忙；
· 相容各個浏覽須注意，預設設定行高可能是殺手；
· 獨立清除浮動須銘記，行高設無，高設零，設計效果兼浏覽；
· 學布局須思路，路随布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，相容好，友好引擎喜歡迎。
· 所有标簽皆有源，隻是預設各不同，span是無極，無極生兩儀—内聯和塊級，img較特殊，但也遵法理，其他隻是改造各不同，一個*号全歸原，層疊樣式理須多練習，萬物皆規律。
· 圖檔連結排版須小心，圖檔連結文字連結若對齊，padding和vertical-align:middle要設定，雖差微細倒無妨。
· IE浮動雙邊距，請用display：inline拘。
· 清單橫向排版，清單代碼須緊靠，空隙自消須銘記。
三十一、 Web中的字型應用
總結幾套實用而簡單的font-family
font-family: Tahoma, Helvetica, Arial, sans-serif;
Tahoma 系的中性字型。推薦使用在13px以上的環境。
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
Verdana 系的寬扁字型。推薦在11px以下環境使用。
font-family: Geogia, Times New Roman, Times, serif;
襯線字型的不二之選。 多用于大号的标題字型16px以上。
font-family: Lucida Console, Monaco, Courier New, mono, monospace;
一系列等寬字型。寫代碼很好用。另外，如果覺得Lucida Console太寬的話，可以換成比較窄的Lucida Sans Typewriter。話說老趙blog上的代碼塊使用的就是Lucida Sans Typewriter 喲~
如果在div的style中把visibility設為hidden則div隐藏，但是它會占據空白空間，而如果設定成display：none則不占據空白空間；
而visible="false"則div不傳回在html中；
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)