一日小结

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{

300px;  

        height:300px;  

              /*firefox*/

        background-color:red9;      /*all ie*/

        *background-color:yellow;         /*ie8*/

        +background-color:pink;        /*ie7*/

        _background-color:orange;       /*ie6*/   

}

:root #test { }  /*ie9*/

@media all and (min-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{

     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(thisObjObject1,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事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

原文地址:https://www.cnblogs.com/lijingsi9210/p/6002409.html