前端开发经典问题总结

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孙子例子

<body>

前端开发经典问题总结

</body>

这其中第二个header不受控制

<h2>可编辑列表</h2>

<li>three</li>

</ul>

对于未定义长宽的块级元素，内含浮动的块级元素，若要使其有独占一行的效果可添加display:inline-block属性

Placeholder input中的占位符（仅在支持html5的浏览器下有效）

用法：<input type=”text” Placeholder=”请输入密码”/>,作用：类似于提示语在输入框中。

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 分类： 13,640次浏览

之前给大家介绍两种浮动闭合的办法CSS清除浮动万能float闭合，得知很多同学都在使用下面的骨灰级解决办法：

前端开发经典问题总结

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。

最优浮动闭合方案（这是我们推荐的）：

前端开发经典问题总结

用法很简单，在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：

前端开发经典问题总结

以上写法就避免了改变html结构，直接用css解决了。

很拉轰的浮动闭合办法：

前端开发经典问题总结

这种办法是我看国外的一篇文章得到的方案，测试了，百试不爽，真的很简单，很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的，测试通过：

前端开发经典问题总结

感谢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滴，解决办法清除浮动了

<div>

</div>

</div>

</div>

<input type=”file” >此上传按钮各个浏览器厂家兼容性完全不同，谷歌，苹果一类，最好控制，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 style=”color:#ff0000;”></span></p>

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(“<b>hello</b>”);

example:<p>I say :<b>hello</b></p>

appendTo() $(“<b>hello</b>”).appendTo(“p”);

<p>I want say <b>hello</b></p>

针对li:first-child li:last-child这种伪类，ie他nia的不支持

Focus，点击input输入框，

{outline:1px solid #ff0000;}可以设置；

$(“element”).css{“height”}获取对象所设置的高度

$(“element”).height();获取对象的实际高度这种特效，input:focus

$(“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事件

<body>

<table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>

<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州

前端开发经典问题总结

</td></tr>

</tbody>

</table>

</body>

$(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

}

<div >

</div>

//在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>

</ul>

针对这种标签的写法，一定要注意对最外ul下的li的定义，如果外面li和内部li都要有高度，宽度的定义一定要控制继承问题，一种替换内部标签（替换红色标签，找其他标签代写）

firefox对type="file" 的input的width定义目前是不支持的，但是FF支持size属性，可以给size设置一个值，来控制上传框的大小。

但是这个size值怎么设置，size="10"是多宽，默认值又是多少，不能光凭感觉去设置。用脚本来查看下：

前端开发经典问题总结

前端开发经典问题总结

$(function() {

var fileArray = [];

var i = 0;

while (i < 100) {

fileArray.push(i + ":<input type='file' size='" + i + "' /><br />");

i++;

}

document.write(fileArray.join(""));

$("input:file").each(function() { $(this).after("<b>" + $(this).width() + "</b>") });

});

</script>

在火狐下得到这样的结果：

发现了一定的规律，默认为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

相关推荐

前端开发经典问题总结

专栏推荐