CSS 使用總結(jié)

1、CSS使用總結(jié)一、 CSS常用1. 去火狐IE鏈接點擊虛線a text-decoration:none;outline: none; /* firefox */hide-focus: expression(this.hideFocus = true); /* ie */2. 英文或數(shù)字自動換行1)英文或漢字自動換行style=word-wrap:break-word ;width:630px;2)漢字一行顯示，不換行word-break:keep-all;/* 不換行 */white-space:nowrap;/* 不換行 */3. 兼容兩瀏覽器的AP值FILTER: alpha(opacit

2、y=75);opacity: 0.754. 層中圖片自動縮放imgmax-width:500px;width:expression(this.width500?500px:this.width+px); 5.content-width MARGIN: auto;WIDTH: 600px;.content-width imgMAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width 600 ? 600px : this.width)!important;6DIV中圖片垂直居中.bixborder:1px

3、 solid #f00;width:300px;height:300px;text-align:center;vertical-align:middle;display:table-cell;*font-size:270px;*font-family:Arial;.bix imgvertical-align:middle;二、 CSS各瀏覽器區(qū)分規(guī)則1. 單獨區(qū)分規(guī)則可被FireFox和IE7識別：!important例：margin:0px!important;可被IE6、IE7識別：* 例：*margin:0px;可被IE6識別：_ 例：_margin:0px;可被IE7識別：*+ 例：*

4、+margin:0px;可被IE8識別：9 例：margin:0px9;可被Safari識別：例：.boxmargin:0px;media screen and (-webkit-min-device-pixel-ratio:0) .boxmargin:10px;/* Safari rules here */可被 火狐 識別：-moz-document url-prefix() .boxmargin:10px; 2. 混寫實例1) 區(qū)別IE6 與FF background: yellow ;*background: blue ; 【FF：黃色 IE6：藍(lán)色】2) 區(qū)別IE6與IE7 backg

5、round: yellow!important;background: blue ; 【IE7：黃色 IE6：藍(lán)色】3) 區(qū)別IE7 與FF background: yellow ; *background: blue;【FF：黃色 IE7：藍(lán)色】4) 區(qū)別FF ，IE7 ，IE6 background: yellow ; * background: green !important ; * background: blue ; 【FF：黃色 IE7：綠色IE6：藍(lán)色】5)還可以這樣來區(qū)別FF ，IE7 ，IE6 background:yellow ;*background: green ;_

6、background: blue ;【FF：黃色 IE7：綠色 IE6：藍(lán)色】6）區(qū)別FF ，IE8 ，IE7 ，IE6 ，Safaribackground: yellow ;background: red 9; *background: green ;_background: blue ;media screen and (-webkit-min-device-pixel-ratio:0) . background: black ;/* Safari rules here */【FF：黃色 IE8：紅色 IE7：綠色 IE6：藍(lán)色 Safari：黑色】.clearfixzoom:1; .cl

7、earfix:aftercontent:.;display:block;visibility:hidden;clear:both;height:0px; 注：僅IE支持在屬性值后加上“9” IE6 IE7能識別“*” FF和IE8不能識別“*”IE7能識別“*”也能識別“!important”IE6能識別“_”不能識別“!important”FF 能識別“!important”不能識別“*” “_”IE8 能識別“!important”也能識別“9”不管是什么方法，書寫的順序都是： FF IE8 IE7IE6三、 JS網(wǎng)頁常用1. IFRAME使用問題1） iframe中新窗口打開：oncli

8、ck=window.open(ebhg_ms.html);2） iframe中打開上級鏈接：onclick=parent.show(cover5,alertmsg5); 四、 JS網(wǎng)頁常用1） 打印代碼：/打印代碼function doPrint() var bdhtml=window.document.body.innerHTML; var sprnstr=;/開始標(biāo)記 var eprnstr=;/結(jié)束標(biāo)記 /保存打印時不需要的數(shù)據(jù) var beforePrnHtml = bdhtml.substr(0,bdhtml.indexOf(sprnstr)+17); var afterPrnHtm

