來一套 常規筆試題

1.css盒模型

　　

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

選擇器	權重
通配符選擇器	0
標籤選擇器 、 爲元素選擇器	10
class選擇器、僞類選擇器、屬性選擇器	100
id選擇器	1000
行間樣式	10000
@import	無窮大

 

 

 

 

 

 

.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定位原點是

display	做用
block	將元素變成塊級元素
inline	將元素變成行內元素
none	使元素不存在
inline-block	將元素變成行內塊元素
inherit	繼承父級的display
table	至關於 <table></table>
table-row	至關於<tr></tr>
table-cell	至關於<td></td>或者<dd></dd>
list-item	至關於 列表元素

 

 

 

 

 

 

 

 

 

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代碼示例

　　　　

　　　　1、繼承

　　　　　　一個類繼承另外一個類，能夠實現代碼複用，減小冗餘。

　　　　2、封裝

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

　　　　3、多態

　　　　　　同一函數，能夠適應多種傳參

　　

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

　　number 、string 、 function、 boolean、 undefind、        object

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

　　這四種方法都改變原數組

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

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

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

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

 21.字符串包裝類方法 substr()、substring()、slice()

　　sbustr()　　　　傳兩個參數  截取的起始位置，截取的長度

　　sbustring()　　　傳兩個參數   較小的爲起始位置， 較大的爲截止位置    ，  （留頭去尾）

　　slice()　　　　　 傳一個參數，就是從第幾位向後截取　　如有負數就從字符串的尾部向前數 

　　　　　　　　　　傳兩個參數   前始後終　　截取數組