旗下網站(zhàn)
s

百科知識庫

報道(dào)公司事件 · 傳播行(xíng)業動态

CSS常用技(jì)巧分析

發布日期:2014-12-23    發布者:王斌華

  很(hěn)多(duō)網站(zhàn)建設高(gāo)手都知使用css縮寫,因為(wèi)使用縮寫可(kě)以幫助減少(shǎo)你(nǐ)CSS文件的大(dà)小(xiǎo),更加容易閱讀。這裏就着重總結了一些(xiē)css常用技(jì)巧,為(wèi)網站(zhàn)重構打下基礎。

  1. Block和(hé)inline元素對比

  所有(yǒu)的HTML元素都屬于block和(hé)inline之一。

  block元素的特點是:

  總是在新行(xíng)上(shàng)開(kāi)始;

  高(gāo)度,行(xíng)高(gāo)以及頂和(hé)底邊距都可(kě)控制(zhì);

  寬度缺省是它的容器(qì)的100%,除非設定一個(gè)度 和(hé)

  是塊元素的例子。

  相反地,inline元素的特點是:

  和(hé)其他元素都在一行(xíng)上(shàng);

  高(gāo),行(xíng)高(gāo)及頂和(hé)底邊距不可(kě)改變;

  寬度就是它的文字或圖片的寬度,不可(kě)改變。

  , 和(hé)是inline元素的例子。

  用display: inline 或display: block命令就可(kě)以改變一個(gè)元素的這一特性。什麽時(shí)候需要改變這一屬性呢?

  讓一個(gè)inline元素從新行(xíng)開(kāi)始;

  讓塊元素和(hé)其他元素保持在一行(xíng)上(shàng);

  控制(zhì)inline元素的寬度(對導航條非凡有(yǒu)用);

  控制(zhì)inline元素的高(gāo)度;

  無須設定寬度即可(kě)為(wèi)一個(gè)塊元素設定與文字同寬的背景色。

  2. 再來(lái)一個(gè)box黑(hēi)客方法

  之所以有(yǒu)這麽多(duō)box黑(hēi)客方法,是因為(wèi)IE在6之前對box的理(lǐ)解跟别人(rén)都不一樣,它的寬度要包含邊線寬和(hé)空(kōng)白。要想讓IE5等同其他浏覽器(qì)保持一緻,可(kě)以用CSS的方法:

  padding: 2em;

  border: 1em solid green;

  width: 20em;

  width/**/:/**/ 14em;

  第一個(gè)寬度所有(yǒu)浏覽器(qì)都認得(de),但(dàn)IE5.x不認得(de)第2行(xíng)的寬度設置,隻因為(wèi)那(nà)一行(xíng)上(shàng)有(yǒu)空(kōng)白的注釋符号(多(duō)麽蠢的語法分析!),所以IE5.x就用20減掉一些(xiē)空(kōng)白,而其他浏覽器(qì)會(huì)用14這個(gè)寬度,因為(wèi)它是第2行(xíng),會(huì)覆蓋掉第1行(xíng)。

  3. 頁面的最小(xiǎo)寬度

  min-width是個(gè)非常方便的CSS命令,它可(kě)以指定元素最小(xiǎo)也不能小(xiǎo)于某個(gè)寬度,這樣就能保證排版一直正确。但(dàn)IE不認得(de)這個(gè),而它實際上(shàng)把width當做(zuò)最小(xiǎo)寬度來(lái)使。為(wèi)了讓這一命令在IE上(shàng)也能用,可(kě)以把一個(gè)

  放到 标簽下,然後為(wèi)div指定一個(gè)類:

  然後CSS這樣設計(jì):

  #container

  {

  min-width: 600px;

  width:expression(document.body.clientWidth < 600? "600px": "auto" );

  }

  第一個(gè)min-width是正常的;但(dàn)第2行(xíng)的width使用了Javascript,這隻有(yǒu)IE才認得(de),這也會(huì)讓你(nǐ)的HTML文檔不太正規。它實際上(shàng)通(tōng)過Javascript的判定來(lái)實現最小(xiǎo)寬度。

  同樣的辦法也可(kě)以為(wèi)IE實現最大(dà)寬度:

  #container

  {

  min-width: 600px;

  max-width: 1200px;

  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";

  }

  4. IE與寬度和(hé)高(gāo)度的問題

  IE不認得(de)min-這個(gè)定義,但(dàn)實際上(shàng)它把正常的width和(hé)height當作(zuò)有(yǒu)min的情況來(lái)使。這樣問題就大(dà)了,假如隻用寬度和(hé)高(gāo)度,正常的浏覽器(qì)裏這兩個(gè)值就不會(huì)變,假如隻用min-width和(hé)min-height的話(huà),IE下面根本等于沒有(yǒu)設置寬度和(hé)高(gāo)度。

  5. 區(qū)分大(dà)小(xiǎo)寫

  當在XHTML中使用CSS,CSS裏定義的元素名稱是區(qū)分大(dà)小(xiǎo)寫的。為(wèi)了避免這種錯誤,我建議所有(yǒu)的定義名稱都采用小(xiǎo)寫。

  class和(hé)id的值在HTML和(hé)XHTML中也是區(qū)分大(dà)小(xiǎo)寫的,如果你(nǐ)一定要大(dà)小(xiǎo)寫混合寫,請(qǐng)仔細确認你(nǐ)在CSS的定義和(hé)XHTML裏的标簽是一緻的。

  6. 取消class和(hé)id前的元素限定

  當你(nǐ)寫給一個(gè)元素定義class或者id,你(nǐ)可(kě)以省略前面的元素限定,因為(wèi)ID在一個(gè)頁面裏是唯一的,clas s可(kě)以在頁面中多(duō)次使用。你(nǐ)限定某個(gè)元素毫無意義。

Copyright 大(dà)連網龍科技(jì) 版權所有(yǒu)   html - txt -

電(diàn)話(huà)
客服