9、l = bdhtml.substr(bdhtml.indexOf(eprnstr); /提取欲打印的數(shù)據(jù) var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); var prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr); window.document.body.innerHTML=prnhtml; /打印 window.print(); /恢復(fù)頁面，可再次打印 window.document.body.innerHTML=bdhtml; 與（內(nèi)容段）（A鏈接代碼）五、C

10、ss優(yōu)化代碼寫法font(字體屬性-字體的屬性如下：font-style:italic; 字體樣式font-variant:small-caps; 字體異體font-weight:bold; 字體加粗font-size:12px; 字大小為12pxline-height:22px;字行高為22px font-family:黑體 字體為黑體字font:italic small-caps bold 12px/22px 黑體;這里主要介紹是CSS代碼的共用屬性提取來達到節(jié)約代碼、維護方便，如下：.yangshi_a width:100px; height:20px; text-align:left;

11、 float:left; font-size:24px;.yangshi_b width:100px; height:20px; text-align:right; float:left; font-size:24px;他們都有相同高度、寬度、浮動、文字大小，而只有內(nèi)容居左居右不同(你可能需要了解CSS居中)，我們就可以提取他們相同屬性優(yōu)化后:.yangshi_a ,.yangshi_b width:100px; height:20px; text-align:left; float:left; font-size:24px;.yangshi_btext-align:right; 注意觀察以上

12、代碼，自己理解，不懂可到CSS論壇提出問題。*margin-top:0 !important;inputtype=text width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;inputtype=button width:120px; margin-left:35px; display:block; font-family: Verdana, Arial;六、容易產(chǎn)生兼容問題元素分析div+css做的網(wǎng)頁，有時候在IE下看沒生那么問題，但在ff測

13、試卻不堪入目，主要原因是代碼的不規(guī)范書寫，分析原因如下：1、 居中問題div里的內(nèi)容，ie默認(rèn)為居中，而ff默認(rèn)為左對齊。使ff內(nèi)容居中的方法是增加代碼margin:auto;2、高度問題設(shè)有兩橫行div排列，上面的div設(shè)置高度(height)，如果div里的實際內(nèi)容大于所設(shè)高度，在ff中會出現(xiàn)兩個div重疊的現(xiàn)象；但 在ie中， 下面的div會自動給上面的div讓出空間。所以為避免出現(xiàn)層的重疊，高度一定要控制恰當(dāng)，或者干脆不寫高度，讓他自動調(diào)節(jié)?；蛘咴O(shè)置：overflow:hidden3、clear:both;拿footer為例，有時候如果上面使用 了float控制的n列的布局，那么在用f

14、f瀏覽時footer很有可能不老實，到處亂動因為他還在受到浮動（float）的控制。如果想讓它老老實 實呆在頁面下方，在footer的div中寫入clear:both;就可以達到效果了！4、浮動ie產(chǎn)生的雙倍距離#boxfloat:left;width:100px;margin:0 0 0 100px; /這種情況之下IE會產(chǎn)生200px的距離display:inline; /使浮動忽略.clearfixzoom:1; .clearfix:aftercontent:.;display:block;visibility:hidden;clear:both;height:0px; 將浮動清除5、重

15、點講解：display:block,inline兩個元素 display(顯示)display:block; /可以為內(nèi)嵌元素模擬為塊元素display:inline; /實現(xiàn)同一行排列的的效果diplay:table; /for ff,模擬table的效果Display:block元素的特點是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個寬度, , , , 和 是塊元素的例子。display:inline就是將元素顯示為行內(nèi)元素.inline元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改

16、變。, , , , , 和是inline元素的例子。6、FF: 支持 !important, IE 則忽略可用 !important （例：height:30px!important; height:26px;）為 FF 特別設(shè)置樣式div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行cursor: pointer 可以同時在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行（背景圖片需要設(shè)置 float: left ）。參照 menubar, 給 a 和 menubar 設(shè)置高