天天躁日日躁狼狼超碰97,国99精品无码一区二区三区,国产日韩在线欧美视频,免费精品国产自产拍在线观看图片

旗下網(wǎng)站

百科知識庫

報道公司事件 · 傳播行業(yè)動態(tài)

CSS常用技巧分析

發(fā)布日期:2014-12-23    發(fā)布者:王斌華

  很多網(wǎng)站建設(shè)高手都知使用css縮寫,因為使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。這里就著重總結(jié)了一些css常用技巧,為網(wǎng)站重構(gòu)打下基礎(chǔ)。

  1. Block和inline元素對比

  所有的HTML元素都屬于block和inline之一。

  block元素的特點是:

  總是在新行上開始;

  高度,行高以及頂和底邊距都可控制;

  寬度缺省是它的容器的100%,除非設(shè)定一個度 和

  是塊元素的例子。

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

  和其他元素都在一行上;

  高,行高及頂和底邊距不可改變;

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

  , 和是inline元素的例子。

  用display: inline 或display: block命令就可以改變一個元素的這一特性。什么時候需要改變這一屬性呢?

  讓一個inline元素從新行開始;

  讓塊元素和其他元素保持在一行上;

  控制inline元素的寬度(對導(dǎo)航條非凡有用);

  控制inline元素的高度;

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

  2. 再來一個box黑客方法

  之所以有這么多box黑客方法,是因為IE在6之前對box的理解跟別人都不一樣,它的寬度要包含邊線寬和空白。要想讓IE5等同其他瀏覽器保持一致,可以用CSS的方法:

  padding: 2em;

  border: 1em solid green;

  width: 20em;

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

  第一個寬度所有瀏覽器都認(rèn)得,但I(xiàn)E5.x不認(rèn)得第2行的寬度設(shè)置,只因為那一行上有空白的注釋符號(多么蠢的語法分析!),所以IE5.x就用20減掉一些空白,而其他瀏覽器會用14這個寬度,因為它是第2行,會覆蓋掉第1行。

  3. 頁面的最小寬度

  min-width是個非常方便的CSS命令,它可以指定元素最小也不能小于某個寬度,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個,而它實際上把width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個

  放到 標(biāo)簽下,然后為div指定一個類:

  然后CSS這樣設(shè)計:

  #container

  {

  min-width: 600px;

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

  }

  第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認(rèn)得,這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判定來實現(xiàn)最小寬度。

  同樣的辦法也可以為IE實現(xiàn)最大寬度:

  #container

  {

  min-width: 600px;

  max-width: 1200px;

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

  }

  4. IE與寬度和高度的問題

  IE不認(rèn)得min-這個定義,但實際上它把正常的width和height當(dāng)作有min的情況來使。這樣問題就大了,假如只用寬度和高度,正常的瀏覽器里這兩個值就不會變,假如只用min-width和min-height的話,IE下面根本等于沒有設(shè)置寬度和高度。

  5. 區(qū)分大小寫

  當(dāng)在XHTML中使用CSS,CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯誤,我建議所有的定義名稱都采用小寫。

  class和id的值在HTML和XHTML中也是區(qū)分大小寫的,如果你一定要大小寫混合寫,請仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。

  6. 取消class和id前的元素限定

  當(dāng)你寫給一個元素定義class或者id,你可以省略前面的元素限定,因為ID在一個頁面里是唯一的,clas s可以在頁面中多次使用。你限定某個元素毫無意義。

Copyright 大連網(wǎng)龍科技 版權(quán)所有 遼ICP備14006349號  html - txt - xml

遼公網(wǎng)安備 21021702000140號

電話
客服