前端开发经典问题总结

《前端开发经典问题总结》由会员分享，可在线阅读，更多相关《前端开发经典问题总结（10页珍藏版）》请在装配图网上搜索。

1、1、text-shadow:2px 2px 2px #f00;text-shadow（文字的影子）x轴（向右为正） y轴（向下为正 晕（模糊宽度没有负值） #ff00（影子颜色）浏览器兼容：Firefox，Opera，Chrome，Safaribox-shadow:（盒子的影子）x轴（向右为正） y轴（向下为正 晕（模糊宽度没有负值） #ff00（影子颜色） inset（内部的效果）可以只写x,y,color inset;另一种x,y ,blur,spread,color,inset；不可以x,y,blur/spread,color,inset2、border-radius（圆角）:50px;

2、=border-top-left-radius:50px;border-top-right-radius:50px;border-bottom-left-radius:50px;border-bottom-right-radius:50px;浏览器兼容：IE9，Firefox 4+，Chrome，Safari 5+，Operabody设置宽度对背景图片没影响bodymargin:0 auto;width:960px;color:#352;font:14px/20px 微软雅黑;background:#352 url(./images/bg.jpg) fixed center no-repeat

3、;bodyheaderfont-size:18px; body下的子header not孙子例子这其中第二个header不受控制可编辑列表onetwothree对于未定义长宽的块级元素，内含浮动的块级元素，若要使其有独占一行的效果可添加display:inline-block属性Placeholder input中的占位符（仅在支持html5的浏览器下有效）用法：,作用：类似于提示语在输入框中。Animation动画Appearance改变（比如div）为其他样式支持火狐/谷歌/苹果Appearance:normal/icon/window/button/menu/field针对CSS3渐变的

