html+css代码优化推荐读物

一、闭合浮动：http://www.cnblogs.com/lhb25/p/3674353.html

     在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；触发条件：

        1、float 除了none以外的值
　　2、overflow 除了visible 以外的值（hidden，auto，scroll ）
　　3、display (table-cell，table-caption，inline-block)
　　4、position（absolute，fixed）
　　5、fieldset元素
     在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。触发条件：

         1、position: absolute
　　 2、float: left|right
　　 3、display: inline-block
　　 4、width: 除 “auto” 外的任意值
　　5、height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1% ）
　　6、zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
　　7、writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp

故为达到浏览器兼容，较好的选择为：

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

改进1：区别-由于存在Unicode字符不适合内嵌CSS的GB2312编码的页面

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

改进2：区别-用来处理 margin 边距重叠的，由于内部元素 float 创建了BFC，导致内部元素的margin-top和 上一个盒子的 margin-bottom 发生叠加。

.clearfix:before,.cf:after {content:"";display:table;}
.clearfix:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom:1; }

活学活用，闭合浮动很有用，举我曾经遇到的例子来说，

问题描述：div ul li 嵌套的使用，如何解决增加多个li后DIV高度自动适应问题，

解决方法，

html

<div class='up'>

<ul>

<li>

</li>

<li>

</li>

<li>

               </li>

</ul>

       <div class='clearfix'></div>

</div>

<div class='bottom'>

</div>

欲实现的效果：

两个div高度均随内容大小改变

css：

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.up {
  width: 100%;
}
.up ul {
  width: 100%;
  height: auto;
  min-height: 200px;
}
.up ul li {
  width: 30%;
  height: 180px;
  float: left;
  margin-top: 15px;
  margin-right: 15px;
  margin-bottom: 50px;
  margin-left: 0;
}

.bottom {
  width: 100%;
  position: relative;
  top: 0px;
  left: 30px;
  min-height: 230px;
}

二、javascript事件处理

http://www.cnblogs.com/hyaaon/p/4630128.html

1、IE标准、W3C标准

2、事件流----冒泡事件流（IE8及以下仅支持冒泡）、捕获事件流

3、将冒泡事件流和捕获事件流统一在一起的为DOM2事件模型，该事件模型给出两个规范：

      —— 一个元素可以绑定多个同一类型的事件

     —— 分为3个阶段，捕获阶段、目标阶段和冒泡阶段

4、事件绑定，三种方法：之所以平常直接忽略这类问题，是因为我们绑定事件的元素其父级或上层元素无相关事件的处理函数，若div和div>a均绑定了onclick'，这时事件对象判定就很有意义了。

      —— element.on[event]=funcation(){}——Dom0级事件模型

              eg:$(".link_demo").get(0).onclick=function(e){

             var e=e||window.event;

.......

               }

      ___  element.attachEvent(on[event],function,useCapture)；—— IE5-10支持

      ___  element.addEventListener(event,function,useCapture)；——  Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。

    这里，useCapture默认false，指仅在目标阶段和冒泡阶段触发处理事件；为true，指在捕获阶段触发处理事件；若想在三个阶段均监听事件，则设置两次，一次为true，一次为false；

5、在进行事件绑定前，先了解事件模型

  

     获取直接触发事件的元素        ——e.srcElement：FF不支持

                                                         ——e.target: IE8及以下不支持

     获取该事件目前传递到的元素——this: 所有浏览器均支持

                                                         ——e.currentTarget: IE8及以下不支持

    DOM0级事件模型

   element.on[type]=function(e){}——所有浏览器均支持

    DOM2级事件模型1

   attachEvent

   获取直接触发事件的元素        ——e.srcElement：FF不支持

   获取该事件目前传递到的元素——this: 所有浏览器均支持.始终指向window，可以使用call/apply改变this指向
                                                                        element.attachEvent("on"+type,function(){ handler.apply(element,arguments); })

    DOM2级事件模型2

    addEventListener

    获取直接触发事件的元素        ——e.target: IE8及以下不支持
     获取该事件目前传递到的元素——this: 所有浏览器均支持
                                                         ——e.currentTarget: IE8及以下不支持

   现在先设计一个兼容各浏览器的事件监听函数，且能很好的判定该事件是否来源于我们想要响应和执行处理的元素对象，但是若一个html中含有同class的多个对象A1-A10绑定了同一click事件,而每个都设定了不同的处理函数，下面封装的函数便需要加入阻止事件传递的方法。

6、阻止事件传递的方法cancelBubble=true 和stopProgatior()

     若需要在冒泡阶段阻止事件传递，在兼容addEventListener()和attachEvent()的同时，为保险起见，需要对阻止事件传递方式进行兼容。

7、阻止默认事件 returnValue = false 和preventDefault()

      returnValue=false—— DOM0事件模型下，FF，IE9-IE11及以下不支持

                                      —— DOM2事件模型1下，即attachEvent绑定事件下，对于支持attachEvent的浏览器，均支持

                                      —— DOM2事件模型2下，对于支持addEventListener的浏览器，在捕获阶段：FF、IE9-11不会阻止默认事件。在冒泡阶段：IE9-11不会阻止默认事件。

      preventDefault()———DOM0事件模型下，IE8及以下不支持

                                   ———DOM2事件模型1下，即attachEvent绑定事件下，对于支持attachEvent的浏览器，均不支持e.preventDefault()

                                   ———DOM2事件模型2下，对于支持addEventListener的浏览器，无论捕获还是冒泡阶段都可以阻止默认事件。

结合所有兼容情况，可设计兼容框架如下：

var ob = getDocumentsByClassName("btn");

for(var i=0;i<ob.length;i++){

    if(ob[i].addEventListener){

    ob[i].addEventListener("click",triggle(e,true),true);

ob[i].addEventListener("click",triggle(e,false),false);

     else if(ob[i].attachEvent){
        ob[i].attachEvent("onclick",triggle1.apply(ob[i],arguments));
    }

}

function triggle(e,spos){

        e = e ||window.event;

        var target = e.target|;

        var currentTarget = e.currentTarget;

e.preventDefault();

      判断条件{冒泡还是捕获阶段停止

       if(e.stopPropogation){

e.stopPropogation();

}

       else{

e.cancleBubble=true;

        }

     }

/*函数执行主体*/

       判定target与期望处理的元素是否一致，从id、类名、选择器名入手，若一致，执行-------这里是考虑了事件代理的情况，因为先有捕获阶段，故挂载在父级的监听函数响应，判断target，决定处理方案

}

function triggle1(e){
        e = e ||window.event;
        var target = e.srcElement;
        var currentTarget = e.this;

returnValue = false;

        判断条件{冒泡还是捕获阶段停止
cancleBubble=true;

        }

        /*函数执行主体*/

       判定target与期望处理的元素是否一致，从id、类名、选择器名入手，若一致，执行-------这里是考虑了事件代理的情况
}

三、css参考手册

http://www.css88.com/book/css/properties/layout/display.htm