前端开发经典问题总结 本文关键词：经典，开发
前端开发经典问题总结 本文简介：1、text-shadow:2px2px2px#f00;text-shadow（文字的影子）{x轴（向右为正）y轴（向下为正晕（模糊宽度没有负值）#ff00（影子颜色）}浏览器兼容：Firefox，Opera，Chrome，Safaribox-shadow:（盒子的影子）{x轴（向右为正）y轴（向下
前端开发经典问题总结 本文内容：
1、text-shadow:2px
2px
2px
#f00;
text-shadow（文字的影子）{x轴（向右为正）
y轴（向下为正
晕（模糊宽度没有负值）
#ff00（影子颜色）}
浏览器兼容：Firefox，Opera，Chrome，Safari
box-shadow:
（盒子的影子）{x轴（向右为正）
y轴（向下为正
晕（模糊宽度没有负值）
#ff00（影子颜色）
inset（内部的效果）}
可以只写x,y,color
inset;另一种x,y,blur,spread,color,inset；
不可以x,y,blur/spread,color,inset
2、border-radius（圆角）:50px;=={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+，Opera
body设置宽度对背景图片没影响
body{
margin:0
auto;
width:960px;
color:#352;
font:14px/20px
“微软雅黑“;
background:#352
url(
/images/bg.jpg
)
fixed
center
no-repeat;}
body>header{font-size:18px;}
body下的子header
not孙子例子
这其中第二个header不受控制
可编辑列表
one
two
three
对于未定义长宽的块级元素，内含浮动的块级元素，若要使其有独占一行的效果可添加display:inline-block属性
Placeholder
中的占位符（仅在支持html5的浏览器下有效）
用法：,作用：类似于提示语在输入框中。
Animation动画
Appearance改变（比如div）为其他样式支持火狐/谷歌/苹果
Appearance:normal/icon/window/button/menu/field
针对CSS3渐变的记录
针对手机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));
针对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;合起来可以清除浮动
第二种；.clear{zoom:1;}.clear:after{content:“/20“;display:block;clear:both;}（
主要为了兼容此div的背景、margin、padding值在各个浏览器下一致；
此div没有背景、margin、padding值，只用clear：both就行了
）
解读浮动闭合最佳方案：clearfix
分享到：更多6
2011-05-16
分类：HTML/CSS
37人评论13,640次浏览
之前给大家介绍两种浮动闭合的办法CSS清除浮动
万能float闭合，得知很多同学都在使用下面的骨灰级解决办法：
.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。
但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。
最优浮动闭合方案（这是我们推荐的）：
.clearfix:after{content:“.“;display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
用法很简单，在浮动元素的父云素上添加class=”demo
clearfix”。
你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：
.demo:after,.demo2:after{content:“.“;display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}
以上写法就避免了改变html结构，直接用css解决了。
很拉轰的浮动闭合办法：
.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的一篇文章得到的方案，测试了，百试不爽，真的很简单，很给力。喜欢的同学也可以试试这个办法。
这种方法是端友radom提供的，测试通过：
.clearfix{overflow:hidden;_zoom:1;}
感谢radom提供的这种方法！！
js笔记：
1、js优化减少请求数量（合并文件，当然也得考虑文件的大小，）
2、js代码性能，尽量使用变量来保存dom的遍历值
3、HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载。
4、与DOM脚本编程工作有关的问题不外乎平稳退化、向后兼容、分离Javascript这。这些问题的解决方式和解决程度影响着网页的可用性和可访问性。
5、语义化--易于阅读、有利于SEO
解决IE6不支持最小高度
height:auto
!important;
height:200px;
/*假定最低高度是200px*/
min-height:200px;
内部div自动撑开外部div
的问题
若内部div有浮动你是无法自动撑开外部的div滴，解决办法清除浮动了
此上传按钮各个浏览器厂家兼容性完全不同，谷歌，苹果一类，最好控制，IE，火狐完全扯淡不支持对样式进行控制
扯淡的兼容性哇
.class{
position:relative;
top:-39px;
right:-200px;通用right:20px;IE7
right:20px/9;IE8
_right:0px;
IE6
height:39px;
width:440px;
filter:alpha(opacity:0);opacity:0;
}
断行变形的问题
每天星期一星期二星期三星期四星期五星期六星期日
如果此行中有人为换行，这会引起样式变形，浏览器解读为空格
Css优先级问题
针对样式优先级情况，内部样式大于继承，继承大于id，id大于class
如
P
span{color:#ff0000;}
#color{#000;}
.color{#fff;}如上，优先级逐级下降
jQuery的空格问题
var
$demo=$(‘.test
:hidden’);
有空格的含义：选中类test下隐藏的元素
var
$demo=$(‘.test:hidden’);
无空格的含义：选中类名为test的隐藏的元素
绝对定位，相对定位
Position：absolute绝对定位，默认情况下其父元素对象是浏览器的左上角，若父元素也是绝对定位，则对象是父元素
Position：relative相对定位，针对父元素定位
插入节点方法
First---append()$(“p”).append(“hello”);
example:I
say
:hello
appendTo()$(“hello”).appendTo(“p”);
I
want
say
hello
针对li:first-child
li:last-child这种伪类，ie他nia的不支持
Focus，点击输入框，这种特效，:focus
{outline:1px
solid
#ff0000;}可以设置；
$(“element”).css{“height”}获取对象所设置的高度
$(“element”).height();获取对象的实际高度
$(“element”).width(“100px”)设置宽度
text-indent:-999px;作用：显示图片效果，内含文字，为了便于SEO的抓取，隐藏掉文字
JS变量定义
Js变量定义不可使用”-“这个符号例如：var
page-count=1;这样是失效的，在css里可以.page-count定义
Js反义字符
/r回车/n换行，一般同时在一起使用”/r/n”
Select
属性multiple=”multiple”，如果不加这个属性，默认只可以选一个
jQuery中对象操作“this”的对象转换问题
$(
tbody>tr
).click(function(){
$(this)
.addClass(
selected
)
.siblings().removeClass(
selected
)
.end()
.find(
:radio
).attr(
checked,true);
})
addClass时仍是默认对象，当执行到siblings这个方法时this已经是原对象的兄弟们了（siblings()），因此要结束这个siblings的返回到原对象
jQuery默认click事件
姓名性别暂住地
前台设计组
张山男浙江宁波
李四女浙江杭州
前台开发组
王五男湖南长沙
找六男浙江温州
后台开发组
Rain男浙江杭州
MAXMAN女浙江杭州
$(function(){
$(
tr.parent
).click(function(){
//
获取所谓的父行
$(this)
.toggleClass(“selected“)
//
添加/删除高亮
.siblings(
.child_
+this.id).toggle();
//
隐藏/显示所谓的子行
}).click();
})
css
关于“浮动边距加倍“及其解决方法
css
关于“浮动边距加倍“及其解决方法-------解决方案是在这个div里面加上display:inline;
写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样-
-|||
开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外道昨晚刨根问底了一次.我靠原来是IE的问题-_,-
今天跟半半唠叨起这件事,还说要加入反IE的行列来着.为啥别的都没问题就IE有问题嘛-x-
浮动边距加倍错误(The
IE
Doubled
Float-Margin
Bug
)
如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。
#ax{
float: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;
就可以了.但是我翻了半天也没有翻到原理,只是说,在这样的情况下,用这样一个声明,就可以阻止IE的边距翻倍,而且并没有任何inline的效果,没有副作用
这个bug实在是很常见=
=据说以前被认为是无法改良的IE的bug.现在虽然IE还是有这bug,但聪明的人们找到了对付它的方法
=================================
问题1：
以DW编辑器为例，在页面做完后，点“文件〉检查页〉浏览器兼容性”，检查你所做的页面在各个浏览器中是否显示正常，如果出现以下问题：
“浮动边距加倍错误”
“如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。
margin加倍的问题
设置为float的div在ie7下显示正常但是在ie6下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
针对部分IE，浏览器解析样式表错误问题，例如，一个写法完全正确的样式表及页面，表现却不正常，这极有可能是样式表或页面中的汉语注释引起的
针对继承问题，看例子
、
针对这种标签的写法，一定要注意对最外ul下的li的定义，如果外面li和内部li都要有高度，宽度的定义一定要控制继承问题，一种替换内部标签（替换红色标签，找其他标签代写）
firefox下
type=“file“的size是多大[原]
firefox对type=“file“的的width定义目前是不支持的，但是FF支持size属性，可以给size设置一个值，来控制上传框的大小。
但是这个size值怎么设置，size=“10“是多宽，默认值又是多少，不能光凭感觉去设置。
用脚本来查看下：
$(function()
{
var
fileArray
=
[];
var
i
=
0;
while
(i
<
100)
{
fileArray.push(i
+
“:“);
i++;
}
document.write(fileArray.join(““));
$(“:file“).each(function()
{
$(this).after(““+
$(this).width()
+
““)
});
});
在火狐下得到这样的结果：
发现了一定的规律，默认为208像素，size=“1“时为85像素，每个size之间相差6.5个像素的宽度，所以我们可以动态的设定size的值，如：
if
($.browser.mozilla)
{
$(this).attr(“size“,1
+
(options.WrapWidth
-
85)
/
6.5)
}
javascript引用外部文件优势：
可维护性好----遍历不同的ＨＴＭＬ页面的ＪａｖａＳｃｒｉｐｔ会造成维护问题
可缓存―――浏览器能够根据具体的设置缓存链接的所有外部ＪａｖａＳｃｒｉｐｔ文件
可适应未来―――
ＥＣＭＡＳｃｒｉｐｔ区分大小写
第一个字符必须是一个字母、下划线或美元符号
其他字符可以是字母、下划线、美元符号或数字
只要意在保存对象的变量还没有真正保存对象，就应该明确让变量保存ｎｕｌｌ值
ｂｏｏｌｅａｎ类型的值是区分大小写的，Ｔｒｕｅ不等于ｔｒｕｅ，Ｔｒｕｅ只是一个标示符
科学计数法：１８０００＝１．８ｅ４；０．００００００５＝５ｅ－７
浮点数值计算不准确
ｉｓＦｉｎｅ（）函数验证数值是否在规定范围内。
ＮａＮ―――Ｎｏｔ
ａ
Ｎｕｍｂｅｒ，函数ｉｓＮａＮ（＂ｂｌｕｅ＂）参数ｂｌｕｅ不是ｎｕｍｂｅｒ类型会返回ｔｒｕｅ
ｉｓＮａＮ（）函数验证参数能不能够转换成数值类型。
有三个函数可以把非数值转换为数值：Ｎｕｍｂｅｒ（）；ｐ·ａｒｓｅＩｎｔ（）；ｐａｒｓｅＦｌｏａｔ（）；
设置table的难看的自带的边框问题：属性
border-collapse:collapse