1.css盒模型

2.css選擇器有哪些？那些屬性可以繼承？優先級算法如何計算？css3新增偽類有哪些？

.wrapper,.box{}　　---> 並列選擇器

.wrapper>.box{}　　--->直接子元素選擇器

.wrapper .box{}　　---->後代選擇器

可以繼承的屬性 color、font-size等字體屬性　　text-indent、text-align、line-height等文本屬性 visibility cursor等

樣式的　　優先級 就是選擇器的權重相加 顯示權重大的 樣式

新增偽類

　　p:first-of-type　　當前層p標簽的第一個

　　p:last-of-type　　當前層p標簽的最後一個

　　p:only-of-type　　所有p標簽中 作為唯一子元素的p

　　div:nth-child(n)　　div子元素中的第n個

　　div:last-child　　　div的最後一個子元素

　　p:not　　　　　　除了p的其他所有標簽

　　input:enable　　　所有啟用的input

　　input:disable　　　　所有禁用了的input

　　input:checked　　　　所有被選中的 input標簽

　　:root　　　　　　　　根元素html

　　::selection　　　　用戶選中的部分

3.用css實現 左右固定，中間自適應的三欄布局

CSS

　　*{
      margin: 0;
      padding: 0;
    }
    .wrapper{
      padding: 0 200px;
    }
    .center,.left,.right{
      height: 200px;
      float: left;      
    }
    .left,.right{
      width: 200px;
      background: pink
 
;
      position: relative;
    }
    .center{
      background: blue;
      width: 100%;
    }
    .left{
      margin-left: -100%;
      left: -200px;
    }
    .right{
      margin-left: -200px;
      right: -200px;
    }

html

  <div class="wrapper">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>    
  </div>

4.說明浮動產生的效果,至少列舉三種清除浮動的方法

　　元素浮動之後，就脫離當前同一層的文本流，浮動元素根據設置不同的浮動方向，浮動到父元素的邊界，或者其他浮動的元素

　　清除浮動的方法

　　　　1.最簡潔的方法

　　　　　　在需要清除浮動的元素後面添加一個 div 並設置 css 　　 clear:both

　　　　2.給父級設置 overfloat：hidden

　　　　3.常規方法

.clearFloat:after{
  display:block;
  clear:both;
  content:‘‘;
  visibility:hidden;
  height:0;    
}
.clearFloat{
 zoom:1;　　//兼容IE6
}

5.列出display的值,說明他們的作用。positioin的值，relative和absolte定位原點是

position 有 absolute 、 relative 、fixed 、 inherit

　　relative 　　是相對於自身原本在文本流中的位置進行定位

　　absolute　　是根據最近有定位的父級進行定位的

6.前端頁面有哪三層結構? 分別是什麽？作用是什麽？

　　結構層 　　html　　頁面的結構布局

　　樣式層　　css　　 前端頁面的樣式

　　行為層　　js　　　 頁面交互

7.css中可以通過哪些屬性定義使DOM元素不顯示在瀏覽器可視範圍內

　　postion 的各種定位 可以將元素 移出屏幕

　　visibility:hidden　　可以設置dom的透明度 為透明的，但是還占據原來的位置 還存在

　　opacity:0　　　　　　設置Dom元素的不透明度 為0 即使DOM透明 與Visibility:hidden效果相同

　　display:none　　　　使元素消失，不存在與文檔流中

8.超鏈接訪問後hover樣式就不出現的問題是什麽？如何解決？

　　a標簽的4個狀態

　　link　　　　　　默認狀態

　　hover　　　　　鼠標懸停

　　active　　　　　點擊的瞬間

　　visited　　　　　訪問過的

。。。。上網上查的 試了好久 並沒有試出來 hover 不好使的情況

9.rgba()和opacity的透明效果有什麽不同

　　rgba()　　　是設置在 dom元素背景顏色上的　　不會影響子元素

　　opacity　　設置的透明度是相對 dom元素整體的 會繼承給子元素

10.CSS中可以讓文字在垂直和水平方向上重疊的兩個屬性是什麽？

