CSS 使用总结

CSS使用总结一、 CSS常用1. 去火狐IE链接点击虚线a text-decoration:none;outline: none; /* firefox */hide-focus: expression(this.hideFocus = true); /* ie */2. 英文或数字自动换行1)英文或汉字自动换行style=word-wrap:break-word ;width:630px;2)汉字一行显示，不换行word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */3. 兼容两浏览器的AP值FILTER: alpha(opacity=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 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各浏览器区分规则1. 单独区分规则可被FireFox和IE7识别：!important例：margin:0px!important;可被IE6、IE7识别：* 例：*margin:0px;可被IE6识别：_ 例：_margin:0px;可被IE7识别：*+ 例：*+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) 区别IE6 与FF background: yellow ;*background: blue ; 【FF：黄色 IE6：蓝色】2) 区别IE6与IE7 background: yellow!important;background: blue ; 【IE7：黄色 IE6：蓝色】3) 区别IE7 与FF background: yellow ; *background: blue;【FF：黄色 IE7：蓝色】4) 区别FF ，IE7 ，IE6 background: yellow ; * background: green !important ; * background: blue ; 【FF：黄色 IE7：绿色IE6：蓝色】5)还可以这样来区别FF ，IE7 ，IE6 background:yellow ;*background: green ;_background: blue ;【FF：黄色 IE7：绿色 IE6：蓝色】6）区别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：蓝色 Safari：黑色】.clearfixzoom:1; .clearfix: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网页常用1. IFRAME使用问题1） iframe中新窗口打开：onclick=window.open(ebhg_ms.html);2） iframe中打开上级链接：onclick=parent.show(cover5,alertmsg5); 四、 JS网页常用1） 打印代码：/打印代码function doPrint() var bdhtml=window.document.body.innerHTML; var sprnstr=;/开始标记 var eprnstr=;/结束标记 /保存打印时不需要的数据 var beforePrnHtml = bdhtml.substr(0,bdhtml.indexOf(sprnstr)+17); var afterPrnHtml = bdhtml.substr(bdhtml.indexOf(eprnstr); /提取欲打印的数据 var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); var prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr); window.document.body.innerHTML=prnhtml; /打印 window.print(); /恢复页面，可再次打印 window.document.body.innerHTML=bdhtml; 与（内容段）（A链接代码）五、Css优化代码写法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代码的共用属性提取来达到节约代码、维护方便，如下：.yangshi_a width:100px; height:20px; text-align:left; float:left; font-size:24px;.yangshi_b width:100px; height:20px; text-align:right; float:left; font-size:24px;他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能需要了解CSS居中)，我们就可以提取他们相同属性优化后:.yangshi_a ,.yangshi_b width:100px; height:20px; text-align:left; float:left; font-size:24px;.yangshi_btext-align:right; 注意观察以上代码，自己理解，不懂可到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;六、容易产生兼容问题元素分析div+css做的网页，有时候在IE下看没生那么问题，但在ff测试却不堪入目，主要原因是代码的不规范书写，分析原因如下：1、 居中问题div里的内容，ie默认为居中，而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;2、高度问题设有两横行div排列，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在ff中会出现两个div重叠的现象；但 在ie中， 下面的div会自动给上面的div让出空间。所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节。或者设置：overflow:hidden3、clear:both;拿footer为例，有时候如果上面使用 了float控制的n列的布局，那么在用ff浏览时footer很有可能不老实，到处乱动因为他还在受到浮动（float）的控制。如果想让它老老实 实呆在页面下方，在footer的div中写入clear:both;就可以达到效果了！4、浮动ie产生的双倍距离#boxfloat:left;width:100px;margin:0 0 0 100px; /这种情况之下IE会产生200px的距离display:inline; /使浮动忽略.clearfixzoom:1; .clearfix:aftercontent:.;display:block;visibility:hidden;clear:both;height:0px; 将浮动清除5、重点讲解：display:block,inline两个元素 display(显示)display:block; /可以为内嵌元素模拟为块元素display:inline; /实现同一行排列的的效果diplay:table; /for ff,模拟table的效果Display:block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , , 和 是块元素的例子。display:inline就是将元素显示为行内元素.inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。, , , , , 和是inline元素的例子。6、FF: 支持 !important, IE 则忽略可用 !important （例：height:30px!important; height:26px;）为 FF 特别设置样式div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行（背景图片需要设置 float: left ）。参照 menubar, 给 a 和 menubar 设置高