4、记录针对手机webkit内核的浏览器不识别此写法：background-image: -webkit-linear-gradient(top, #759AE9 0%, #376FE0 50%, #1A5AD9 50%, #2463DE 100%);识别写法如下：background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759AE9), color-stop(50%, #376FE0), color-stop(50%, #1A5AD9), color-stop(100%, #2463DE);

5、针对CSS3 box-shadow属性不仅支持单定义的属性控制如box-shadow:x y spread blur color inset还支持box-shadow:inset x y spread blur color,x y spread blur color,等清除浮动第一种； ：overflow: hidden; _zoom: 1;合起来可以清除浮动第二种；.clearzoom:1;.clear:aftercontent:20;display:block;clear:both;（主要为了兼容此div的背景、margin、padding值在各个浏览器下一致；此div没有背景、margi

6、n、padding值，只用clear：both就行了 ）解读浮动闭合最佳方案：clearfix分享到：更多62011-05-16 分类：HTML/CSS37人评论13,640次浏览之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合，得知很多同学都在使用下面的骨灰级解决办法：.clearclear:both;height:0;overflow:hidden;上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。最优浮动闭合方案（这是我们推荐的）：.clearfi

7、x:aftercontent:.;display:block;height:0;clear:both;visibility:hidden.clearfix*+height:1%;用法很简单，在浮动元素的父云素上添加class=”democlearfix”。你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：.demo:after,.demo2:aftercontent:.;display:block;height:0;clear:both;visibility:hidden.demo,.demo2*+height:1%;以上写法就避免了改变html结构，直接用css解决了。很拉

8、轰的浮动闭合办法：.clearfixoverflow:auto;_height:1%这种办法是我看国外的一篇文章得到的方案，测试了，百试不爽，真的很简单，很给力。喜欢的同学也可以试试这个办法。这种方法是端友radom提供的，测试通过：.clearfixoverflow:hidden;_zoom:1;感谢radom提供的这种方法！js笔记：1、js优化减少请求数量（合并文件，当然也得考虑文件的大小，）2、js代码性能，尽量使用变量来保存dom的遍历值3、HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所

9、有其他资源都要等脚本加载完毕后才能下载。4、与DOM脚本编程工作有关的问题不外乎平稳退化、向后兼容、分离Javascript这。这些问题的解决方式和解决程度影响着网页的可用性和可访问性。5、语义化-易于阅读、有利于SEO解决IE6不支持最小高度height:auto !important;height:200px; /*假定最低高度是200px*/min-height:200px;内部div自动撑开外部div 的问题若内部div有浮动你是无法自动撑开外部的div滴，解决办法清除浮动了此上传按钮各个浏览器厂家兼容性完全不同，谷歌，苹果一类，最好控制，IE，火狐完全扯淡不支持对样式进行控制扯淡的兼

10、容性哇.classposition:relative; top:-39px;right:-200px;通用*right:20px;IE7right:20px9;IE8_right:0px; IE6height:39px; width:440px;filter:alpha(opacity:0);opacity:0;断行变形的问题每天星期一星期二星期三星期四星期五星期六星期日如果此行中有人为换行，这会引起样式变形，浏览器解读为空格Css优先级问题针对样式优先级情况，内部样式大于继承，继承大于id，id大于class如 P spancolor:#ff0000;#color#000;.color#ff

11、f;如上，优先级逐级下降jQuery的空格问题var $demo=$(.test :hidden);有空格的含义：选中类test下隐藏的元素var $demo=$(.test:hidden);无空格的含义：选中类名为test的隐藏的元素绝对定位，相对定位Position：absolute绝对定位，默认情况下其父元素对象是浏览器的左上角，若父元素也是绝对定位，则对象是父元素Position：relative相对定位，针对父元素定位插入节点方法First-append()$(“p”).append(“hello”);example:I say :helloappendTo()$(“hello”).

12、appendTo(“p”);I want say hello针对li:first-child li:last-child这种伪类，ie他nia的不支持Focus，点击input输入框，这种特效，input:focusoutline:1px solid #ff0000;可以设置；$(“element”).css“height”获取对象所设置的高度$(“element”).height();获取对象的实际高度$(“element”).width(“100px”)设置宽度text-indent:-999px;作用：显示图片效果，内含文字，为了便于SEO的抓取，隐藏掉文字JS变量定义Js变量定义不可使

13、用”-“这个符号例如：var page-count=1;这样是失效的，在css里可以.page-count定义Js反义字符r回车n换行，一般同时在一起使用”rn”Select 属性multiple=”multiple”，如果不加这个属性，默认只可以选一个jQuery中对象操作“this”的对象转换问题$(tbodytr).click(function()$(this).addClass(selected).siblings().removeClass(selected).end().find(:radio).attr(checked,true);)addClass时仍是默认对象，当执行到sib

14、lings这个方法时this已经是原对象的兄弟们了（siblings()），因此要结束这个siblings的返回到原对象jQuery默认click事件姓名性别暂住地前台设计组张山男浙江宁波李四女浙江杭州前台开发组王五男湖南长沙找六男浙江温州后台开发组Rain男浙江杭州MAXMAN女浙江杭州$(function()$(tr.parent).click(function() / 获取所谓的父行$(this).toggleClass(selected) / 添加/删除高亮.siblings(.child_+this.id).toggle(); / 隐藏/显示所谓的子行).click();)css 关

15、于浮动边距加倍及其解决方法css 关于浮动边距加倍及其解决方法-解决方案是在这个div里面加上display:inline;写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外道.昨晚刨根问底了一次.我靠.原来是IE的问题-_,-今天跟半半唠叨起这件事,还说要加入反IE的行列来着.为啥别的都没问题就IE有问题嘛.-x-浮动边距加倍错误(The IE Doubled Float-Margin Bug )如果某条边与浮动方向同向，则向该边上的浮动框应用边距

16、时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。#axfloat:left;-设定了左浮动width:500px;height:100px;#bx float: left;width: 150px;height: 50px;margin: 0 0 0 10px;-设定了左边距10px/在IE中导致浮动边距加倍,10px会变成20px.在不知道的情况下,以前多半会选择减少div宽度,觉得是margin和宽度之间出了问题.解决方法:在margin后面跟一句 display:inline; 就可以了.但是我翻了半天也没有翻到原理,只是说,在这样的情况下,用这样一个声明,就可以阻止

17、IE的边距翻倍,而且并没有任何inline的效果,没有副作用这个bug实在是很常见= =.据说以前被认为是无法改良的IE的bug.现在虽然IE还是有这bug,但聪明的人们找到了对付它的方法=问题1：以DW编辑器为例，在页面做完后，点“文件检查页浏览器兼容性”，检查你所做的页面在各个浏览器中是否显示正常，如果出现以下问题：“浮动边距加倍错误”“如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。margin加倍的问题 设置为float的div在ie7下显示正常但是在ie6下设置的margin会加倍。这是一个ie6都存在的bug。

18、解决方案是在这个div里面加上display:inline;针对部分IE，浏览器解析样式表错误问题，例如，一个写法完全正确的样式表及页面，表现却不正常，这极有可能是样式表或页面中的汉语注释引起的针对继承问题，看例子、针对这种标签的写法，一定要注意对最外ul下的li的定义，如果外面li和内部li都要有高度，宽度的定义一定要控制继承问题，一种替换内部标签（替换红色标签，找其他标签代写）firefox下input type=file的size是多大原firefox对type=file 的input的width定义目前是不支持的，但是FF支持size属性，可以给size设置一个值，来控制上传框的大小。

19、但是这个size值怎么设置，size=10是多宽，默认值又是多少，不能光凭感觉去设置。 用脚本来查看下：$(function()varfileArray=;vari=0;while(i100)fileArray.push(i+:);i+;document.write(fileArray.join();$(input:file).each(function()$(this).after(+$(this).width()+););在火狐下得到这样的结果：发现了一定的规律，默认为208像素，size=1时为85像素，每个size之间相差6.5个像素的宽度，所以我们可以动态的设定size的值，如：if

20、($.browser.mozilla)$(this).attr(size,1+(options.WrapWidth-85)/6.5)javascript引用外部文件优势：可维护性好-遍历不同的页面的会造成维护问题可缓存浏览器能够根据具体的设置缓存链接的所有外部文件可适应未来区分大小写第一个字符必须是一个字母、下划线或美元符号其他字符可以是字母、下划线、美元符号或数字只要意在保存对象的变量还没有真正保存对象，就应该明确让变量保存值类型的值是区分大小写的，不等于，只是一个标示符科学计数法：；浮点数值计算不准确（）函数验证数值是否在规定范围内。，函数（）参数不是类型会返回（）函数验证参数能不能够转换成数值类型。有三个函数可以把非数值转换为数值：（）；（）；（）；设置table的难看的自带的边框问题：属性border-collapse:collapse