前端笔记

摘要：一严格模式与混杂模式如何触发这两种模式，区分它们有何意义声明位于文档中的最前面的位置，处于标签之前。包含过渡和的也导致页面以标准模式呈现，但是有过渡而没有会导致页面以混杂模式呈现。不存在或形式不正确会导致和文档以混杂模式呈现。

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:

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里面去，另外兼容IE6、7、8、9的css写法
      .bb{
           background-color:#f1ee18;/*所有识别*/
          .background-color:#00deff9; /*IE6、7、8识别*/
          +background-color:#a200ff;/*IE6、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下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。
    9):
里加 float 
，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
    10):img下的留白。解决方案：给img设定 display:block。
    11):失去line-height。
文字
，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。
    12):链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
    13):非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
    14):ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
    15):ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
    16):ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
    17):ie6下的bug，内有的情况下，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.若父子盒子都有透明度的时候，透明度取值为两者相乘。

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;