下面介紹常見(jiàn)的CSS簡(jiǎn)寫(xiě)規(guī)則：
一、盒子大小
這里主要用于兩個(gè)屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個(gè)方向，每個(gè)方向都有個(gè)外邊距：
margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;
你可以簡(jiǎn)寫(xiě)成：
margin:1px 2px 3px 4px;
語(yǔ)法 margin:top right bottom left;
//四個(gè)方向的邊距相同，等同于margin:1px 1px 1px 1px; margin:1px; //上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px; margin:1px 2px; //右邊距和左邊距相同，等同于margin:1px 2px 3px 2px; margin:1px 2px 3px; //注意，這里雖然上下邊距都為1px，但是這里不能縮寫(xiě)。 margin:1px 2px 1px 3px;
二、邊框(border)
邊框的屬性如下：
border-width:1px; border-style:solid; border-color:#000;
可以縮寫(xiě)為一句：
border:1px solid #000;
語(yǔ)法 border:width style color;
三、背景(Backgrounds)
背景的屬性如下：
background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:00;
可以縮寫(xiě)為一句：
background:#f00 url(background.gif) no-repeat fixed 0 0;
語(yǔ)法是background:color image repeat attachment position;
你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為：
-
color: transparent
-
image: none
-
repeat: repeat
-
attachment: scroll
-
position: 0% 0%
四、字體(fonts)
字體的屬性如下：
font-style:italic; font-variant:small-caps; font-weight:bold;font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif;
可以縮寫(xiě)為一句：
font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
注意，如果你縮寫(xiě)字體定義，至少要定義font-size和font-family兩個(gè)值。
五、列表(lists)
取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫(xiě)list-style:none;,
list的屬性如下:
list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);
可以縮寫(xiě)為一句：
list-style:square inside url(image.gif);
六、顏色(Color)
16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤梢钥s寫(xiě)一半。例如：
Aqua: #00ffff ——#0ff
Black: #000000 ——#000
Blue: #0000ff ——#00f
Dark Grey: #666666 ——#666
Fuchsia:#ff00ff ——#f0f
Light Grey: #cccccc ——#ccc
Lime: #00ff00 ——#0f0
Orange: #ff6600 ——#f60
Red: #ff0000 ——#f00
White: #ffffff ——#fff
Yellow: #ffff00 ——#ff0
七、屬性值為0
書(shū)寫(xiě)原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會(huì)這樣寫(xiě):
padding:10px 5px 0px 0px;
試試這樣吧:
padding:10px 5px 00 ;
八、最后一個(gè)分號(hào)
最后一個(gè)屬性值后面分號(hào)可以不寫(xiě)，如：
#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal;
}
可以簡(jiǎn)寫(xiě)成:
#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal
}
九、字體粗細(xì)(font-weight)
你可能會(huì)這樣寫(xiě):
h1{
font-weight:bold;
}
p{
font-weight:normal;
}
可以簡(jiǎn)寫(xiě)成:
h1{
font-weight:700;
}
p{
font-weight:400;
}
十、圓角半徑(border-radius)
border-radius是css3中新加入的屬性，用來(lái)實(shí)現(xiàn)圓角邊框。
-moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; border-bottom-left-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px;
可以簡(jiǎn)寫(xiě)成:
-moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; border-radius:0 6px 6px;
語(yǔ)法 border-radius:topleft topright bottomright bottomleft
]]> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
提示：您可以先修改部分代碼再運(yùn)行，保存代碼功能在Firefox下無(wú)效。
在css中使用margin可以將margin-top，margin-right，margin-bottom，margin-left，縮寫(xiě)為一個(gè)標(biāo)記，順序?yàn)?SPAN style="COLOR: #ff0000">上右下左（順時(shí)針）。
margin標(biāo)記可以帶一個(gè)、二個(gè)、三個(gè)、四個(gè)參數(shù)，各有不同的含義。
]]>
1. 檢查HTML元素是否有拼寫(xiě)錯(cuò)誤、是否忘記結(jié)束標(biāo)記
即使是老手也經(jīng)常會(huì)弄錯(cuò)P的嵌套關(guān)系。可以用dreamweaver的驗(yàn)證功能檢查一下有無(wú)錯(cuò)誤。
2. 檢查CSS是否書(shū)寫(xiě)正確
檢查一下有無(wú)拼寫(xiě)錯(cuò)誤、是否忘記結(jié)尾的 } 等。可以利用CleanCSS來(lái)檢查 CSS的拼寫(xiě)錯(cuò)誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫(xiě)錯(cuò)誤。
3. 用刪除法確定錯(cuò)誤發(fā)生的位置
如果錯(cuò)誤影響了整體布局，則可以逐個(gè)刪除P塊，直到刪除某個(gè)P塊后顯示恢復(fù)正常，即可確定錯(cuò)誤發(fā)生的位置。
4. 利用border屬性確定出錯(cuò)元素的布局特性
使用float屬性布局一不小心就會(huì)出錯(cuò)。這時(shí)為元素添加border屬性確定元素邊界，錯(cuò)誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對(duì)float的元素的父元素使用clear屬性，周?chē)膄loat元素布局就會(huì)混亂。這是MacIE的著名的bug，倘若不知道就會(huì)走彎路。
6. float元素務(wù)必指定width屬性
很多瀏覽器在顯示未指定width的float元素時(shí)會(huì)有bug。所以不管float元素的內(nèi)容如何，一定要為其指定width屬性。
另外指定元素時(shí)盡量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時(shí)有bug。因此不要對(duì)float元素指定margin和padding屬性（可以在float元素內(nèi)部嵌套一個(gè)P來(lái)設(shè)置margin和padding）。也可以使用hack方法為IE指定特別的值。
8. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請(qǐng)保證寬度之和小于99%。
9. 是否重設(shè)了默認(rèn)的樣式？
某些屬性如margin、padding等，不同瀏覽器會(huì)有不同的解釋。因此最好在開(kāi)發(fā)前首先將全體的margin、padding設(shè)置為0、列表樣式設(shè)置為none等。
10. 是否忘記了寫(xiě)DTD？
如果無(wú)論怎樣調(diào)整不同瀏覽器顯示結(jié)果還是不一樣，那么可以檢查一下頁(yè)面開(kāi)頭是不是忘了寫(xiě)下DTD聲明。
原文：all about floats
譯文：關(guān)于浮動(dòng)的前世今生
版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，多謝?。?/P>
什么是浮動(dòng)？
浮動(dòng)是 css 的定位屬性。我們可以看一下印刷設(shè)計(jì)來(lái)了解它的起源和作用。印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱(chēng)為“文本環(huán)繞”。
這是一個(gè)例子：
在排版軟件里面，存放文字的盒子可以被設(shè)置為允許圖文混排，或者無(wú)視它。無(wú)視圖文混排將會(huì)允許文字出現(xiàn)在圖片的上面，就像它甚至不會(huì)在那里一樣。這就是圖片是否是頁(yè)面流的一部分的區(qū)別。網(wǎng)頁(yè)設(shè)計(jì)與此非常類(lèi)似。
在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)用了CSS的float屬性的頁(yè)面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動(dòng)的元素仍然是網(wǎng)頁(yè)流的一部分。這與使用絕對(duì)定位的頁(yè)面元素相比是一個(gè)明顯的不同。絕對(duì)定位的頁(yè)面元素被從網(wǎng)頁(yè)流里面移除了，就像印刷布局里面的文本框被設(shè)置為無(wú)視頁(yè)面環(huán)繞一樣。絕對(duì)定位的元素不會(huì)影響其它元素，其它元素也不會(huì)影響它，無(wú)論它是否和其它元素挨著。
像這樣在一個(gè)元素上用CSS設(shè)置浮動(dòng)：
#sidebar { float: right; }
fload屬性有四個(gè)可用的值：Left 和Right 分別浮動(dòng)元素到各自的方向，None (默認(rèn)的) 使元素不浮動(dòng)，Inherit 將會(huì)從父級(jí)元素獲取float值。
浮動(dòng)的用處
除了簡(jiǎn)單的在圖片周?chē)鼑淖?，浮?dòng)可用于創(chuàng)建全部網(wǎng)頁(yè)布局。
浮動(dòng)對(duì)小型的布局同樣有用。例如頁(yè)面中的這個(gè)小區(qū)域。如果我們?cè)谖覀兊男☆^像圖片上使用浮動(dòng)，當(dāng)調(diào)整圖片大小的時(shí)候，盒子里面的文字也將自動(dòng)調(diào)整位置：
同樣的布局可以通過(guò)在外容器使用相對(duì)定位，然后在頭像上使用絕對(duì)定位來(lái)實(shí)現(xiàn)。這種方式中，文本不會(huì)受頭像圖片大小的影響，不會(huì)隨頭像圖片的大小而有相應(yīng)變化。
清除浮動(dòng)
清除(clear)是浮動(dòng)(float)的相關(guān)屬性.一個(gè)設(shè)置了清除浮動(dòng)的元素不會(huì)如浮動(dòng)所設(shè)置的一樣，向上移動(dòng)到浮動(dòng)元素的邊界，而是會(huì)忽視浮動(dòng)向下移動(dòng)。如下，一圖頂千言。
上例中，側(cè)欄向右浮動(dòng)，并且短于主內(nèi)容區(qū)域。頁(yè)腳(footer)于是按浮動(dòng)所要求的向上跳到了可能的空間。要解決這個(gè)問(wèn)題，可以在頁(yè)腳(footer)上清除浮動(dòng)，以使頁(yè)腳(footer)待在浮動(dòng)元素的下面。
#footer { clear: both; }
清除(clear)也有4個(gè)可能值。最常用的是 both，清楚左右兩邊的浮動(dòng)。left 和 right 只能清楚一個(gè)方向的浮動(dòng)。none 是默認(rèn)值，只在需要移除已指定的清除值時(shí)用到。inherit 應(yīng)該時(shí)第五個(gè)值，不過(guò)很奇怪的是 IE 不支持(這個(gè)不奇怪吧，IE 從來(lái)都這么特立獨(dú)行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動(dòng)，實(shí)際中很少見(jiàn)，不過(guò)絕對(duì)有他們的用處。
]]>
CSS中最常用的布局類(lèi)屬性，一個(gè)是Float(CSS浮動(dòng)屬性Float詳解)，另一個(gè)就是CSS定位屬性Position。
1. position:static
所有元素的默認(rèn)定位都是：position:static，這意味著元素沒(méi)有被定位，而且在文檔中出現(xiàn)在它應(yīng)該在的位置。
一般來(lái)說(shuō)，不用指定 position:static，除非想要覆蓋之前設(shè)置的定位。
#div-1 {
position:static;
}
2. position:relative
如果設(shè)定 position:relative，就可以使用 top,bottom,left 和 right 來(lái)相對(duì)于元素在文檔中應(yīng)該出現(xiàn)的位置來(lái)移動(dòng)這個(gè)元素?！疽馑际窃貙?shí)際上依然占據(jù)文檔中的原有位置，只是視覺(jué)上相對(duì)于它在文檔中的原有位置移動(dòng)了】
#div-1 {
position:relative;
top:20px;
left:-40px;
}
3. position:absolute
當(dāng)指定 position:absolute 時(shí)，元素就脫離了文檔【即在文檔中已經(jīng)不占據(jù)位置了】，可以準(zhǔn)確的按照設(shè)置的 top,bottom,left 和 right 來(lái)定位了。
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
4. position:relative + position:absolute
如果我們給 div-1 設(shè)置 relative 定位，那么 div-1 內(nèi)的所有元素都會(huì)相對(duì) div-1 定位。如果給 div-1a 設(shè)置 absolute 定位，就可以把 div-1a 移動(dòng)到 div-1 的右上方。
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. 兩欄絕對(duì)定位
現(xiàn)在就可以使用相對(duì)定位和絕對(duì)定位來(lái)做一個(gè)兩欄布局了。
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
6. 兩欄絕對(duì)定位定高
一種方案是給元素設(shè)定固定高度。但這種方案對(duì)大多數(shù)設(shè)計(jì)來(lái)說(shuō)不太適合，因?yàn)橐话阄覀儾恢涝刂袝?huì)有多少文本，或者將要使用的精確的字號(hào)。
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
7. 浮動(dòng)
對(duì)于可變高度的列來(lái)說(shuō)，絕對(duì)定位就不起作用了，以下是另外一個(gè)方案。
我們可以浮動(dòng)一個(gè)元素，使它移動(dòng)到左邊/右邊，并且是文本環(huán)繞著它。這主要用于圖像，但這里我們把它用于一個(gè)復(fù)雜的布局任務(wù)(因?yàn)檫@是我們唯一的工具)。
#div-1a {
float:left;
width:200px;
}
8. 浮動(dòng)列
如果我們把一個(gè)元素向左浮動(dòng)，并且把第二個(gè)元素也向左浮動(dòng)，they will push up against each other。
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9. 清除浮動(dòng)列
在浮動(dòng)元素之后，我們可以清除浮動(dòng)來(lái)使其他元素正確定位。
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
概要：
本文主要描述XHTML中相對(duì)定位和絕對(duì)定位各自的本質(zhì)、用法、區(qū)別和兩者之間的關(guān)系。以及使用CSS的Left、Right、Top、Bottom屬性（偏移屬性）和Margin屬性（外邊距）對(duì)定位塊級(jí)元素進(jìn)行布局的方法。(本文的示例，請(qǐng)看這個(gè)附件demo。)
說(shuō)明：
占位空間：元素在文檔流中所占據(jù)的空間。
物理空間：元素本身所占據(jù)的空間。
下面分3種情況分別對(duì)相對(duì)定位和絕對(duì)定位進(jìn)行討論：
1.只使用css第一組屬性布局定位元素的情況
2.只使用css第二組屬性布局定位元素的情況
3.混合使用第一組和第二組屬性的情況
圖1為未定位時(shí)的初始效果，
層級(jí)關(guān)系為：
<div
<div box1
<div box2
<div box3
效果圖：
圖1
一、用相對(duì)定位布局塊級(jí)元素
元素設(shè)置position值： position:relative
此屬性值的設(shè)置，元素沒(méi)有脫離文檔流，還是普通流定位模型的一部分，會(huì)對(duì)文檔流中其它元素布局產(chǎn)生影響。（說(shuō)明：藍(lán)色代表占位空間，紅色代表元素）
1.僅使用left、right、top和bottom屬性布局相對(duì)定位元素的情況
元素原本所占的占位空間仍保留，物理空間偏移。
圖2中，設(shè)置元素的left和top的值，對(duì)box2進(jìn)行布局，可以發(fā)現(xiàn)除了box2偏移之外，其他塊級(jí)元素的位置沒(méi)有被影響，可見(jiàn)box2的占位空間還是存在的。
層級(jí)關(guān)系為：
<div
<div box1
<div box2 ――? position:relative ; top:-60px; left:80px;
<div box3
效果圖：
圖2
2.僅使用margin屬性布局相對(duì)定位元素的情況
用margin-bottom屬性和margin-top屬性設(shè)置負(fù)值可以改變文檔流中所占空間的高度，會(huì)影響文檔流中的其它元素位置。例如：margin-top:負(fù)值; margin-bottom:負(fù)值
圖3中，box1和box2都設(shè)置了元素margin-bottom的值，值等于它們高度的負(fù)值。box1和box2物理空間沒(méi)有改變，占位空間高度為0。box3的margin-bottom值設(shè)置為0，物理空間沒(méi)有改變，占位空間高度不變。再通過(guò)margin-left對(duì)box2和box3設(shè)置左偏移值。
層級(jí)關(guān)系為：
<div
<div box1 ――? position:relative ; margin-bottom:-102px;
<div box2 ――? position:relative ; margin-bottom:-102px; margin-left:110px;
<div box3 ――? position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：
圖3
3.混合使用left、right、top和bottom屬性與margin屬性布局相對(duì)定位元素的情況
此情況，它們的值會(huì)產(chǎn)生累加的效果。在CSS2.1中所有的瀏覽器都使用外邊距邊界來(lái)完成 偏移計(jì)算。本文從數(shù)學(xué)的角度理解為偏移屬性值和外邊距屬性值累加。
圖4中，box2是在圖3的基礎(chǔ)上增加設(shè)置left的值產(chǎn)生的效果，可見(jiàn)margin-left的值和left的值產(chǎn)生了累加。(偏移量:80px = 110px – 30px)
層級(jí)關(guān)系為：
<div
<div box1 ――- position:relative ; margin-bottom:-102px;
<div box2 ――- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
<div box3 ――- position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：
圖4
二、用絕對(duì)定位布局塊級(jí)元素
設(shè)置position值：position:absolute;
此屬性值的設(shè)置，元素從文檔流完全刪除。
1.僅使用left、right、top和bottom屬性布局絕對(duì)定位元素的情況
絕對(duì)定位的元素的偏移位置以最近的定位(包括相對(duì)定位和絕對(duì)定位)祖先元素作參照物。如果元素沒(méi)有已定位(包括相對(duì)定位和絕對(duì)定位)的祖先元素，那么它的參照物為最頂級(jí)元素（由于瀏覽器的默認(rèn)參照物不同，物可能是BODY或 HTML 元素）。
注意：IE下參照物需設(shè)置寬度或高度bottom和right屬性才可以正確的定位。
設(shè)置元素為絕對(duì)定位元素后，元素的Left、 Right、Top和Bottom屬性默認(rèn)值不是0，只是將元素脫離文檔流。以下例子說(shuō)明這個(gè)問(wèn)題。
在圖5中，將橘黃色的祖先元素設(shè)置為定位元素（即參照物），box2設(shè)為絕對(duì)定位，文檔流由box1-box2-box3變?yōu)閎ox1-box3，可box2卻沒(méi)有移動(dòng)到距離參照物0值的位置上，可見(jiàn)box2的Left、 Right、Top和Bottom屬性默認(rèn)值不等于0，它只是脫離了文檔流而已。
層級(jí)關(guān)系為：
<div ―――――――――――position:relative 參照物
<div―――――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ――?absolute
<div box3
效果圖：
圖5
以最近的祖先定位元素為參照物的情況
圖6中，Box2設(shè)置成絕對(duì)定位元素，脫離了文檔流，文檔流由box1-box2-box3變?yōu)閎ox1-box3，box2以最近的定位祖先（藍(lán)色框）為參照物。
層級(jí)關(guān)系為：
<div ――――――――――― position:relative; 不是最近的祖先定位元素，不是參照物
<div―――――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――- position:relative 參照物
<div box1
<div box2 ――?position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖6
圖7中，為改變參照物（橘色框）后的效果
層級(jí)關(guān)系為：
<div ――――――――――― position:relative;最近的祖先定位元素，參照物
<div―――――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖7
圖8中，參照物為最頂級(jí)的元素情況。
層級(jí)關(guān)系為：
<div ―――――――――――沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖8
2.僅使用margin屬性布局絕對(duì)定位元素的情況
此情況，margin-bottom 和margin-right的值不再對(duì)文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流。另外，不管它的祖先元素有沒(méi)有定位，都是以文檔流中原來(lái)所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對(duì)定位元素。
層級(jí)關(guān)系為：
<div ――――――――――― position:relative; 不是參照物
<div―――――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
圖9
IE6的情況下，box2前面沒(méi)有兄弟節(jié)點(diǎn)，則margin-left的值會(huì)出現(xiàn)雙倍邊距，見(jiàn)圖10。
層級(jí)關(guān)系為：
<div ――――――――――― position:relative; 不是參照物
<div―――――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div―――――――-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖：
圖10
3.混合使用left、right、top和bottom屬性與margin屬性布局相對(duì)定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時(shí)使用，如果同一方向偏移，它們的值會(huì)產(chǎn)生累加的效果，見(jiàn)圖11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值為120px-20px=100px;
層級(jí)關(guān)系為：
<div ―――――――――――-不是參照物
<div―――――――――?不是參照物
<div―――――――?position:relative; 參照物
<div box1
<div box2 ―――position:absolute; margin-left:120px; left:-20px; top:50px;
<div box3
效果圖：
圖11
b.絕對(duì)定位和相對(duì)定位的累加加效果不同，如果top、bottom、left、right屬性和margin屬性偏移的方向相反，top、bottom、left、right屬性值有效，反方向的margin屬性值無(wú)效，見(jiàn)圖12。
層級(jí)關(guān)系為：
<div ―――――――――――-不是參照物
<div―――――――――?不是參照物
<div―――――――?position:relative; 參照物
<div box1
<div box2 ―――position:absolute; margin-left:120px; right:10px; top:50px;
<div box3
效果圖：
圖12
總結(jié)：
- 相對(duì)定位的元素不會(huì)脫離文檔流，占用文檔流的空間，Left; Right; Top和Bottom屬性與margin屬性混合使用會(huì)產(chǎn)生累加效果。
- 絕對(duì)定位的元素脫離文檔流，偏移不影響文檔流中的其它元素，Left; Right; Top和Bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無(wú)效。
- 絕對(duì)定位的元素以最近的定位祖先元素為參照物。
<div id=”header”></div>
<div id=”center”></div>
<div id=”footer”></div>
<div id=”header”>
<div id=”title”>這里是網(wǎng)站的標(biāo)題</div>
<div id=”nav”>這里是網(wǎng)站導(dǎo)航欄</div>
</div>
那如何才是最優(yōu)化，最科學(xué)的寫(xiě)法呢？
我們選用其他的Xhtml代碼來(lái)取代上面的div，那又如何選擇呢？？
首先標(biāo)題的選擇――我們知道在xhtml中h1-h6是表示標(biāo)題的，而header里的標(biāo)題在全頁(yè)來(lái)看是最重要的，我們選擇h1來(lái)表示標(biāo)題是順其自然的。
其次導(dǎo)航欄的選擇――導(dǎo)航欄是由多個(gè)小塊內(nèi)容組成，我們選擇無(wú)序列表
<ul><li></li></ul>
來(lái)表示菜單最合適不過(guò)了！最后以上的內(nèi)容可以?xún)?yōu)化成：
<div id=”header”>
<h1>這里是網(wǎng)站的標(biāo)題</h1>
<ul>
<li>這里是網(wǎng)站導(dǎo)航欄</li>
</ul>
</div>
一直也搞不清楚px與em之間的關(guān)系和特點(diǎn)，看過(guò)95%的中國(guó)網(wǎng)站需要重寫(xiě)CSS以后后確實(shí)收獲很大。平時(shí)都是用px來(lái)定義字體，所以無(wú)法用瀏覽器字體放大的功能，而國(guó)外大多數(shù)網(wǎng)站都可以在IE下使用。因?yàn)?
1. IE無(wú)法調(diào)整那些使用px作為單位的字體大??；
2. 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em作為字體單位；
3. Firefox能夠調(diào)整px和em，但是96%以上的中國(guó)網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。(引自CSS2.0手冊(cè))
em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊(cè))
任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡(jiǎn)化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。
em有如下特點(diǎn)：
1. em的值并不是固定的；
2. em會(huì)繼承父級(jí)元素的字體大小。
所以我們?cè)趯?xiě)CSS的時(shí)候，需要注意兩點(diǎn)：
1. body選擇器中聲明Font-size=62.5%；
2. 將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位；
3. 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說(shuō)你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。
但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點(diǎn)。這個(gè)問(wèn)題Jorux已經(jīng)解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時(shí)，對(duì)于浮點(diǎn)的取值精確度有限。不知道有沒(méi)有其他的解釋。
]]>實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)背景變色的方法有很多，今天我們介紹的是用CSS+DIV實(shí)現(xiàn)的方法。
方法一
| 以下為引用的內(nèi)容： #div:hover{background:#000000;} |
解釋:鼠標(biāo)經(jīng)過(guò)id為div的元素時(shí)背景變色
IE6.0、Firefox2.0、Opera 9.23都不行
方法二
| 以下為引用的內(nèi)容： <div onmouseover=”this.style.backgroundColor=’#F4F9FD'” onmouseout=”this.style.backgroundColor=’#FFFFFF'”></div> |
方法三:
| 以下為引用的內(nèi)容： <style> <div class=”d_out” onmouseover=”this.className=’d_over'” onmouseout=”this.className=’d_out'”>哈哈哈哈哈</div> |
<a>的標(biāo)簽是可以，可是，這樣子會(huì)導(dǎo)致其它帶有<a>標(biāo)簽的也跟著變色。
一般<a>是用來(lái)定義鏈接的樣式的，并不是定義某個(gè)區(qū)域的?，F(xiàn)在常用的div+css的網(wǎng)頁(yè)用，div就是表示區(qū)域的意思，還是喜歡用這種，當(dāng)然用table的話，會(huì)有更簡(jiǎn)單的方法。
]]>1.DOCTYPE 影響 CSS 處理
2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行
3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式
6.div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法： div{margin:30px!important;margin:28px;}注意這兩個(gè)margin的順序一定不能寫(xiě)反，據(jù)阿捷的說(shuō)法! important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣： div{maring:30px;margin:28px}重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行，所以不可以只寫(xiě)margin:XXpx! important;
11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義 ul{margin:0;padding:0;}就能解決大部分問(wèn)題
注意事項(xiàng)：
1、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;) <#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。
這段代碼在IE中毫無(wú)問(wèn)題，問(wèn)題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。
在 <#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>之間加上 <#div class=”clear”></#div>這個(gè)div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤剑冶仨毰c兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可： .clear{
clear:both;}此外，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無(wú)效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性，用zoom:1;可以做到，這樣就達(dá)到了兼容。
例如某一個(gè)wrapper如下定義： .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的問(wèn)題
設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。
解決方案是在這個(gè)div里面加上display:inline;
例如：
<#div id=”imfloat”></#div>
相應(yīng)的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
3、關(guān)于容器的包涵關(guān)系
很多時(shí)候，尤其是容器內(nèi)有平行布局，例如兩、三個(gè)float的div時(shí)，寬度很容易出現(xiàn)問(wèn)題。在IE中，外層的寬度會(huì)被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級(jí)的精度。
4、關(guān)于高度的問(wèn)題
如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_(kāi)，不知道具體怎么回事）
5、最狠的手段 – !important;
如果實(shí)在沒(méi)有辦法解決一些細(xì)節(jié)問(wèn)題,可以用這個(gè)方法.FF對(duì)于”!important”會(huì)自動(dòng)優(yōu)先解析,然而IE則會(huì)忽略.如下 .tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經(jīng)提過(guò)
IE7.0出來(lái)了，對(duì)CSS的支持又有新問(wèn)題。瀏覽器多了，網(wǎng)頁(yè)兼容性更差了，疲于奔命的還是我們 ，為解決IE7.0的兼容問(wèn)題，找來(lái)了下面這篇文章：
現(xiàn)在我大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，但是ie7對(duì)!important可以正確解釋?zhuān)瑫?huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！搜索了一下，找到一個(gè)針對(duì)IE7不錯(cuò)的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了。
現(xiàn)在寫(xiě)一個(gè)CSS可以這樣：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999
]]>