　　我以為是 line-height 和 text-indent

11.display:none 與 visilibity：hidden的區別是什麽

　　display:none;是 是元素消失於文檔流中，不存在於Dom結構中

　　visilibity:hidden　　是設置的 元素的 透明度 為透明 而元素仍然存在於 DOM結構中 任然占據原來的位置

12.知道css有個content屬性麽？有什麽作用？如何應用？

　　可以配合為元素 :after/:befor 設置為元素裏的內容

a:after{content:attr(‘href‘)}

13.編寫函數，實現冒泡排序

    var arr = [12,123,345,21,88];

    function sort (arr){
      var cut = 0,
          len = arr.length - 1;
      for(var i = 0; i < len; i++) {
        for(j = i; j < len; j++){
          if(arr[j] > arr[j+1]) {
            cut = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = cut;
          }
        }
      }
      return(arr)
    }
    var after = sort(arr);
    console.log(after);

14.談談你對閉包的理解，寫一個簡單的閉包實例

　　由於js函數作用域，在函數外部無法訪問函數內部的東西，通過在函數內添加一個相對於這個函數是子函數，也就是可以讀取這個函數的內容的函數，return這個函數 就可以在最外層函數外面訪問函數內的內容了　　

　　　形象的解釋 閉包就是 內部函數和外部函數的一道橋梁

function f1(){
  var n = 666;
  function f2() {
    console.log(n);
  }
}
f1()();    //666

15.閉包與定時器混合考驗

//修改如下代碼，讓循環輸出結果依次為1，2，3，4，5

for(var i=1; i<=5; i++) {
  setTimeout(function timer(){
    console.log(i);
  },i*1000)
}

　　修正代碼

    for(var i = 1; i <=5; i++) {
      (function(j){
        setTimeout(timer = () => {
          console.log(j);
        }, j*1000);
      })(i)
    }

16.扁平化多維數組arr=[1,3,4,5[6,[0,1,5],9],[3,5,[1,5]],[5]]　　;

　　扁平化就是將多維數組編程一維的

　　方法一　　遍歷數組

function bianPingHua(arr){
      var newArr = [];
      arr.forEach(
        function(item){
          if(Array.isArray(item)){
            newArr = newArr.concat(bianPingHua(item));//concat是將item的每一位 拼接到newArr後面 且不改變newArr 所以要用賦值
　　　　　　}else{
            newArr.push(item);//在數組最後添加一位   這裏如果是一個數組，任然相當於 newArry的一位
          }
        }
      );
      return newArr;
    }
    var oEnd = bianPingHua(arr);
    console.log(oEnd);

　　方法二 toString與split

var newArr = arr.toString().split(‘,‘);
    console.log(newArr);

17.談談你對this指向的理解

　　普通對象、計時器、定時器的this 指向window

　　對象中的 方法中的this 指向的就是這個對象

　　綁定事件執行時this指向dom

改變this指向的方法 call、apply 、bind

    function Foo () { 
    }
    function son (){
      console.log(this);
    }
    son.call(Foo);
    son.apply(Foo);  
    son.bind(Foo)();

18.說說你對面向對象的理解，然後寫一段js代碼示例

　　　　一、繼承

　　　　　　一個類繼承另一個類，可以實現代碼復用，減少冗余。

　　　　二、封裝

　　　　　　將函數封裝起來，隱藏內部信息，用戶無需知道對象內部的方法實現的過程，但可以使用對象的方法

　　　　三、多態

　　　　　　同一函數，可以適應多種傳參

19.javascript的typeof返回類型有哪些

　　number 、string 、 function、 boolean、 undefind、 object

20.數組方法 pop(),push(),unshift(),shift()

　　這四種方法都改變原數組

　　pop()在最後一位刪除一位　　傳參無效

　　push()在最後一位添加幾位　　可以用 , 傳多個參數 返回值是 length

　　unshift()在第一位添加幾位　　也可以用 , 傳多個參數 返回值是length

　　shift() 在第一位刪除一位　　傳參無效

來一套 常規筆試題