html,css,javascript总结2

接着谈谈闭包。

for (var i = 0; i < Things.length; i++) {
   (function(it){
      console.log(it);
    })(i);
}  i为传入的参数，也就是外部I的值，it为i的引用，输出0,1,2.....
function a(){
   var b=2;
   return function(){
      console.log(b);输出2
   };
} 
a()();
function a1(){
   var b=3;
   function c(){
      console.log(b);输出3
   }
   return c;
}
a1()();
第二个是匿名函数，第三个为普通函数
b为函数内部的变量，外部无法访问，但如果使用闭包，可以访问b的值
闭包主要就是访问私有变量的接口，此变量相对于闭包来说是全局属性，变量依赖于闭包，闭包依赖于外部函数，所以不能被垃圾回收机制所回收，会造成污染，增加内存负担。
闭包不可以随意用，用了记得释放，将其指向null

接着主要谈谈bom与ecmascript

首先介绍几个朋友认识下

offset 自身的，有offsetLeft,offsetWidth,前者是自身距离父类的距离，后者是自身的宽度

page (event||window.event).pageX

client 屏幕的 clientWidth，有document.(documentElement||body)代表屏幕宽度

scroll 有scrollTop代表滑动的高度

对了事件委托实际上与事件冒泡差不多，

就像接收快递，如果快递员到了，来一个发一个，每个人都要过去一次，这样多麻烦；如果快递员到了，我们可以将这件事委托给前台，让前台去签，是不是省事多了

用段代码看看

html部分

<div id="qiantai">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>

js部分：

var a=document,getElementById("qiantai");
a.click=send;
function send(event){
    var event=window.event||event;
    var target=event.target||event.srcElement;
    if(target.className.toLowerCase()=="a"){
    alert("2")
}
}将id为qiantai下的class为a的子类绑定到了父类上，通过点击当前事件上传到父类上执行，不用通过for循环浪费时间

在js中，同一对象只能执行一个事件，后面的事件覆盖前面的事件，如果想让一个对象执行多个事件可以通过绑定事件的方法

var a=document,getElementById("qiantai");
function aa(element,type,hander){
    if(element.addEventListener){
    element.addEventListener("type",hander,false);
}else if(element.attachEvent){
    element.attachEvent("on"+type,hander,false);
}else{
    element["on"+type]=hander;
}
}
aa(a,click,function(){
    alert("1");
})

解除绑定是removeEventListener与detachEvent

在jquery有更简单的on（），off（）等方法

 

最后谈谈css

首先需要了解块级元素有哪些：p,div,ul,li,ut,dl,ol,h1-h6 

行内元素：span img a strong em input select

当然行内元素与块级元素可以变化的，通过display:inline设置为行内元素；block设置为块级元素；inline-block设置为具有块级属性的行内元素

行内元素与块级元素差异是：行内元素的宽与高是不能设置的，行内元素的padding与margin只有左右属性，没有上下属性

css中文叫作层叠样式表，用于装饰html的。

css有class，id，标签选择器，id>class>标签，用数字表示的话可以id=100,class=10,标签=1;计算优先级的时候可以用得到。

css有w3c标准，与怪异标准，在w3c标准下浏览器的宽度与高度

{
	width:100px;
	height:100px;
	border:1px solid red;
	padding:5px;
	margin:10px;
}   width=100+1*2+5*2

怪异模式下

{
    width:100px;
    height:100px;
    border:1px solid red;
    padding:5px;
    margin:10px;
} width包括了border，width，padding，所以width=100，content=100-1*2-5*2；

此外box-sizing有3个值：padding-box,border-box,content-box;

content-box可以看作是w3c下一样

padding-box可以看作width包含了content与padding

border-box可以看作width包含了content与padding与border相当于怪异模式

css的浮动

1，float:left/right

不过加入了float之后需要注意两点：1，记得清除浮动 2，float在ie下有double距离，可以通过设置display：inline实现兼容

清除浮动方式很多，介绍我知道的3种

<div class="fudong">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
.a{
    float:left;
    width:100px;
    height:100px;
}

1,在class为fudong下插入一个标签<div style="clear:both"></div>

2,在class为fudong中增加一个标签｛clear：both｝或者｛overflow：hidden｝

3，也是我经常用的在fudong：after｛content:"",clear:both;display:block,overflow:hidden;}为了兼容ie需要加一个zoom=1；

2，position:absolute/relative/static/fixed

position:absolute  脱离文档流，它的位置取决于它的父类是否有relative，一直往上一直没有，那么它就在body上，通过设置top、bottom、left、right控制位置；

position:relative 未脱离文档，它会在当前位置，通过设置top、bottom、left、right控制位置；

position:fixed 固定文档，通过设置top、bottom、left、right控制位置，会相对于浏览器的滚动而滚动。

一些常见的

border-radius设置角度50%时会是一个圆

box-shadow:0 0 0 red 前面两个是x，y坐标，第三个是模糊程度，最后一个是颜色。当然可以内嵌通过添加insert

text-shadow:文本阴影