overflow
版本：CSS2 兼容性：IE4+ NS6+ 繼承性：無(wú)
語(yǔ)法：
overflow : visible | auto | hidden | scroll
參數(shù)：
visible : 不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值，對(duì)象將被剪切為包含對(duì)象的window或frame的大小。并且clip屬性設(shè)置將失效
auto : 此為body對(duì)象和textarea的默認(rèn)值。在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條
hidden : 不顯示超過對(duì)象尺寸的內(nèi)容
scroll : 總是顯示滾動(dòng)條
說明：
檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。
設(shè)置textarea對(duì)象為hidden值將隱藏其滾動(dòng)條。
對(duì)于table來說，假如table-layout屬性設(shè)置為fixed，則td對(duì)象支持帶有默認(rèn)值為hidden的overflow屬性。如果設(shè)為hidden，scroll或者auto，那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible，將導(dǎo)致額外的文本溢出到右邊或左邊（視direction屬性設(shè)置而定）的單元格。
自IE5開始，此屬性在MAC平臺(tái)上可用。
對(duì)應(yīng)的腳本特性為overflow。
示例：
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
語(yǔ)法：
text-overflow : clip | ellipsis
參數(shù)：
clip : 不顯示省略標(biāo)記（…），而是簡(jiǎn)單的裁切
ellipsis : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）
說明：
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（…）標(biāo)示對(duì)象內(nèi)文本的溢出。
對(duì)應(yīng)的腳本特性為textOverflow。請(qǐng)參閱我編寫的其他書目。
示例：
div { text-overflow : clip; }
代碼：
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <title>無(wú)標(biāo)題文檔</title> </head> <body> <table width=”100%” border=”1″ cellspacing=”2″ cellpadding=”2″ style=”table-layout:fixed”> <tr> <td width=”10%”>s</td> <td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td> <td width=”30%”> </td> </tr> <tr> <td>d</td> <td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td> <td> </td> </tr> </table> </body> </html> |
使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規(guī)則如下：
顏色
16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤梢钥s寫一半，例如：
#000000可以縮寫為#000;#336699可以縮寫為#369;
盒尺寸
通常有下面四種書寫方法:
- property:value1; 表示所有邊都是一個(gè)值value1；
- property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
- property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
- property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left
方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
邊框(border)
邊框的屬性如下：
- border-width:1px;
- border-style:solid;
- border-color:#000;
可以縮寫為一句：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:0 0;
可以縮寫為一句：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;
可以縮寫為一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個(gè)值。
列表(lists)
取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫list-style:none;,
list的屬性如下:
- list-style-type:square;
- list-style-position:inside;
- list-style-image:url(image.gif);
可以縮寫為一句：list-style:square inside url(image.gif);
]]>在設(shè)計(jì)網(wǎng)絡(luò)應(yīng)用時(shí)，您必須決定如何編輯字體。使用CSS時(shí)存在大量選項(xiàng)，每個(gè)開發(fā)者都有自己的喜好。本文主要討論字體大小和網(wǎng)絡(luò)應(yīng)用內(nèi)的操作。
字體大小
CSS2規(guī)范根據(jù)長(zhǎng)度――水平和垂直尺寸――來定義字體。這個(gè)長(zhǎng)度為一個(gè)數(shù)值，前面可能帶一個(gè)可選的加(+)或減(-)標(biāo)記符。另外，該數(shù)值后可能有一個(gè)可選的單位標(biāo)識(shí)符。
另外，CSS2規(guī)范定義了兩個(gè)單位類型:絕對(duì)單位和相對(duì)單位。絕對(duì)值指定單位，而相對(duì)單位指定一個(gè)與另一個(gè)值成比例的值。下面的列表列出了相對(duì)單位標(biāo)識(shí)符:
em:元素字體的高度。它與使用該字體的元素的字體大小屬性計(jì)算值相等。當(dāng)它出現(xiàn)在字體大小屬性值本身中時(shí)，會(huì)出現(xiàn)異常，這時(shí)它指母元素的字體大小。
ex(x-高度):CSS2規(guī)范將它描述為小寫字母x的高度。
px(像素):它與背景或屏幕的分辨率有關(guān)。根據(jù)顯示器分辨率輸出不同像素，由于用戶的喜好不同，顯示器的分辨率可能會(huì)有很大差異。
下面是有效的絕對(duì)單位標(biāo)識(shí)符:
in(英寸)
cm(厘米)
mm(毫米)
pt(點(diǎn)，1點(diǎn)=1/72英寸)
pc(12點(diǎn)活字，1pc=12點(diǎn))
測(cè)量絕對(duì)大小的另一種方法是使用衡量一個(gè)值的比例因數(shù)，應(yīng)用以下關(guān)鍵字:最小、較小、小、中、大、較大和最小。中為基值，變小就減去一個(gè)因數(shù)，變大就增加一個(gè)因數(shù)，等等。CSS2規(guī)范定義的比例因數(shù)為1.2，這個(gè)值也可能依瀏覽器而變化。
還可以應(yīng)用百分比值來格式化文本。百分比值是一個(gè)可選的標(biāo)記符，即數(shù)字后帶有一個(gè)百分比符號(hào)(%)。百分比值總是與另一個(gè)值成比例。就字體而言，它與網(wǎng)頁(yè)的基本字體大小成一定比例。
如您所見，有許多方法可完成呈現(xiàn)文本這個(gè)看似簡(jiǎn)單的任務(wù)。下面的HTML格式文本(在段落元素中)應(yīng)用了各種單位標(biāo)識(shí)符。其中所有的值都相等，并假定以72dpi進(jìn)行顯示。
以下是引用片段：
<html><head>
<title>Font Sizing – equal values</title>
</head><body>
<p style=”font-size: 36pt;”>Point</p>
<p style=”font-size: 3pc;”>Pica</p>
<p style=”font-size: 0.5in;”>Inches</p>
<p style=”font-size: 1.27cm;”>Centimeters</p>
<p style=”font-size: 12.7mm;”>Millimeters</p>
<p style=”font-size: 300%;”>Percentage</p>
</body></html>
您可以在這個(gè)列表中增加像素值，但它的值要依環(huán)境而定。例如，我的分辨率為1280X1024的手提電腦將顯示與在上表中使用50像素值一致的文本。
仔細(xì)閱讀前面提到的CSS2規(guī)范，可以獲得更多字體大小方面的知識(shí)。現(xiàn)在我將討論如何決定在網(wǎng)絡(luò)應(yīng)用中使用哪種方法。
選擇哪一種方法
在CSS中有許多和字體有關(guān)的選項(xiàng)，但哪一種最適合在您的網(wǎng)絡(luò)應(yīng)用中使用呢?絕對(duì)大小有許多缺陷，特別是在一致性、靈活性與訪問性方面存在問題。與絕對(duì)字體大小相比，任何視力有缺陷的用戶可使用相對(duì)字體大小來擴(kuò)大頁(yè)面中的文字，這樣更便于閱讀。因此，開發(fā)者經(jīng)常使用相對(duì)大小。
讓我們來詳細(xì)了解一下相對(duì)大小:
像素是最通用的大小值。多數(shù)瀏覽器都支持它，但也并非總是如此。瀏覽器常常將像素當(dāng)作屏幕像素而非CSS像素來處理。像素的一個(gè)缺點(diǎn)在于，它忽略或否定用戶的喜好，且不能在IE中調(diào)整大小。
許多開發(fā)者偏愛用點(diǎn)來衡量字體大小，但點(diǎn)主要用于桌面印刷系統(tǒng)，不方便移植到網(wǎng)絡(luò)中。在呈現(xiàn)文本時(shí)，操作系統(tǒng)或?yàn)g覽器默認(rèn)使用像素。
最常用的方法是使用em或百分比大小。EM可在所有支持調(diào)整尺寸的瀏覽器中進(jìn)行調(diào)整。Em還與用戶偏愛的默認(rèn)大小有關(guān)。在IE中應(yīng)用em的結(jié)果難以預(yù)料。在IE中最好使用百分比來設(shè)定文本大小。
下面的例子結(jié)合使用em和百分比值來對(duì)文本進(jìn)行格式化。基本文本用百分比值來設(shè)置，然后用em來進(jìn)行調(diào)整。
以下是引用片段：
<html><head>
<title>Display Test</title>
<style type=”text/css”>
body {font: Sans Serif, Arial; font-size: 110 %}
</style></head><body>
<p style=”font-size: 1.0em;”>Basic text.</p>
<p style=”font-size: 1.5em;”>Larger text.</p>
<p style=”font-size: 0.5em;”>smaller text.</p>
</body></html>
全都與外觀有關(guān)
現(xiàn)有的標(biāo)準(zhǔn)提供許多格式化并呈現(xiàn)網(wǎng)絡(luò)應(yīng)用中的文本的方法。開發(fā)者可以很方便地將文本分解成相對(duì)和絕對(duì)標(biāo)識(shí)符。關(guān)鍵在于保持一致，并徹底檢測(cè)解決方案。
]]>blankzheng的blog：http://www.planabc.net/
margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。他是元素盒模型（box model）的基礎(chǔ)屬性。
一、margin的基本特性
margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來設(shè)置box的margin area。屬性margin可以用來同時(shí)設(shè)置box的四邊外邊距，而其他的margin屬性只能設(shè)置其自各的外邊距。
margin屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。
或許有朋友對(duì)非置換元素（non-replaced element）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replaced element），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：
引用:
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
從定義中我們可以理解到，置換元素（replaced element）主要是指img，input，textarea，select，object等這類默認(rèn)就有CSS格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replaced element）就是除了img，input，textarea，select，object等置換元素以外的元素。
margin始終是透明的。
二、margin的基本寫法
外邊距的margin-width的值類型有：auto | length | percentage
percentage：百分比是由被應(yīng)用box的containing block（注：一個(gè)元素的containing block是該元素產(chǎn)生的box(es)在計(jì)算位置和大小時(shí)參考的一個(gè)矩形，詳細(xì)閱讀可看：《Containing Block》）的大小所決定。對(duì)于margin-top和margin-bottom也同樣成立。
margin的默認(rèn)值為0，并且margin支持負(fù)值。
上面我們?cè)岬綄傩詍argin可以用來同時(shí)指定box的四邊外邊距。如果屬性margin有四個(gè)值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開始，按照順時(shí)針的順序圍繞元素。表達(dá)式如下：
margin：top right bottom left；
四個(gè)數(shù)值中間以空格分隔。效果等同于：
margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;
并且規(guī)范還提供了省略的數(shù)值寫法，基本原則如下：
引用:
1.如果沒有l(wèi)eft值，則使用right代替；
2.如果沒有bottom值，則使用top代替；
3.如果沒有right值，則使用top值代替。
根據(jù)這些基本原則，我們可以有三種省略方式，但不管怎樣省略margin的數(shù)值都會(huì)大于等于一個(gè)，而margin的默認(rèn)數(shù)值是從top開始至left結(jié)束，那么對(duì)于省略的具體情況，我們可以從left反推理回去。
1.如果margin只有三個(gè)值，按照值的順序?yàn)閙argin：top right bottom; 缺少了left，根據(jù)原則，則left的值有right來代替。
margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;
2.如果margin只有兩個(gè)值，按照值的順序?yàn)閙argin：top right; 缺少了bottom和left，根據(jù)原則left的值由right來代替，bottm的值由top來代替。
margin:10px 20px;就等于margin:10px 20px 10px 20px;
3.如果margin只有一個(gè)值，按照值的順序?yàn)閙argin:top; 缺少了bottom、left和right，根據(jù)原則left的值由right來代替，bottom的值由top來代替，right的值右top來代替，也就是說left的值也由top來代替。
margin:10px;就等于margin:10px 10px 10px 10px;
三、margin的解析邏輯
目前我們已經(jīng)了解到了margin的基本特性和基本寫法，但對(duì)元素margin的基本解析邏輯還是很模糊，到底margin的top、right、bottom、left都是以什么為基準(zhǔn)來促使box model形成。為了形象，易懂的對(duì)margin的邏輯進(jìn)行說明，下面講解的過程中，將引入W3C上沒有的參考線的說法。何謂參考線？參考線就是margin移動(dòng)的基準(zhǔn)點(diǎn)，此基準(zhǔn)點(diǎn)相對(duì)于box是靜止的。而margin的數(shù)值，就是box相對(duì)于參考線的位移量。
在margin中top、right、bottom、left的參考線并不一致為一類，而是分為了兩類參考線，top和left的參考線屬于一類，right和bottom的參考線屬于另一類。那他們到底各以什么為參考線呢？top以containing block的content上邊或者垂直上方相連元素margin的下邊為參考線垂直向下位移；left以containing block的content左邊或者水平左方相連元素margin的右邊為參考線水平向右位移。right以元素本身的border右邊為參考線水平向右位移；bottom以元素本身的border下邊為參考線垂直向下位移。從上我們可以看到top和left都是以外元素為參考，而right和bottom以本元素為參考。上面的位移方向是指margin數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。
或許理論聽起來比較枯燥，我們舉例說明一下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>無(wú)標(biāo)題文檔</title>
<style type=”text/css”>
div {width:200px; height:200px; background:#ccc;}
</style>
</head>
<body>
<div>外邊距的margin-width的值類型有：auto | length | percentage</div>
</body>
</html>
如上代碼，很簡(jiǎn)單，為了方便我們看到效果，我們給div設(shè)置了寬度和高度以及背景色。
現(xiàn)在我們給div的樣式加上margin屬性，比如：
margin:-10px 20px -30px 40px;
這時(shí)候margin的解析邏輯是怎樣的呢？首先我們要搞清div的和周邊元素的關(guān)系，div沒有相連元素，而此時(shí)div的containing block是body產(chǎn)生的block box。則根據(jù)上面介紹的參考線原理，div的左外邊距以containing block的content左邊為參考線，及此時(shí)以body的content左邊為參考線進(jìn)行水平向右位移，位移的大小為40px，同理，上邊距以body的content上邊為參考線進(jìn)行垂直向上位移10px（負(fù)值和正值的方向相反），下邊距依照現(xiàn)在div的borer下邊（此時(shí)的div已經(jīng)經(jīng)過上邊距位移過了）垂直向上位移30px（此時(shí)，margin不會(huì)改變box的border內(nèi)的物理大小，但會(huì)改變box的邏輯大小，即：以此box的margin的下邊為參考的元素，不是從box的物理位置開始的，而是從邏輯位置開始），右邊距依照現(xiàn)在div的borer右邊（此時(shí)的div已經(jīng)經(jīng)過左邊距位移過了）水平向右位移20px。或許有朋友問你分析的順序怎么和margin表達(dá)式中出現(xiàn)的順序不一樣？如果按照margin表達(dá)式中出現(xiàn)的順序來分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒有按照表達(dá)式的順序來分析。
用margin最后的顯示大小到底是怎么樣的，或許有朋友也比較疑惑，我暫時(shí)用邏輯大小和物理大小來區(qū)分（其實(shí)上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去margin，也就是包含border以內(nèi)的box大小，而邏輯大小，則是box通過margin解析規(guī)則解析后得到的大小（這或許可以解釋為什么IE5會(huì)錯(cuò)誤解析盒模型），當(dāng)邏輯大小小于物理大小時(shí)，則不會(huì)影響實(shí)際box的顯示，也就是說，此時(shí)顯示的是box的物理大小，而當(dāng)邏輯大小大于物理大小時(shí)，則此時(shí)顯示邏輯大小。這僅對(duì)元素本身有效，對(duì)于其他相關(guān)元素，他們則只以margin的邏輯大小為準(zhǔn)則，進(jìn)行布局。
]]>原文：http://andymao.com/andy/post/76.html
屏蔽IE瀏覽器（也就是IE下不顯示）
*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
這里select是選擇符，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。
僅IE7識(shí)別
*+html {…}
當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)HACK。
IE6及IE6以下識(shí)別
* html {…}
這個(gè)地方要特別注意很多地主都寫了是IE6的HACK其實(shí)IE5.x同樣可以識(shí)別這個(gè)HACK。其它瀏覽器不識(shí)別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅IE6不識(shí)別
select { display /*IE6不識(shí)別*/:none;}
這里主要是通過CSS注釋分開一個(gè)屬性與值，流釋在冒號(hào)前。
僅IE6與IE5不識(shí)別
select/**/ { display /*IE6,IE5不識(shí)別*/:none;}
這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。
僅IE5不識(shí)別
select/*IE5不識(shí)別*/ { display:none;}
這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別
盒模型解決方法
selct {width:IE5.x寬度; voice-family :”\”}\””; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點(diǎn)要明確。
清除浮動(dòng)
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問題 。
截字省略號(hào)
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。只是目前Firefox并不支持。
只有Opera識(shí)別
@media all and (min-width: 0px){ select {……} }
針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。
以上都是寫CSS中的一些HACK，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導(dǎo)入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。
IE5.x的過濾器，只有IE5.x可見
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */
IE5/MAC的過濾器，一般用不著
[Copy to clipboard] [ – ]CODE:
/*\*//*/
@import “ie5mac.css”;
/**/
IE的if條件Hack
<!–[if IE]> Only IE <![endif]–>
所有的IE可識(shí)別
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以識(shí)別
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包換IE5.5都可以識(shí)別
<!–[if lt IE 6]> Only IE 6- <![endif]–>
僅IE6可識(shí)別
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可識(shí)別
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
僅IE7可識(shí)別
以上內(nèi)容可能并不全面，歡迎大家能和我一起把這些技巧都匯總起來，為以后工作的查詢提供一個(gè)方便，同時(shí)在這里感謝那些研究出這些HACK的作者們。
]]>CSS對(duì)瀏覽器的兼容性有時(shí)讓人很頭疼,或許當(dāng)你了解當(dāng)中的技巧跟原理,就會(huì)覺得也不是難事,從網(wǎng)上收集了IE7,6與Fireofx的兼容性處理方法并整理了一下.對(duì)于web2.0的過度,請(qǐng)盡量用xhtml格式寫代碼,而且DOCTYPE 影響 CSS 處理,作為W3C的標(biāo)準(zhǔn),一定要加 DOCTYPE聲名.
CSS技巧
1.div的垂直居中問題 vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
2. margin加倍的問題 設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline; 例如： <#div id=”imfloat”> 相應(yīng)的css為 #IamFloat{ float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/}
3.浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline; //使浮動(dòng)忽略} 這里細(xì)說一下block與inline兩個(gè)元素：block元素的特點(diǎn)是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是,和其他元素在同一行上,不可控制(內(nèi)嵌元素); #box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的效果 diplay:table;
4 IE與寬度和高度的問題 IE 不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話，IE下面根本等于沒有設(shè)置寬度和高度。 比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問題，可以這樣： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.頁(yè)面的最小寬度 min -width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個(gè)<div> 放到 <body> 標(biāo)簽下，然后為div指定一個(gè)類, 然后CSS這樣設(shè)計(jì)： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );} 第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度。
6.DIV浮動(dòng)IE文本產(chǎn)生3象素的bug 左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //這句是關(guān)鍵} <div id=”box”> <div id=”left”></div> <div id=”right”></div> </div>
7.IE捉迷藏的問題 當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。 有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。 解決辦法：對(duì)#layout使用line-height屬性 或者給#layout使用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。
8.float的div閉合;清除浮動(dòng);自適應(yīng)高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為 float:left;) 這段代碼在IE中毫無(wú)問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個(gè)div一定要注意位置，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。 并且將clear這種樣式定義為為如下即可： .clear{ clear:both;}
②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden; 當(dāng)包含float的 box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無(wú)效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬(wàn)惡的IE啊！)用zoom:1;可以做到，這樣就達(dá)到了兼容。 例如某一個(gè)wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③對(duì)于排版,我們用得最多的css描述可能就是float:left.有的時(shí)候我們需要在n欄的float div后面做一個(gè)統(tǒng)一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會(huì)發(fā)現(xiàn)隨著left center right的向下拉長(zhǎng),而 page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一個(gè)float left而寬度是100%的DIV解決之
④萬(wàn)能float 閉合(非常重要!) 關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽. /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設(shè)置：.hackbox{ display:table; //將對(duì)象作為塊元素級(jí)的表格顯示}
11.高度不適應(yīng) 高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin 或paddign 時(shí)。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id=”box”> <p>p對(duì)象中的內(nèi)容</p> </div> 解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
12 .IE6下為什么圖片下有空隙產(chǎn)生 解決這個(gè)BUG的方法也有很多,可以是改變html的排版,或者設(shè)置img 為display:block 或者設(shè)置vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決.
13.如何對(duì)齊文本與文本輸入框 加上 vertical-align:middle; <style type=”text/css”> <!– input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } –> </style>
14.web標(biāo)準(zhǔn)中定義id與class有什么區(qū)別嗎 一.web標(biāo)準(zhǔn)中是不容許重復(fù)ID的,比如 div id=”aa” 不容許重復(fù)2次,而class 定義的是類,理論上可以無(wú)限重復(fù), 這樣需要多次引用的定義便可以使用他. 二.屬性的優(yōu)先級(jí)問題 ID 的優(yōu)先級(jí)要高于class,看上面的例子 三.方便JS等客戶端腳本,如果在頁(yè)面中要對(duì)某個(gè)對(duì)象進(jìn)行腳本操作,那么可以給他定義一個(gè)ID,否則只能利用遍歷頁(yè)面元素加上指定特定屬性來找到它,這是相對(duì)浪費(fèi)時(shí)間資源,遠(yuǎn)遠(yuǎn)不如一個(gè)ID來得簡(jiǎn)單.
15. LI中內(nèi)容超過長(zhǎng)度后以省略號(hào)顯示的方法 此方法適用與IE與OP瀏覽器 <style type=”text/css”> <!– li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } –> </style>
16.為什么web標(biāo)準(zhǔn)中IE無(wú)法設(shè)置滾動(dòng)條顏色了 解決辦法是將body換成html <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <style type=”text/css”> <!– html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } –> </style>
17.為什么無(wú)法定義1px左右高度的容器 IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎么樣才能讓層顯示在FLASH之上呢 解決的辦法是給FLASH設(shè)置透明 <param name=”wmode” value=”transparent” />
19.怎樣使一個(gè)層垂直居中于瀏覽器中 這里我們使用百分比絕對(duì)定位,與外補(bǔ)丁負(fù)值的方法,負(fù)值的大小為其自身寬度高度除以二 <style type=”text/css”> <!– div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } –> </style>
FF與IE
1. Div居中問題 div設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中，IE 不行，IE需要設(shè)定body居中，首先在父級(jí)元素定義text-algin: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中。
2.鏈接(a標(biāo)簽)的邊框與背景 a 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。
3.超鏈接訪問過后hover樣式就不出現(xiàn)的問題 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個(gè)問題,解決方法是改變CSS屬性的排列順序: L-V-H-A Code: <style type=”text/css”> <!– a:link {} a:visited {} a:hover {} a:active {} –> </style>
4. 游標(biāo)手指cursor cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以
5.UL的padding與margin ul標(biāo)簽在FF中默認(rèn)是有padding值的,而在IE中只有margin默認(rèn)有值,所以先定義 ul{margin:0;padding:0;}就能解決大部分問題
6. FORM標(biāo)簽 這個(gè)標(biāo)簽在IE中,將會(huì)自動(dòng)margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對(duì)上面兩個(gè)問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,所以后面就不會(huì)為這個(gè)頭疼了.
7. BOX模型解釋不一致問題 在FF和IE 中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;} 注意這兩個(gè) margin的順序一定不能寫反， important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣： div {maring:30px;margin:28px}重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug) p[id]{}div[id]{} 這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用.屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
9.最狠的手段 – !important; 如果實(shí)在沒有辦法解決一些細(xì)節(jié)問題,可以用這個(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)提過
10.IE,FF的默認(rèn)值問題 或許你一直在抱怨為什么要專門為IE和FF寫不同的CSS，為什么IE這樣讓人頭疼，然后一邊寫css，一邊咒罵那個(gè)可惡的M$ IE.其實(shí)對(duì)于css的標(biāo)準(zhǔn)支持方面，IE并沒有我們想象的那么可惡，關(guān)鍵在于IE和FF的默認(rèn)值不一樣而已，掌握了這個(gè)技巧，你會(huì)發(fā)現(xiàn)寫出兼容FF和IE的css并不是那么困難，或許對(duì)于簡(jiǎn)單的css，你完全可以不用”!important”這個(gè)東西了。 我們都知道，瀏覽器在顯示網(wǎng)頁(yè)的時(shí)候，都會(huì)根據(jù)網(wǎng)頁(yè)的 css樣式表來決定如何顯示，但是我們?cè)跇邮奖碇形幢貢?huì)將所有的元素都進(jìn)行了具體的描述，當(dāng)然也沒有必要那么做，所以對(duì)于那些沒有描述的屬性，瀏覽器將采用內(nèi)置默認(rèn)的方式來進(jìn)行顯示，譬如文字，如果你沒有在css中指定顏色，那么瀏覽器將采用黑色或者系統(tǒng)顏色來顯示，div或者其他元素的背景，如果在 css中沒有被指定，瀏覽器則將其設(shè)置為白色或者透明，等等其他未定義的樣式均如此。所以有很多東西出現(xiàn)FF和IE顯示不一樣的根本原因在于它們的默認(rèn)顯示不一樣，而這個(gè)默認(rèn)樣式該如何顯示我知道在w3中有沒有對(duì)應(yīng)的標(biāo)準(zhǔn)來進(jìn)行規(guī)定，因此對(duì)于這點(diǎn)也就別去怪罪IE了。
11.為什么FF下文本無(wú)法撐開容器的高度 標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義: { height:auto!important; height:200px; min-height:200px; }
12.FireFox下如何使連續(xù)長(zhǎng)字段自動(dòng)換行 眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入 的方法來解決 <style type=”text/css”> <!– div { width:300px; word-wrap:break-word; border:1px solid red; } –> </style> <div id=”ff”>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type=”text/javascrīpt”> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=””; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+” ”; strContent=strContent.substr(intLen,strContent.length); } strTemp+=” ”+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord(“ff”, 37); /* ]]> */ </scrīpt>
13.為什么IE6下容器的寬度和FF解釋不同呢 <?xml version=”1.0″ encoding=”gb2312″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <style type=”text/css”> <!– div { cursor:pointer; width:200px; height:200px; border:10px solid red } –> </style> <div ōnclick=”alert(this.offsetWidth)”>讓FireFox與IE兼容</div> 問題的差別在于容器的整體寬度有沒有將邊框（border）的寬度算在其內(nèi),這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導(dǎo)致的問題呢？大家把容器頂部的xml去掉就會(huì)發(fā)現(xiàn)原來問題出在這,頂部的申明觸發(fā)了IE的qurks mode,關(guān)于qurks mode、 standards mode的相關(guān)知識(shí),請(qǐng)參考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true
IE6,IE7,FF IE7.0 出來了，對(duì)CSS的支持又有新問題。瀏覽器多了，網(wǎng)頁(yè)兼容性更差了，疲于奔命的還是我們 ，為解決IE7.0的兼容問題，找來了下面這篇文章： 現(xiàn)在我大部分都是用!important來hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，但是ie7對(duì)!important可以正確解釋，會(huì)導(dǎo)致頁(yè)面沒按要求顯示！下面是三個(gè)瀏覽器的兼容性收集.
第一種，是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意順序。 這樣也屬于CSS HACK，不過沒有上面這樣簡(jiǎn)潔。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */
<!–其他瀏覽器 –> <link rel=”stylesheet” type=”text/css” href=”css.css” /> <!–[if IE 7]> <!– 適合于IE7 –> <link rel=”stylesheet” type=”text/css” href=”ie7.css” /> <![endif]–> <!–[if lte IE 6]> <!– 適合于IE6及一下 –> <link rel=”stylesheet” type=”text/css” href=”ie.css” /> <![endif]–>
第三種，css filter的辦法，以下為經(jīng)典從國(guó)外網(wǎng)站翻譯過來的。. 新建一個(gè)css樣式如下： #item { width: 200px; height: 200px; background: red; } 新建一個(gè)div,并使用前面定義的css的樣式： <div id=”item”>some text here</div> 在body表現(xiàn)這里加入lang屬性,中文為zh： <body lang=”en”> 現(xiàn)在對(duì)div元素再定義一個(gè)樣式： *:lang(en) #item{ background:green !important; } 這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對(duì)這句話不會(huì)有任何作用,于是也達(dá)到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式： #item:empty { background: green !important } :empty選擇器為css3的規(guī)范,盡管safari并不支持此規(guī)范,但是還是會(huì)選擇此元素,不管是否此元素存在,現(xiàn)在綠色會(huì)現(xiàn)在在除ie各版本以外的瀏覽器上。 對(duì)IE6和FF的兼容可以考慮以前的!important 個(gè)人比較喜歡用
]]>作為一名網(wǎng)站開發(fā)WEB前端工程師，對(duì)自己開發(fā)的網(wǎng)站項(xiàng)目應(yīng)該盡可能地對(duì)其性能進(jìn)行優(yōu)化，現(xiàn)在互聯(lián)網(wǎng)上搜索到的網(wǎng)站性能優(yōu)化多是翻譯轉(zhuǎn)載自Yahoo14條或34條。Yahoo的優(yōu)化建議關(guān)注在大的方面，下面，W3C Group為大家呈現(xiàn)WEB前端開發(fā)高性能優(yōu)化部分之JavaScript的優(yōu)化細(xì)節(jié)！
一、避免出現(xiàn)腳本失控
不論什么腳本，在任何時(shí)間、任何瀏覽器上執(zhí)行，都不應(yīng)該超過100毫秒。如果實(shí)際執(zhí)行的時(shí)間長(zhǎng)于這個(gè)底限，一定要將進(jìn)程分解成若干更小的代碼段。
腳本失控基本上有以下四個(gè)方面的原因：
1. 在循環(huán)中執(zhí)行了太多的操作
解決這個(gè)問題的訣竅就是用下面這兩個(gè)問題來評(píng)估每個(gè)循環(huán)：
- 這個(gè)循環(huán)必須要同步執(zhí)行么？
- 循環(huán)里面的數(shù)據(jù)，必須要按順序執(zhí)行么？
如果1和2都可以否定，那么建議使用setTimeout方式將循環(huán)體切分成小塊進(jìn)行異步處理
將循環(huán)中的定義變量及初始化操作放到循環(huán)外。參見：http://www.w3cgroup.com/article.asp?id=111
2. 臃腫的函數(shù)體
在JavaScript中，我們應(yīng)該盡可能的用局部變量來代替全局變量!
理解JavaScript作用域鏈。參見：http://www.jslab.org.cn/?tag=ScopeChainAndClosure
理解原型鏈。參見：http://www.jslab.org.cn/?tag=prototypeChain
3. 過多的遞歸
使用迭代方式替代遞歸，采用memoization技術(shù)優(yōu)化遞歸
斐波那契數(shù)列的遞歸算法優(yōu)化，參見：http://www.jslab.org.cn/?tag=Memoization
4. 過多的DOM調(diào)用
在Web開發(fā)中，JavaScript的一個(gè)很重要的作用就是對(duì)DOM進(jìn)行操作。可你知道么？對(duì)DOM的操作是非常昂貴的，因?yàn)檫@會(huì)導(dǎo)致瀏覽器執(zhí)行回流（reflow）操作。而執(zhí)行了過多的回流操作，你就會(huì)發(fā)現(xiàn)自己的網(wǎng)站變得越來越慢了。我們應(yīng)該盡可能的減少DOM操作。
回流操作主要會(huì)發(fā)生在幾種情況下：
- 改變窗體大小
- 更改字體
- 添加移除stylesheet塊
- 內(nèi)容改變哪怕是輸入框輸入文字
- CSS虛類被觸發(fā)如 :hover
- 更改元素的className
- 當(dāng)對(duì)DOM節(jié)點(diǎn)執(zhí)行新增或者刪除操作或內(nèi)容更改時(shí)。
- 動(dòng)態(tài)設(shè)置一個(gè)style樣式時(shí)（比如element.style.width=”10px”）。
- 當(dāng)獲取一個(gè)必須經(jīng)過計(jì)算的尺寸值時(shí)，比如訪問offsetWidth、clientHeight或者其他需要經(jīng)過計(jì)算的CSS值（在兼容DOM的瀏覽器中，可以通過getComputedStyle函數(shù)獲取；在IE中，可以通過currentStyle屬性獲取）。
解決問題的關(guān)鍵，就是限制通過DOM操作所引發(fā)回流的次數(shù):
1.在對(duì)當(dāng)前DOM進(jìn)行操作之前，盡可能多的做一些準(zhǔn)備工作，保證N次創(chuàng)建，1次寫入。
2.在對(duì)DOM操作之前，把要操作的元素，先從當(dāng)前DOM結(jié)構(gòu)中刪除：
- 通過removeChild()或者replaceChild()實(shí)現(xiàn)真正意義上的刪除。
- 設(shè)置該元素的display樣式為“none”。
修改操作完成后，將上面這個(gè)過程反轉(zhuǎn)過來，建議使用第2種方式。
3.CSS部分
另外一個(gè)經(jīng)常引起回流操作的情況是通過style屬性對(duì)元素的外觀進(jìn)行修改，如element.style.backgroundColor = “blue”;
每次修改元素的style屬性，都肯定會(huì)觸發(fā)回流操作，要解決這個(gè)問題可以：
- 使用更改className的方式替換style.xxx=xxx的方式。
- 使用style.cssText = ”;一次寫入樣式。
- 避免設(shè)置過多的行內(nèi)樣式
- 添加的結(jié)構(gòu)外元素盡量設(shè)置它們的位置為fixed或absolute
- 避免使用表格來布局
- 避免在CSS中使用JavaScript expressions(IE only)
4.將獲取的DOM數(shù)據(jù)緩存起來。這種方法，對(duì)獲取那些會(huì)觸發(fā)回流操作的屬性（比如offsetWidth等）尤為重要。
5.當(dāng)對(duì)HTMLCollection對(duì)象進(jìn)行操作時(shí)，應(yīng)該將訪問的次數(shù)盡可能的降至最低，最簡(jiǎn)單的，你可以將length屬性緩存在一個(gè)本地變量中，這樣就能大幅度的提高循環(huán)的效率。
二、避免大字符串字面量對(duì)象操作，如 字符串.lenth，盡量轉(zhuǎn)換為new String(字符串)后再進(jìn)行操作
三、在做字符查找替換等操作時(shí)善用正則表達(dá)式
快速掌握ECMAScript正則表達(dá)式。參見：http://www.w3cgroup.com/article.asp?id=202
四、減少語(yǔ)句，利用運(yùn)算符優(yōu)先級(jí)實(shí)現(xiàn)if else表達(dá)式，使用三元表達(dá)式，使用連續(xù)表達(dá)式（看情況，將損失程序可讀性）
利用運(yùn)算符優(yōu)先級(jí)實(shí)現(xiàn)if else表達(dá)式參見：http://www.w3cgroup.com/article.asp?id=131
五、將CSS，JS文件合并到一個(gè)文件（非BT愛好者還是不要玩了^_^）
參見：http://www.w3cgroup.com/article.asp?id=29
六、避免Javascript事件綁定出現(xiàn)內(nèi)存泄漏
“These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model).” Microsoft GPDE Team Blog
參見：http://www.w3cgroup.com/article.asp?id=207
七、使用WEB Workers技術(shù)（支持html5的瀏覽器）
Web Workers為JavaScript提供了一種能在后臺(tái)進(jìn)程中運(yùn)行的方法，Web Workers進(jìn)程能夠在不影響用戶界面的情況下處理任務(wù)。
參見：http://www.w3cgroup.com/article.asp?id=242
八、Y!14條（14 Rules for Faster-Loading Web Sites）
- Rule 1 – Make Fewer HTTP Requests
- Rule 2 – Use a Content Delivery Network (Server端)
- Rule 3 – Add an Expires Header (Server端)
- Rule 4 – Gzip Components (Server端)
- Rule 5 – Put Stylesheets at the Top
- Rule 6 – Put Scripts at the Bottom
- Rule 7 – Avoid CSS Expressions
- Rule 8 – Make JavaScript and CSS External
- Rule 9 – Reduce DNS Lookups (Server端)
- Rule 10 – Minify JavaScript
- Rule 11 – Avoid Redirects (Server端)
- Rule 12 – Remove Duplicate Scripts
- Rule 13 – Configure ETags (Server端)
- Rule 14 – Make AJAX Cacheable
- Rule 15 – Use Iframes Wisely
參見：http://www.w3cgroup.com/article.asp?id=97
九、微軟早期的DHTML優(yōu)化建議
- 使用數(shù)組push替代字符串累加
原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處http://www.w3cgroup.com/article.asp?id=255
]]>譯自：The CSS Overflow Property
版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，多謝！！
根據(jù)CSS的盒模型概念，頁(yè)面中的每個(gè)元素，都是一個(gè)矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來控制。對(duì)于行為，我的意思是當(dāng)盒子內(nèi)外的內(nèi)容改變的時(shí)候，它如何處理。比如，如果你沒有設(shè)置一個(gè)盒子的高度，該盒子的高度將會(huì)根據(jù)它容納內(nèi)容的需要而增長(zhǎng)。但是當(dāng)你給一個(gè)盒子指定了一個(gè)高度或?qū)挾榷锩娴膬?nèi)容超出的時(shí)候會(huì)發(fā)生什么？這就是該添加CSS的overflow屬性的時(shí)候了，它允許你設(shè)定該種情況下如何處理。
overflow屬性有四個(gè)值：visible (默認(rèn)), hidden, scroll, 和auto。同樣有兩個(gè)overflow的姐妹屬性overflow-y 和overflow-x，它們很少被采用。
讓我們分別看一下這幾個(gè)值，并討論一寫共同用法和技巧。
Visible
如果你不設(shè)置overflow屬性，則默認(rèn)的overflow屬性值就是visible。所以一般而言，并沒有什么理由特別的設(shè)定overflow的屬性為visible除非你想覆蓋它在其它地方被設(shè)定的值。
這里需要記住的重要的事情是，盡管盒子外面的內(nèi)容是可見的，內(nèi)容并不會(huì)影響頁(yè)面的工作流。比如：
一般來說，你至少不用為里面的內(nèi)容為文字的盒子設(shè)置固定的高度，這樣就不會(huì)遇到這種情況了。
Hidden
默認(rèn)值visible的相反的值就是hidden。它會(huì)將所有超出盒子的所有內(nèi)容都給隱藏掉。
這對(duì)應(yīng)付使用動(dòng)態(tài)的內(nèi)容，而且可能會(huì)由于內(nèi)容溢出而引起一些布局上的問題的確很有用。盡管如此，請(qǐng)記住用此方法隱藏的內(nèi)容將徹底的看不到(除非去查看源代碼)。 比如有的用戶設(shè)置他們的瀏覽器的默認(rèn)字體比你預(yù)期的要大些，你會(huì)將一些文字推到盒子的外面然后完全的隱藏之……
Scroll
設(shè)置一個(gè)盒子的overflow值為scroll將會(huì)隱藏掉渲染到盒子之外的內(nèi)容，但是它將會(huì)提供一個(gè)滾動(dòng)條在盒子內(nèi)部滾動(dòng)，從而可以查看剩下的內(nèi)容。
值得注意的是，使用scroll將會(huì)同時(shí)產(chǎn)生水平和垂直兩個(gè)滾動(dòng)條，就算內(nèi)容只需要其中一個(gè)。
Auto
overflow的auto值很像scroll，它唯一解決的是在你不需要的時(shí)候也會(huì)出現(xiàn)滾動(dòng)條的問題。
清除浮動(dòng)
設(shè)置overflow的一個(gè)更流行的用處是，說也奇怪，清除浮動(dòng)。設(shè)置overflow并不會(huì)在該元素上清除浮動(dòng)，它將清除自己(self-clear)。意思就是，應(yīng)用了overflow(auto或hidden)的元素，將會(huì)擴(kuò)展到它需要的大小以包圍它里面的浮動(dòng)的子元素(而不是疊了起來(collapsing))，假設(shè)未定義高度。就像這樣：
對(duì)于此問題，經(jīng)過測(cè)試，IE6會(huì)自動(dòng)擴(kuò)展父層元素的高度，而IE8和FF等瀏覽器加上overflow:auto后，即可清除浮動(dòng)。――神飛
這里有更多關(guān)于浮動(dòng)的細(xì)節(jié)文章關(guān)于浮動(dòng)的一切。
跨瀏覽器的煩惱
就像CSS中的很多東東，overflow有很多的跨瀏覽器的蹊蹺的事情。比如這些：
滾動(dòng)條在盒子里面還是外面?
Firefox將其放到盒子外面，而IE則將其放到里面。我認(rèn)為只有IE是對(duì)的(它應(yīng)該在里面的)。
看清楚這個(gè)明顯的不同。
IE 8 擴(kuò)展盒子的bug
IE8有很多有趣的新bug，包括一些非常嚴(yán)重的隱藏在網(wǎng)頁(yè)中的。這里有更多的關(guān)于IE8的overflow的bug的介紹。
破壞浮動(dòng)布局
IE 6, 7 和 8都會(huì)扭曲默認(rèn)的overflow visible值并將水平的擴(kuò)展一個(gè)盒子一匹配內(nèi)容(比如圖片)。 這對(duì)使用浮動(dòng)列布局的結(jié)構(gòu)非常痛苦，而且單個(gè)擴(kuò)展的列就能夠?qū)⑵渌袛D下去并使布局亂掉！
事實(shí)上，這個(gè)我在驗(yàn)證的時(shí)候發(fā)現(xiàn)，只有IE6才會(huì)出現(xiàn)這種情況，而IE7、IE8和其它瀏覽器表現(xiàn)一致。如果大家在使用IE7或IE8時(shí)有遇到這種情況，請(qǐng)告訴我，多謝！――神飛
滾動(dòng)條能用CSS控制嗎？
IE過去在較老的版本中允許這樣，但是之后就收斂了。比如許多表單元素，滾動(dòng)條就不允許使用CSS控制。我在它是否是件好事情上沒有任何具體的意見，但是我可以說，在網(wǎng)站的所有內(nèi)容上使用滾動(dòng)條是很丑陋的和俗氣的。如果你需要一個(gè)美化的滾動(dòng)條，你或許需要尋找JavaScript來模擬。
IE 技巧
無(wú)論是否需要，IE都會(huì)一直顯示一個(gè)垂直的滾動(dòng)條，這對(duì)預(yù)防水平跳動(dòng)是有些作用的，但并非總是可取的。要想在IE中移除它，可以在body元素中設(shè)置overflow為auto。PS:此種情況也較少發(fā)現(xiàn)，不過在body的樣式中添加overflow:auto的方法，建議考慮采用――神飛
演示
本文的演示頁(yè)面，可以查看這個(gè)頁(yè)面。
]]>簡(jiǎn)介
如果你經(jīng)常網(wǎng)上沖浪，這樣參差不齊的多欄布局，是不是很眼熟啊？
類似的布局，似乎一夜之間出現(xiàn)在國(guó)內(nèi)外大大小小的網(wǎng)站上，比如 Pinterest (貌似是最早使用這種布局的網(wǎng)站了)，Mark之，蘑菇街，點(diǎn)點(diǎn)網(wǎng)，以及淘寶最新上線的“哇哦” 等等，倒是很流行哈~ 在淘寶即將上線的眾多產(chǎn)品中，你還會(huì)大量看到這樣的形式呢。
這種布局適合于小數(shù)據(jù)塊，每個(gè)數(shù)據(jù)塊內(nèi)容相近且沒有側(cè)重。通常，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。所以，我們給這樣的布局起了一個(gè)形象的名字 ― 瀑布流式布局。
幾種實(shí)現(xiàn)方式
隨著越來越多設(shè)計(jì)師愛用這種布局，我們作為前端，要盡可能滿足視覺/交互設(shè)計(jì)師的需求。所以，我們整理了下這種布局的幾種實(shí)現(xiàn)方式，有三種:
1) 傳統(tǒng)多列浮動(dòng)。即 蘑菇街和哇哦 采用的方式，如下圖所示:
- 各列固定寬度，并且左浮動(dòng)；
- 一列中的數(shù)據(jù)塊為一組，列中的每個(gè)數(shù)據(jù)塊依次排列即可；
- 更多數(shù)據(jù)加載時(shí)，需要分別插入到不同的列上；
- 線上例子。
優(yōu)點(diǎn):
- 布局簡(jiǎn)單，應(yīng)該說沒啥特別的難點(diǎn)；
- 不用明確知道數(shù)據(jù)塊高度，當(dāng)數(shù)據(jù)塊中有圖片時(shí)，就不需要指定圖片高度。
缺點(diǎn):
- 列數(shù)固定，擴(kuò)展不易，當(dāng)瀏覽器窗口大小變化時(shí)，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列；
- 滾動(dòng)加載更多數(shù)據(jù)時(shí)，還要指定插入到第幾列中，還是不方便。
2) CSS3 定義。W3C 中有講述關(guān)于多列布局的文檔，排列出來的樣子:
- 由 chrome/ff 瀏覽器直接渲染出來，可以指定容器的列個(gè)數(shù)，列間距，列中間邊框，列寬度來實(shí)現(xiàn)；
#container { -webkit-column-count: 5； /*-webkit-column-gap: 10px； -webkit-column-rule: 5px solid #333； -webkit-column-width: 210px；*/ -moz-column-count: 5； /*-moz-column-gap: 20px； -moz-column-rule: 5px solid #333； -moz-column-width: 210px；*/ column-count: 5； /*column-gap: 10px； column-rule: 5px solid #333； column-width: 210px；*/ }
- column-count 為列數(shù)； column-gap 為每列間隔距離； column-rule 為間隔邊線大小； column-width 為每列寬度； 當(dāng)只設(shè)置 column-width 時(shí)，瀏覽器窗口小于一列寬度時(shí)，列中內(nèi)容自動(dòng)隱藏； 當(dāng)只設(shè)置 column-count 時(shí)，平均計(jì)算每列寬度，列內(nèi)內(nèi)容超出則隱藏； 都設(shè)了 column-count 和column-width，瀏覽器會(huì)根據(jù) count 計(jì)算寬度和 width 比較，取大的那個(gè)值作為每列寬度，然后當(dāng)窗口縮小時(shí)，width 的值為每列最小寬度。這邊其實(shí)很簡(jiǎn)單，簡(jiǎn)易自己嘗試下，詳細(xì)可參考 https://developer.mozilla.org/en/CSS3_Columns 中的說明。
- 線上例子。
優(yōu)點(diǎn):
- 直接 CSS 定義，最方便了；
- 擴(kuò)展方便，直接往容器里添加內(nèi)容即可。
缺點(diǎn):
- 只有高級(jí)瀏覽器中才能使用；
- 還有一個(gè)缺點(diǎn)，他的數(shù)據(jù)塊排列是從上到下排列到一定高度后，再把剩余元素依次添加到下一列，這個(gè)本質(zhì)上就不一樣了；
- 鑒于這兩個(gè)主要缺點(diǎn)，注定了該方法只能局限于高端瀏覽器，而且，更適合于文字多欄排列。
3) 絕對(duì)定位。即 Pinterest ，Mark之，KISSY 采用的方式:
- 可謂是最優(yōu)的一種方案，方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會(huì)自動(dòng)調(diào)整；
- 線上例子。
缺點(diǎn):
- 需要實(shí)現(xiàn)知道數(shù)據(jù)塊高度，如果其中包含圖片，需要知道圖片高度；
- JS 動(dòng)態(tài)計(jì)算數(shù)據(jù)塊位置，當(dāng)窗口縮放頻繁，可能會(huì)狂耗性能。
KISSY.Waterfall 實(shí)現(xiàn)思路
KISSY 的 Waterfall 組件主要包含兩個(gè)部分，一個(gè)是對(duì)現(xiàn)有數(shù)據(jù)塊進(jìn)行排列計(jì)算各自所在的位置； 二是下拉滾動(dòng)時(shí)，觸發(fā)加載數(shù)據(jù)操作，并把數(shù)據(jù)添加到目標(biāo)容器中。
1) 數(shù)據(jù)塊排列，算法步驟簡(jiǎn)述下:
- 初始化時(shí)，對(duì)容器中已有數(shù)據(jù)塊元素進(jìn)行第一次計(jì)算，需要用戶給定: a，容器元素 ― 以此獲取容器總寬度； b，列寬度； c，最小列數(shù)； 最終列數(shù)取的是容器寬度/列寬度和最小列數(shù)的最大值，這樣保證了，當(dāng)窗口很小時(shí)，仍然出現(xiàn)最小列數(shù)的數(shù)據(jù)；
- 獲得列數(shù)后，需要保存每個(gè)列的當(dāng)前高度，這樣在添加每個(gè)數(shù)據(jù)塊時(shí)，才知道起始高度是多少；
- 依次取容器中的所有數(shù)據(jù)塊，先尋找當(dāng)前高度最小的某列，之后根據(jù)列序號(hào)，確定數(shù)據(jù)塊的left，top值，left 為所在列的序號(hào)乘以列寬，top 為所在列的當(dāng)前高度，最后更新所在列的當(dāng)前高度加上這個(gè)數(shù)據(jù)塊元素的高度，至此，插入一個(gè)元素結(jié)束；
- 當(dāng)所有元素插入完畢后，調(diào)整容器的高度為各列最大的高度值，結(jié)束依次調(diào)整；
- 性能效率上的注意點(diǎn): a，如果當(dāng)前正在調(diào)整中，又觸發(fā)了 resize 事件，需要將上次調(diào)整暫停后執(zhí)行這次調(diào)整(見 timedChunk 函數(shù))； b，resize 觸發(fā)會(huì)很頻繁，可以將回調(diào)函數(shù)緩存一段時(shí)候后執(zhí)行，即當(dāng)這段時(shí)間內(nèi)多次觸發(fā)了resize事件，但回調(diào)函數(shù)只會(huì)執(zhí)行一次(見 S.buffer 函數(shù))
- 感興趣的可以參見源碼。
2) 異步加載數(shù)據(jù)，前面講的是如何對(duì)容器中已有元素進(jìn)行排列，但很多情況下，還需要不斷加載新數(shù)據(jù)塊，為此專門設(shè)計(jì)了一個(gè)獨(dú)立的模塊 KISSY.Waterfall.Loader，其實(shí)這個(gè)功能就更簡(jiǎn)單了，僅包含兩個(gè)步驟:
- 綁定滾動(dòng)事件，并確定預(yù)加載線高度值，即滾動(dòng)到哪個(gè)高度后，需要去加載數(shù)據(jù)，其實(shí)這個(gè)就是列的最小高度值，這樣當(dāng)前滾動(dòng)值和最小高度值比較一下即可判斷出來，是否要觸發(fā)加載數(shù)據(jù)；
- 加載數(shù)據(jù)，為了不對(duì)數(shù)據(jù)源做太多限制，完全由使用者自己決定數(shù)據(jù)源從哪邊獲取和其格式，這樣更好的方便用戶使用。為此，該組件只提供一個(gè)load(success，end) 接口，怎樣load 由用戶自己去定義，而其中的 success/end，分別給出如何添加新數(shù)據(jù)(suceess 即同 addItems)/如何停止加載的接口。這樣真是太方便了~~
- 感興趣的可以參見源碼。
KISSY.Waterfall 示例和文檔
看到這邊，是不是很想試用一下~~ 嗯嗯，這里給出一些相關(guān)學(xué)習(xí)資料和示例，以供參考:
- Waterfall API 文檔，相關(guān)構(gòu)造器，配置項(xiàng)，方法都在這里；
- 示例，包含靜態(tài)和動(dòng)態(tài)兩種。
1.CSS字體屬性簡(jiǎn)寫規(guī)則一般用CSS設(shè)定字體屬性是這樣做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它們?nèi)繉懙揭恍猩先ィ?/P>
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不錯(cuò)！只有一點(diǎn)要提醒的：這種簡(jiǎn)寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒有設(shè)定font-weight, font-style, 以及 font-varient ，他們會(huì)使用缺省值，這點(diǎn)要記上。
2. 同時(shí)使用兩個(gè)類
一般只能給一個(gè)元素設(shè)定一個(gè)類（Class），但這并不意味著不能用兩個(gè)。事實(shí)上，你可以這樣：
<p class=”text side”>…</p>
同時(shí)給P元素兩個(gè)類，中間用空格格開，這樣所有text和side兩個(gè)類的屬性都會(huì)加到P元素上來。如果它們兩個(gè)類中的屬性有沖突的話，后設(shè)置的起作用，即在CSS文件中放在后面的類的屬性起作用。
補(bǔ)充：對(duì)于一個(gè)ID，不能這樣寫<p id=”text side”>…</p>也不能這樣寫
3. CSS border的缺省值
通常可以設(shè)定邊界的顏色，寬度和風(fēng)格，如：
border: 3px solid #000
這位把邊界顯示成3像素寬，黑色，實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。
如果只指定了風(fēng)格，其他屬性就會(huì)使用缺省值。一般地，Border的寬度缺省是medium，一般等于3到4個(gè)像素；缺省的顏色是其中文字的顏色。如果這個(gè)值正好合適的話，就不用設(shè)那么多了。
4. CSS用于文檔打印
許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂肅SS來設(shè)定打印風(fēng)格。
也就是說，可以為頁(yè)面指定兩個(gè)CSS文件，一個(gè)用于屏幕顯示，一個(gè)用于打印：
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
第1行就是顯示，第2行是打印，注意其中的media屬性。
但應(yīng)該在打印CSS中寫什么東西呢？你可以按設(shè)計(jì)普通CSS的方法來設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)CSS設(shè)成顯示CSS來檢查它的效果。也許你會(huì)使用 display: none 這個(gè)命令來關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕。要想了解更多，可以看“打印差異”這一篇。
5. 圖片替換技巧
一般都建議用標(biāo)準(zhǔn)的HTML來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時(shí)，就只能用圖片了。
比如你想整個(gè)賣東西的圖標(biāo)，你就用了這個(gè)圖片：
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
這當(dāng)然可以，但對(duì)搜索引擎來說，和正常文字相比，它們對(duì)alt里面的替換文字幾乎沒有興趣這是因?yàn)樵S多設(shè)計(jì)者在這里放許多關(guān)鍵詞來騙搜索引擎。所以方法應(yīng)該是這樣的：
<h1>Buy widgets</h1>
但這樣就沒有特殊字體了。要想達(dá)到同樣效果，可以這樣設(shè)計(jì)CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height換成真的圖片的高度。這里，圖片會(huì)當(dāng)作背景顯示出來，而真正的文字由于設(shè)定了-2000像素這個(gè)縮進(jìn)，它們會(huì)出現(xiàn)在屏幕左邊2000點(diǎn)的地方，就看不見了。但這對(duì)于關(guān)閉圖片的人來說，可能全部看不到了，這點(diǎn)要注意。
6. CSS box模型的另一種調(diào)整技巧
這個(gè)Box模型的調(diào)整主要是針對(duì)IE6之前的IE瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
這樣調(diào)用它：
<div id=”box”>…</div>
這時(shí)盒子的全寬應(yīng)該是150點(diǎn)，這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。但在IE5這樣的瀏覽器上，它的全寬仍是100點(diǎn)。可以用以前人發(fā)明的Box調(diào)整方法來處理這種差異。
但用CSS也可以達(dá)到同樣的目的，讓它們顯示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
這樣調(diào)用：
<div id=”box”><div>…</div></div>
這樣，不管什么瀏覽器，寬度都是150點(diǎn)了。
7. 塊元素居中對(duì)齊
如果想做個(gè)固定寬度的網(wǎng)頁(yè)并且想讓網(wǎng)頁(yè)水平居中的話，通常是這樣：
#content { width: 700px; margin: 0 auto }
你會(huì)使用 <div id=”content”> 來圍上所有元素。這很簡(jiǎn)單，但不夠好，IE6之前版本會(huì)顯示不出這種效果。改CSS如下：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這會(huì)把網(wǎng)頁(yè)內(nèi)容都居中，所以在Content中又加入了:text-align: left 。
8. 用CSS來處理垂直對(duì)齊
垂直對(duì)齊用表格可以很方便地實(shí)現(xiàn)，設(shè)定表格單元 vertical-align: middle 就可以了。但對(duì)CSS來說這沒用。如果你想設(shè)定一個(gè)導(dǎo)航條是2em高，而想讓導(dǎo)航文字垂直居中的話，設(shè)定這個(gè)屬性是沒用的。
CSS方法是什么呢？對(duì)了，把這些文字的行高設(shè)為 2em：line-height: 2em ，這就可以了。
9. CSS在容器內(nèi)定位
CSS的一個(gè)好處是可以把一個(gè)元素任意定位，在一個(gè)容器內(nèi)也可以。比如對(duì)這個(gè)容器：
#container { position: relative }
這樣容器內(nèi)所有的元素都會(huì)相對(duì)定位，可以這樣用：
<div id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30點(diǎn)，距上5點(diǎn)，可以這樣：
#navigation { position: absolute; left: 30px; top: 5px }
當(dāng)然，你還可以這樣：
margin: 5px 0 0 30px
注意4個(gè)數(shù)字的順序是：上、右、下、左。當(dāng)然，有時(shí)候定位的方法而不是邊距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是進(jìn)行控制是CSS所不能的。如果你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到頁(yè)面底部，用表格是很方便的，但如果只用這樣的CSS：
#navigation { background: blue; width: 150px }
較短的導(dǎo)航條是不會(huì)直通到底部的，半路內(nèi)容結(jié)束時(shí)它就結(jié)束了。該怎么辦呢？
不幸的是，只能采用欺騙的手段了，給這較短的一欄加上個(gè)背景圖，寬度和欄寬一樣，并讓它的顏色和設(shè)定的背景色一樣。
body { background: url(blue-image.gif) 0 0 repeat-y }
此時(shí)不能用em做單位，因?yàn)槟菢拥脑挘坏┳x者改變了字體大小，這個(gè)花招就會(huì)露餡，只能使用px。
]]>