CSS细节.doc

细节1一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：记住密码二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：记住密码三、更改IE“查看源代码”菜单打开的编辑器1. 打开注册表编辑器,在开始-运行中输入regedit 2. 找到以下位置： HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerViewSourceEditorEditor Name修改默认的数据为D:Program FilesEmEditorEmEditor.exe 3. 切换到IE中查看源代码就可以看到效果了。 4. 如果ViewSourceEditorEditor Name项没有,可以自己新建。四、自动最大化窗口，在 与 之间加入：setTimeout(top.moveTo(0,0),5000);setTimeout(top.resizeTo(screen.availWidth,screen.availHeight),5000);五、window.opener 实际上就是用window.open打开的窗体的父窗体。比如在父窗体parentForm里面 通过 window.open(subForm.html),那么在subform.html中 window.opener就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。1,window.opener.test(); -调用父窗体中的test()方法；2,如果window.opener存在,设置parentForm中stockBox的值。if (window.opener & !window.opener.closed)window.opener.document.parentForm.stockBox.value = symbol;六、刷新页面的方法Javascript刷新页面的方法：1history.go(0)2location.reload()3location=location4location.assign(location)5document.execCommand(Refresh)6window.navigate(location)7location.replace(location)8document.URL=location.href自动刷新页面的方法:1.页面自动刷新：把加入区域中2.页面自动跳转：把加入区域中3.js自动刷新页面function myrefresh()window.location.reload();setTimeout(myrefresh(),1000); /指定1秒刷新一次4.JS刷新框架a)刷新包含该框架的页面用parent.location.reload();b)子窗口刷新父窗口self.opener.location.reload();(或刷新)c)刷新另一个框架的页面parent.另一FrameID.location.reload();七、用过CSS hack应该知道，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。八、IE条件注释写法除IE外都可识别 所有的IE可识别 只有IE5.0可以识别 九、CSS HACK 写法第一种：.div background:orange;*background:green !important;*background:blue;第二种：.div margin:10px;*margin:15px;_margin:15px;第三种：#div color: #333; *+html #div color: #999; * html #div color: #666; 细节2一、IE6及以下不识别a 标签外的:hover伪类，在火狐，IE7里能正确达到效果，解决办法：#show li.s1 border:1px solid #ff9900; background:#454242;#show li.s2 border:1px solid #D9D8D8; background:#312E2E;二、为元素设置hasLayout很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。三、IE6下字符重复出现确保浮动元素设置了display:inline;在浮动元素中使用margin-right:-3px;四、样式优先级1，内联样式 2，ID选择器 3，类，属性，伪类 选择器 4，元素标签，伪元素 选择器 五、一个元素垂直居中的css写法#exmposition:absolute;left:50%;top:50%;z-index:1;width:200px;height:100px;margin-left:-100px;margin-top:-52px;六、zoom : normal | number设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。七、图片跟文字并排时, 要实现图片文字垂直居中:1 将line-height:设置成图片的高度,或者图片父元素的高度.2 再将图片的CSS设置vertical-align:middle;八、li 元素中包含 a img 元素的时候，IE6下出现空白解决方法 一使 li 浮动，并设置 img 为块级元素解决方法 二设置 ul 的 font-size:0;解决方法 三设置 img 的 vertical-align: bottom;解决方法 四设置 img 的 margin-bottom: -5px;细节3一、被点击访问过的超链接样式不在具有hover和active解决方法：改变CSS属性的排列顺序: L-V-H-A二、FF下连续长字段不能自动换行解决方法：word-wrap:break-word;overflow:hidden;三、FF下父容器高度不能自适应解决办法：清除子元素的浮动四、IE下图片下方产生空隙解决办法：定义img 为display:block，或vertical-align为top/bottom/middle/text-bottom定义父容器的字体大小为零，font-size:0五、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙解决办法：相邻的非浮动元素也设置浮动；浮动元素相对IE6定义_margin-right:-3px;六、LI内容超长后以省略号显示解决办法：white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;七、文本不能垂直居中解决办法：行高和容器高度相等line-height=height；八、文本输入框和相邻的文本不能对齐解决办法：设置文本输入框vertical-align:middle;九、IE设置滚动条样式解决办法：bodyscrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;十、IE6无法定义高度为1px的容器解决办法：overflow:hiddenzoom:0.8line-height:1px细节4一、让层显示在flash之上解决办法：给FLASH设置透明或者二、使一个层垂直居中浏览器中解决办法：使用百分比绝对定位，与外补丁负值的方法。position:absolute;top:50%;left:50%;margin:-100px auto auto -100px;width:200px;height:200px;三、加入收藏夹解决办法：/ 加入收藏夹细节51.常见新闻列表的写法：2006年6月6日 新闻标题012006年6月6日 新闻标题022006年6月6日 新闻标题032006年6月6日 新闻标题042.IE实现页面背景渐变（FF及chrome不支持）从上到下：bodyfilter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);左上至右下：FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue;从左至右bodyFILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);从上到下style=filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);3.a hover的样式实现多种效果，可以灵活运用#outer a border:1px solid #069;#outer a:hover border:1px dashed #c00;4.border:none;与border:0区别理论上的性能差异:border:0;把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。border:none;把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。兼容性差异：兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。当border为“none”时似乎对IE6/7无效边框依然存在,当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可5.css实现多列等高布局,正内边距与负外边距给每个需要实现等高的列应用样式：.epadding-bottom:32767px;margin-bottom:-32767px;6.position:relative;特殊用法？*margin:0;padding:0;font:normal12px/25px宋体;bodybackground:#f8f8f8;ullist-style:none;width:300px;height:25px;margin:20pxauto;lifloat:left;width:86px;height:25px;text-align:center;margin:0-5px;display:inline;acolor:#fff;float:left;width:86px;height:25px;top:0;left:0;background:url(*.gif)centercenterno-repeat;a:hovercolor:#000;background:url(*.gif)00no-repeat;width:86px;position:relative; 细节61。innerText：从起始位置到结束位置的内容，不包含标签 innerHTMLouterHTML:包含innerHTML和标签test1test2test.innerText:test1 test2test.innerHTML:test1test2test.outerHTML:test1test22。Number（）：任何包含非数字字符的字符串做参数时，结果为NaNparseInt():从左到右尽可能多低把字符串转化为数字，直到遇到一个非数字时停止isNaN():参数不是一个数字时，返回true;3。a=23.50abctypeof(a)=StringparseFloat(a)=23.5parseInt(a)=23Number(a)=NaN4。JS变量名包含数字字母美元符下划线，不能以数字开头5。getElementsByTagName_r()需要等文档加载完毕后才能获取到6。nodeType：共12种，1表示元素节点，3表示文本节点nodeName：表示节点名称，如果是文本节点，则表示#textnodeValue：表示节点的值eg: 获取tagname为li的节点if(obj.nodeName.toLowerCase()=li)改变P的文本内容 document.getElementsByTagName_r(p)0.firstchild.nodeValue=7。父节点到子节点childNodes：元素所有第一层子节点列表，不包括向下更深层次的子节点obj.firstChild=obj.childNodes0obj.lastChild=obj.childNodesobj.childNodes.length-1hasChildNodes() 判断元素是否有子节点，返回布尔值7。子节点到父节点var parentElm=myLinkItem.parentNode;while(parentElm,className!=syna&parentElm!=document.body)parentElm=parentElm.parentNode8。修改元素属性1）以对象属性的方式获取或设置var mainImage=document.getElementByIdx_x(nav).getElementsByTagNameimg0;mainImage.src=;mainImage.alt=;2)用getAttribute()和setAttribute()方法细节71。将数字转化为拥有X位小数位的形式 function roundTo(base,precision) var m=Math.pow(10,precision);var a=Math.round(base*m)/m;return a;var n=3.942487;roundTo(n,3)=3.942roundTo(n,0)=32。创建受约束的随机数function randomBetween(min,max) return min+Math.floor(Math.random()*(max-min+1)3。数字转换为字符串var a=10;a=String(a);/a=a.toString();4。对url的编码var a=/directoryname/?p=e;var b=escape(a);var c=(b);5。改变文档内元素的类型p-div首先创建一个div元素，然后复制p的子节点到div中，最后再用div 替换p6。一个函数需要多少参数