一：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内里去，别的兼容IE6、7、8、9的css写法
      .bb{
           background-color:#f1ee18;/*一切辨认*/
          .background-color:#00deff\9; /*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下，人人会在页面看到猪字涌现两遍，反复的内容量因诠释的若干而变。处理方案：用“<!–[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下无效，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，<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;
<!--别走开稍后继承更新-->