1.关于块级元素和行内元素
首先:对于块级元素来说:块级元素总是独占一行,另起一行开始,其后的元素也另起一行开始。
width height padding margin可以控制;
其次:对于行内元素来说:和相邻的行内元素在同一行显示;
width height padding margin 一般不可控制;
最后:浏览器默认的一些inline-block元素:
<input><label><img><button><textarea>;
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
2.<img>的alt 和 title
alt:图片不出现时显示的文字信息;
title:当鼠标移动到图片上时显示的文字介绍
3.盒模型问题
标准盒模型:margin+border+padding+content;
IE盒模型:在已知宽度的基础上在盒子内部进行的margin+padding+content;
IE 盒子模型、标准 W3C 盒子模型;IE 的content部分包含了 border 和 pading;
4.css的hack模式
#text{
width:300px;
height:300px;
/*firefox*/
background-color:red\9; /*all ie*/
*background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { } /*ie9*/
@media all and (min-width:0px)
{ #test {} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /*chrome and safari*/
5.rgba()兼容ie8:
CSS:
//一般的高级浏览器都支持
background: rgba(255,255,255,0.1);
//IE8下
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如运行截图所示。
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;就是白色。
6.未知元素宽高的居中定位:
#div1{
width: 200px;
height: 200px;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
7.html常见兼容性问题?
。1.双边距BUG float引起的 使用display
。2.3像素问题 使用float引起的 使用dislpay:inline -3px
。3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
。4.Ie z-index问题 给父级添加position:relative
。5.Png 透明 使用js代码 改
。6.Min-height 最小高度 !Important 解决’
。7.select 在ie6下遮盖 使用iframe嵌套
。8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
。9.IE5-8不支持opacity,解决办法:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
。10. IE6不支持PNG透明背景,解决办法: IE6下使用gif图片。
8.权重问题:
!important>id>class>tag
9.css属性继承
可继承: font-size font-family color, ul li dl dd dt;
不可继承 :border padding margin width height ;
10.js的数据类型:
。1.string;
。2.number;
。3.null;
。4.boolean;
。5.object;
。6.undefined;
11.强制数据类型转换和隐式数据类型转换
强制:parseInt();parseFloat();Number();
隐式:== ,!!;
12.数组的几种API:
splice()切割数组的形式
join()将数组转换为字符串
pop()尾部删除
push()尾部添加
unshift()头部添加
shift()头部删除
slice()从原数组中从start下标开始到 end-1 下标之间的项组成的新数组
concat()一个新数组,新数组是将参数添加到原数组中构成的
reverse()数组的反序
sort()对按指定的参数数组元素排序,返回排序后的数组地址
length:数组的长度即数组中元素的个数;
prototype:供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
13.普通事件和事件绑定
普通事件 var btn=document.getElementbyId(#btn);
btn.onclick=function(){
alert(1);
}
btn.onclick=function(){
alert(2);
}
事件绑定 var btn=document.getElementbyId(#btn)
btn.addEventListener("click",function(){
alert(1),false});
btm.addEventListener("click",function(){
alert(2),false});
执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。
addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获
14,ie和标准模式下的兼容写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
14call和apply
call:
call(thisObj,Object1,Object2...)
调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply:
apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
15.增删改查
appendChild;
insertBefore;
replaceChild;
removeChild;
16,事件流模型;
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