網(wǎng)站重構(gòu)CSS常用技巧分析

很多網(wǎng)站建設(shè)高手都知使用css縮寫(xiě)，因?yàn)槭褂每s寫(xiě)可以幫助減少你CSS文件的大小，更加容易閱讀。這里就著重總結(jié)了一些css常用技巧，為網(wǎng)站重構(gòu)打下基礎(chǔ)。
1. Block和inline元素對(duì)比
所有的HTML元素都屬于block和inline之一。
block元素的特點(diǎn)是：
總是在新行上開(kāi)始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設(shè)定一個(gè)度 和
是塊元素的例子。
相反地，inline元素的特點(diǎn)是：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
, 和是inline元素的例子。
用display: inline 或display: block命令就可以改變一個(gè)元素的這一特性。什么時(shí)候需要改變這一屬性呢？
讓一個(gè)inline元素從新行開(kāi)始；
讓塊元素和其他元素保持在一行上；
控制inline元素的寬度（對(duì)導(dǎo)航條非凡有用）；
控制inline元素的高度；
無(wú)須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的背景色。
2. 再來(lái)一個(gè)box黑客方法
之所以有這么多box黑客方法，是因?yàn)镮E在6之前對(duì)box的理解跟別人都不一樣，它的寬度要包含邊線(xiàn)寬和空白。要想讓IE5等同其他瀏覽器保持一致，可以用CSS的方法：
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一個(gè)寬度所有瀏覽器都認(rèn)得，但I(xiàn)E5.x不認(rèn)得第2行的寬度設(shè)置，只因?yàn)槟且恍猩嫌锌瞻椎淖⑨尫?hào)（多么蠢的語(yǔ)法分析?。訧E5.x就用20減掉一些空白，而其他瀏覽器會(huì)用14這個(gè)寬度，因?yàn)樗堑?行，會(huì)覆蓋掉第1行。
3. 頁(yè)面的最小寬度
min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用，可以把一個(gè)
放到 標(biāo)簽下，然后為div指定一個(gè)類(lèi)：
然后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í)際上通過(guò)Javascript的判定來(lái)實(shí)現(xiàn)最小寬度。
同樣的辦法也可以為IE實(shí)現(xiàn)大寬度：
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}
4. IE與寬度和高度的問(wèn)題
IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，假如只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，假如只用min-width和min-height的話(huà)，IE下面根本等于沒(méi)有設(shè)置寬度和高度。
5. 區(qū)分大小寫(xiě)
當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱(chēng)是區(qū)分大小寫(xiě)的。為了避免這種錯(cuò)誤，我建議所有的定義名稱(chēng)都采用小寫(xiě)。
class和id的值在HTML和XHTML中也是區(qū)分大小寫(xiě)的，如果你一定要大小寫(xiě)混合寫(xiě)，請(qǐng)仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。
6. 取消class和id前的元素限定
當(dāng)你寫(xiě)給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁(yè)面里是唯一的，鴆las s可以在頁(yè)面中多次使用。你限定某個(gè)元素毫無(wú)意義。

名稱(chēng)欄目：網(wǎng)站重構(gòu)CSS常用技巧分析
瀏覽地址：http://www.jbt999.com/news8/38608.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、定制開(kāi)發(fā)、服務(wù)器托管、微信公眾號(hào)、虛擬主機(jī)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)