前端开发经典问题总结Word文档下载推荐.docx
- 文档编号:8528577
- 上传时间:2023-05-11
- 格式:DOCX
- 页数:10
- 大小:24.28KB
前端开发经典问题总结Word文档下载推荐.docx
《前端开发经典问题总结Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《前端开发经典问题总结Word文档下载推荐.docx(10页珍藏版)》请在冰点文库上搜索。
section>
/section>
/body>
这其中第二个header不受控制
h2>
可编辑列表<
/h2>
ulcontenteditable="
true"
>
li>
one<
/li>
two<
three<
/ul>
对于未概念长宽的块级元素,内含浮动的块级元素,若要使其有独占一行的效果可添加display:
inline-block属性
Placeholderinput中的占位符(仅在支持html5的阅读器下有效)
用法:
inputtype=”text”Placeholder=”请输入密码”/>
作用:
类似于提示语在输入框中。
Animation动画
Appearance改变(比如div)为其他样式支持火狐/谷歌/苹果
Appearance:
normal/icon/window/button/menu/field
针对CSS3渐变的记录
针对电话webkit内核的阅读器不识别此写法:
background-image:
-webkit-linear-gradient(top,#759AE90%,#376FE050%,#1A5AD950%,#2463DE100%);
识别写法如下:
-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#759AE9),color-stop(50%,#376FE0),color-stop(50%,#1A5AD9),color-stop(100%,#2463DE));
针对CSS3box-shadow属性不仅支持单概念的属性控制如
xyspreadblurcolorinset
还支持box-shadow:
insetxyspreadblurcolor,xyspreadblurcolor,等
清除浮动
第一种;
:
:
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
2021-05-16
分类:
HTML/CSS
37人评论13,640次阅读
之前给大家介绍两种浮动闭合的办法CSS清除浮动全能float闭合,得知很多同窗都在利用下面的骨灰级解决办法:
.clear{clear:
height:
0;
hidden;
上诉办法是在需要清除浮动的地方加个或,咱们知道这样能解决大体清浮动问题。
可是这种方式的最大缺点就是改变了html结构,虽然只是加个div。
最优浮动闭合方案(这是咱们推荐的):
.clearfix:
."
visibility:
hidden}
.clearfix{*+height:
1%;
用法很简单,在浮动元素的父云素上添加class=”demo
clearfix”。
你会发现这个办法也有个短处,但的确是小问题。
改变css写法就ok了:
.demo:
after,.demo2:
.demo,.demo2{*+height:
以上写法就避免了改变html结构,直接用css解决了。
很拉轰的浮动闭合办法:
.clearfix{overflow:
auto;
_height:
1%}
这种办法是我看国外的一篇文章取得的方案,测试了,百试不爽,真的很简单,很给力。
喜欢的同窗也可以试试这个办法。
这种方式是端友radom提供的,测试通过:
_zoom:
感激radom提供的这种方式!
!
js笔记:
1、js优化减少请求数量(归并文件,固然也得考虑文件的大小,)
2、js代码性能,尽可能利用变量来保留dom的遍历值
3、HTTP规范,阅读器每次从同一个域名中最多只能同时下载两个文件。
下载脚本期间,阅读器不会下载其他任何文件,即即是来自不同域名的文件也不会下载,所有其他资源都要等脚本加载完毕后才能下载。
4、与DOM脚本编程工作有关的问题不外乎平稳退化、向后兼容、分离Javascript这。
这些问题的解决方式和解决程度影响着网页的可用性和可访问性。
5、语义化--易于阅读、有利于SEO
解决IE6不支持最小高度
auto!
important;
200px;
/*假定最低高度是200px*/
min-height:
内部div自动撑开外部div的问题
若内部div有浮动你是无法自动撑开外部的div滴,解决办法清除浮动了
div>
<
divstyle=”float:
left”>
/div>
divstyle=”clear:
both”>
inputtype=”file”>
此上传按钮各个阅读器厂家兼容性完全不同,谷歌,苹果一类,最好控制,IE,火狐完全扯淡不支持对样式进行控制
扯淡的兼容性哇
.class{
position:
relative;
top:
-39px;
right:
-200px;
通用
*right:
20px;
IE7
20px\9;
IE8
_right:
0px;
IE6
39px;
440px;
filter:
alpha(opacity:
0);
opacity:
断行变形的问题
inputtype="
checkbox"
name="
/>
label>
天天<
/label>
label>
礼拜一<
礼拜二<
礼拜三<
礼拜四<
礼拜五<
礼拜六<
礼拜日<
若是此行中有人为换行,这会引发样式变形,阅读器解读为空格
Css优先级问题
针对样式优先级情况,内部样式大于继承,继承大于id,id大于class
如<
p>
spanstyle=”color:
#ff0000;
”>
/span>
/p>
Pspan{color:
#color{#000;
.color{#fff;
}如上,优先级逐级下降
jQuery的空格问题
var$demo=$(‘.test:
hidden’);
有空格的含义:
选中类test下隐藏的元素
var$demo=$(‘.test:
无空格的含义:
选中类名为test的隐藏的元素
绝对定位,相对定位
Position:
absolute绝对定位,默许情况下其父元素对象是阅读器的左上角,若父元素也是绝对定位,则对象是父元素
relative相对定位,针对父元素定位
插入节点方式
First---append()$(“p”).append(“<
b>
hello<
/b>
”);
example:
Isay:
appendTo()$(“<
”).appendTo(“p”);
Iwantsay<
针对li:
first-childli:
last-child这种伪类,ie他nia的不支持
Focus,点击input输入框,
这种特效,input:
focus
{outline:
1pxsolid#ff0000;
}可以设置;
$(“element”).css{“height”}获取对象所设置的高度
$(“element”).height();
获取对象的实际高度
$(“element”).width(“100px”)设置宽度
text-indent:
-999px;
作用:
显示图片效果,内含文字,为了便于SEO的抓取,隐藏掉文字
JS变量概念
Js变量概念不可利用”-“这个符号例如:
varpage-count=1;
这样是失效的,在css里可以.page-count概念
Js反义字符
\r回车\n换行,一般同时在一路利用”\r\n”
Select属性multiple=”multiple”,若是不加这个属性,默许只可以选一个
jQuery中对象操作“this”的对象转换问题
$('
tbody>
tr'
).click(function(){
$(this)
.addClass('
selected'
.siblings().removeClass('
.end()
.find('
:
radio'
).attr('
checked'
true);
})
addClass时仍是默许对象,当执行到siblings这个方式时this已是原对象的兄弟们了(siblings()),因此要结束这个siblings的返回到原对象
jQuery默许click事件
table>
<
thead>
<
tr>
th>
姓名<
/th>
性别<
暂住地<
/tr>
/thead>
trclass="
parent"
id="
row_01"
tdcolspan="
3"
前台设计组<
/td>
child_row_01"
td>
张山<
男<
浙江宁波<
李四<
女<
浙江杭州<
row_02"
前台开发组<
child_row_02"
王五<
湖南长沙<
找六<
浙江温州<
row_03"
后台开发组<
child_row_03"
Rain<
MAXMAN<
/tbody>
/table>
$(function(){
$('
'
).click(function(){oggleClass("
selected"
)iblings('
.child_'
+.toggle();
lick();
})
css关于"
浮动边距加倍"
及其解决方式
及其解决方式-------解决方案是在这个div里面加上display:
inline;
写div代码的时候,常常发现明明宽度算得很准确,可是莫明其妙的会和计划的布局不太一样--|||
开始以为自己代码写的有问题,拼命找bug也一无所得,最后可能会略微修改样式来达到想要的效果,但终究也是外道..昨晚寻根究底了一次...我靠..原来是IE的问题-_,-
今天跟半半唠叨起这件事,还说要加入反IE的行列来着...为啥别的都没问题就IE有问题嘛..-x-
浮动边距加倍错误(TheIEDoubledFloat-MarginBug)
若是某条边与浮动方向同向,则向该边上的浮动框应用边距时,边距会增加一倍。
此错误只影响一次或多次浮动的某行中的第一次浮动。
#ax{
float:
left;
-----------------------------设定了左浮动
500px;
100px;
#bx{
left;
150px;
50px;
00010px;
--------------设定了左侧距10px
div>
.在不知道的情况下,以前多半会选择减少div宽度,感觉是margin和宽度之间出了问题..
解决方式:
在margin后面跟一句display:
就可以够了...可是我翻了半天也没有翻到原理,只是说,在这样的情况下,用这样一个声明,就可以够阻止IE的边距翻倍,而且并无任何inline的效果,没有副作用
这个bug实在是很常见==....听说以前被以为是无法改良的IE的bug...此刻虽然IE仍是有这bug,但伶俐的人们找到了对付它的方式
=================================
问题1:
以DW编辑器为例,在页面做完后,点“文件〉检查页〉阅读器兼容性”,检查你所做的页面在各个阅读器中是不是显示正常,若是出现以下问题:
“浮动边距加倍错误”
“若是某条边与浮动方向同向,则向该边上的浮动框应用边距时,边距会增加一倍。
margin加倍的问题设置为float的div在ie7下显示正常可是在ie6下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:
针对部份IE,阅读器解析样式表错误问题,例如,一个写法完全正确的样式表及页面,表现却不正常,这极有可能是样式表或页面中的汉语注释引发的
针对继承问题,看例子
、<
ul>
针对这种标签的写法,必然要注意对最外ul下的li的概念,若是外面li和内部li都要有高度,宽度的概念必然要控制继承问题,一种替换内部标签(替换红色标签,找其他标签代写)
firefox下inputtype="
file"
的size是多大[原]
firefox对type="
的input的width概念目前是不支持的,可是FF支持size属性,可以给size设置一个值,来控制上传框的大小。
可是这个size值怎么设置,size="
10"
是多宽,默许值又是多少,不能光凭感觉去设置。
用脚本来查看下:
script
type="
text/javascript"
$(function()
{
var
fileArray
=
[];
i
while
(i
100)
+
input
type='
file'
size='
/>
br
);
i++;
("
));
$("
input:
).each(function()
{
$(this).after("
$(this).width()
)
});
/script>
XX文库-让每一个人平等地提升自我在火狐下取得这样的结果:
发现了必然的规律,默以为208像素,size="
1"
时为85像素,每一个size之间相差个像素的宽度,所以咱们可以动态的设定size的值,如:
if
($.
$(this).attr("
size"
1
-
85)
/
javascript引用外部文件优势:
可保护性好----遍历不同的HTML页面的JavaScript会造成保护问题
可缓存―――阅读器能够按照具体的设置缓存链接的所有外部JavaScript文件
可适应未来―――
ECMAScript区分大小写
第一个字符必需是一个字母、下划线或美元符号
其他字符可以是字母、下划线、美元符号或数字
只要意在保留对象的变量尚未真正保留对象,就应该明确让变量保留null值
boolean类型的值是区分大小写的,True不等于true,True只是一个标示符
科学计数法:
18000=1.8e4;
0.0000005=5e-7
浮点数值计算不准确
isFine()函数验证数值是不是在规定范围内。
NaN―――Not a Number,函数isNaN("blue")参数blue不是number类型会返回true
isNaN()函数验证参数能不能够转换成数值类型。
有三个函数可以把非数值转换为数值:
Number();
p·
arseInt();
parseFloat();
设置table的难看的自带的边框问题:
属性
border-collapse:
collapse
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 开发 经典 问题 总结