一、 善用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>
3.@import
@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="...">這是第一組鏈接</a>
<a class="blue" href="...">這是第二組鏈接</a>
七、 CSS的最近優先原則
/*如果對一個元素定義了多次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其他 行內樣式 >ID > Class >標記 */
以下是引用片段：
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中：
/* ---------- header ----------------- */
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-break: break-all; 方法一 必須*/
/*word-wrap:break-word;overflow:hidden; 方法二 */
/*word-wrap:break-word; word-break: normal; 方法三 */
word-wrap:break-word; word-break:break-all;
}
.NoNewline
{
/*word-break: keep-all; 方法一 必須*/
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; /*IE6、IE7、IE8會顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會變爲藍色*/
_background-color: #009933; /*IE6會變爲綠色*/
二十五、 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;
}
/* Hides from IE-mac /*/
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* End hide from IE-mac */
**這種用法在進行圖文混排時比較多，但是不太好控制，用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中；