前端笔记

一：HTML+css

1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
  Doctype声明位于文档中的最前面的位置，处于标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
    当浏览器厂商开始建立与标准兼容的浏览器时，他们但愿确保向后兼容性。为了实现这一点，他们建立了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式一般模拟老式浏览器（好比Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点没法工做。
    浏览器根据DOCTYPE是否存在以及使用的哪一种DTD来选择要使用的呈现方法。若是XHTML文档包含形式完整的DOCTYPE，那么它通常以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE经常致使页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也致使页面以标准模式呈现，可是有过渡DTD而没有URI会致使页面以混杂模式呈现。DOCTYPE不存在或形式不正确会致使HTML和XHTML文档以混杂模式呈现。
2.行内元素有哪些？块级元素有哪些？CSS的盒模型？
  行内元素有：a b span I b em img input select strong
  块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  w3c标准盒模型：margin border padding content
  IE盒模型：IE的content部分包含了 border 和 padding
3.CSS引入的方式有哪些? link和@import的区别是?
 link、@import
 区别：
    1):link属于xhtml标签，@import属于css标签;
    2):兼容性问题link无问题而@import属于css2.1提出的全部老浏览器不支持，IE5以上才支持;
    3):js可控制DOM改变样式只能用link而@impor不能够，由于@import不支持;
    4):页面加载link快于@import，使用link浏览器会并行下载资源而且不会中止对当前文档的处理，@import须要页面网页彻底载入之后加载;
4.关于CSS specificity
  CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然做为标准，就具备一套相关的断定规定及计算方式，specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别
  !important >内联(1000)>  id(0100)> class(0010) > tag(0001)
  ps:内联eg:<p style="line-height:20px;text-align:center;font-size:12px;color:rgba(7,17,27,0.2)"></p>
5.前端页面由哪三层构成，分别是什么？做用是什么？
  网页分红三个层次，即：结构层、表示层、行为层。
  网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
  网页的表示层（presentation layer） 由 CSS 负责建立。 CSS 对“如何显示有关内容”的问题作出了回答。
  网页的行为层（behavior layer）负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
  w3c-->万维网联盟于1994年成立制定结构+表现标准
  ECMA-->European Computer Manufacturers Association制定的行为标准
6.css兼容问题(都是IE的错，淘宝不兼容IE8，我只想说Nice Job)
    1):就是ie6双倍边距的问题，在使用了float的状况下，不论是向左仍是向右都会出现双倍，最简单的解决方法就是用display:_inline;加到css里面去，另外兼容IE六、七、八、9的css写法
      .bb{
           background-color:#f1ee18;/*全部识别*/
          .background-color:#00deff\9; /*IE六、七、8识别*/
          +background-color:#a200ff;/*IE六、7识别*/
          _background-color:#1e0bd1;/*IE6识别*/ 
       } 。
    2):文字自己的大小不兼容。一样是font-size:14px的宋体文字，在不一样浏览器下占的空间是不同的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不同了。解决方案：给文字设定 line-height 。确保全部文字都有默认的 line-height 值。这点很重要，在高度上咱们不能容忍1px 的差别。
    3):ff下容器高度限定，即容器定义了height以后，容器边框的外形就肯定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。因此不要轻易给容器定义height。
    4):还讨论内容撑破容器问题，横向上的。若是float 容器未定义宽度，ff下内容会尽量撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器须要定义width。
    5):浮动的清除，ff下不清除浮动是不行的，清除浮动方式，经常使用清除浮动:
       .clearfix:after {
             clear: both;
             content: '.';
             display: block;
             visibility: hidden;
             height: 0;
       }
    6):mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现相似问题，都是ie6下的特产，该类bug 出现的状况较为复杂，远不仅这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。
    7):吞吃现象，限于篇幅，我就不展开了。仍是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
    8):注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug下，你们会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
    9):<li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，但愿引发你们正视 ，给li 不一样的属性会有不一样的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，因为问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
    10):img下的留白。解决方案：给img设定 display:block。
    11):失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，缘由是<img />这个inline-block元素和inline元素写在一块儿了。解决方案：让img 和文字都 float起来。
    12):连接的hover状态。a:hover img{width:300px} 咱们想让鼠标hover时，连接里包含的图片宽度变化，惋惜在ie6下无效，ie七、ff下有效。
    13):非连接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie七、ff下才有效果。
    14):ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie七、ff不支持。
    15):ie6下严重的bug，float元素如没定义宽度，内部若有div定义了height或zoom:1，这个div就会占满一整行，即便你给了宽度。float元素若是做为布局用或复杂的容器，都要给个宽度的。
    16):ie6下的bug，绝对定位的div下包含相对定位的div，若是给内层相对定位的div高度height具体值，内层相对层将具备100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
    17):ie6下的bug，<head></head>内有<base target=”_blank”/>的状况下，position:relative层下的float层内文字没法选中。
    18):终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的全部浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
    19):Chrome 中文界面下默认会将小于 12px 的文本强制按照12px显示 
       可经过加入CSS 属性 -webkit-text-size-adjust: none;
    20):超连接访问事后hover样式就不出现了,被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序:
       L-V-H-A :a:link(未访问) {} a:visited(已访问) {} a:hover {} a:active {}   
 8.如何居中一个浮动元素?
    div{
         position:relative/absolute;
         margin: -150px 0 0 -250px;
         left:50%;
         top:50%;
         Width:500px;
         height:300px;
     }
 9.清楚浏览器默认样式-->网上的reset.css多的是
 10.若父子盒子都有透明度的时候，透明度取值为二者相乘。

二.js兼容

1. 获取外部属性
    
    1> 兼容性问题
        getComputedStyle(标签)["属性"]  //火狐谷歌safari均可以,IE不支持
        box.currentStyle["属性"]        //IE支持
    2> 解决方案
        function getStyle(elem, property){
            //判断在该浏览器中currentStyle方法存不存在,存在就用IE浏览器方式获取,不然用其余浏览器     的方式获取.
            return elem.currentStyle ? elem.currentStyle[property] : getComputedStyle(elem)[property];
        }

2. 事件参数

    1> 兼容性问题

        even            //IE不兼容
        window.event  //IE识别

    2> 解决方案
        var e = even || window.event;

3. 清除事件的冒泡

    1> 兼容性问题
        e.cancelBubble();        //IE
        e.stopPropagation();    //存在低版本的IE兼容性问题.其余浏览器都支持.
    2> 解决方案
        window.event ? e.cancelBubble = true : e.stopPropagation();
        //经过window.event判断当前浏览器是不是IE

4. 事件中获取当前对象

    1> 兼容性问题
        e.srcElement   //IE
        e.target       //IE不兼容(在这里的this IE也不兼容)
    2> 解决方案
        window.event ? e.srcElement : e.target;

5.兼容性问题（cookie）

    IE 火狐支持本地缓存；

    谷歌不支持本地缓存，只支持服务器缓存；

6. 兼容性问题（添加监听器）
    
    addEventListener() (IE8及如下不支持)；

7. 阻止浏览器默认行为

    preventDefault(); //w3c的阻止浏览器默认行为
    window.event.returnValue = true;  //IE的阻止浏览器默认行为;

    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }

9. 获取浏览器滚动高度

    var scroll = document.body.scrollTop || document.documentElement.scrollTop;
<!--别走开稍后继续更新-->