十道前端面試題（2）

1. 爲什麼css樣式初始化，目的是爲了什麼
2. js繼承
3. 常見佈局的方法
4. rem，px，em的區別
5. typeof去判斷數據類型返回值有哪些
6. 快排和冒泡的原理
7. 清除浮動的方法
8. 定時器setTimeout的運行機制
9. get和post的請求區別
10. 浮動元素有什麼特性

---

1. 爲什麼css樣式初始化，目的是爲了什麼

1. 之所以要進行css樣式初始化是因爲不同瀏覽器對標籤對默認樣式值不同
2. 如果不進行初始化會導致頁面在不同瀏覽器上的顯示差異

附上各網站初始化代碼：

1. 最簡單的初始化樣式

* { padding: 0; margin: 0; }

2. 淘寶樣式初始化

 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
 body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
 h1, h2, h3, h4, h5, h6{ font-size:100%; }
 address, cite, dfn, em, var { font-style:normal; }
 code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
 small{ font-size:12px; }
 ul, ol { list-style:none; }
 a { text-decoration:none; }
 a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

3. 騰訊QQ官網樣式初始化

 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
5 em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word} 

4. 新浪官網樣式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";} 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
 a:link{color:#009;} 
 a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

---

2. JS繼承（點擊查看答案）>>

---

3. 常見佈局的方法（點擊查看答案) >>

---

4. rem，px，em的區別

• 首先它們都是計量單位，表示尺寸

1. px(Pixel)像素。相對長度單位。
   像素px是相對於顯示屏分辨率而言的。使用px可以準確的定位網頁元素，但是，不同顯示器網頁的顯示效果可能會有差異，比較難兼容。（⚠️IE無法調整用px作爲單位的字體大小。）

2. em相對長度單位。
   相對父元素的屬性而計算。示例： 如果父元素的font-size:16px,那2em =2*16px = 32px;
   所有未經調整的瀏覽器都符合:1em=16px。

3. rem相對長度單位。
   rem是CSS3新增的一個單位。rem是相對於HTML根元素的font-size值而言的.\

px,em,rem轉換工具:http://pxtoem.com/

---

5. typeof去判斷數據類型返回值有哪些

typeof返回的數據類型一共有6種，分別是：

1. object
2. undefined
3. string
4. number
5. boolean
6. function

⚠️null和Array返回object

使用一個未定義的變量會報錯，但是typeof檢測一個爲定義變量數據類型不會報錯，返回undefined

console.log(a);     // error: a is not defined

typeof a ; 	// "undefined"

---

6. 快排和冒泡的原理

1. 快排 -> 快速排序 是所有排序算法中最快的一個，其時間複雜度O(n log n)
   基本思想：首先在列表中找一個值作爲基準值 -> 數據圍繞基準值進行 -> 將列表中小於基準值的元素移到數組的左邊，大於基準值的元素移到數組的右邊

2. 冒泡排序
   基本思想： 比較所有相鄰元素，如果前一個比後面一個大，兩者交換位置。最後比較大的值的元素就會一步一步的移動到後面正確的位置。較小的元素就像冒泡一樣出現在數組前面位置。

點擊查看js實現各種排序算法。 >>

---

7. 清除浮動的方法

清除浮動的本質： 主要是爲了解決父級元素由於子級元素浮動引起的內部高度爲0的問題。

常用的4種方法：

1. 在最後一個浮動元素後面新加一個額外的標籤，給其設置屬性clear:both
   示例：

<div class="father">
	  <div class="floatA"></div>
	  <div class="floatB"></div>
	  <div class="otherClear"></div> 
</div>

 .floatA {
   float: left;
}
.floatB {
    float: left;
}
.otherClear {
    clear: both;
}

⚠️不推薦使用，因爲添加無意義標籤

2. 給父級元素添加僞類元素after（推薦使用）
   和第一種方法類似，但是不用添加多餘標籤
   但是：ie6-7不支持僞元素：after，使用zoom:1觸發hasLayout.
   示例：

<div class="father">
    <div class="floatA"></div>
    <div class="floatB"></div>
</div>

.father:after{
  clear: both;
}
.father {
   *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
}

3. 父級元素設置 overflow:hidden（不推薦使用）
   優點： 代碼簡潔
   缺點：當內容過多的時候，不會自動換行的元素內容被隱藏，無法顯示溢出元素

4. 使用before和after雙僞元素清除浮動

示例：

 <div class="fahter clearfix">
	   <div class="big">big</div>
	   <div class="small">small</div>
</div>
<div class="footer"></div>
    
.clearfix:after,.clearfix:before{
  	content: "";
     display: table;
 }
.clearfix:after{
      clear: both;
  }
.clearfix{
     *zoom: 1;
 }

---

8.定時器setTimeout的運行機制

setTimeout()函數是用來指定某個函數或者某段代碼在指定時間段後執行。
返回： 這個函數會返回一個整數，表示定時器timer的編號，可用於清除定時器。

補充：
setInterval()函數指定某個函數或者某個代碼每隔一定時間段執行一次。
返回： 同樣會返回一個定時器編號timer，用於清除定時器。

setTimeout()與setInterval()的運行機制是將本次的代碼移出本次執行等到下一輪Event Loop時，檢測是否到了指定時間，如果到了就執行，如果沒到就等下次Event Loop時重新判斷。

⚠️思考根據上述描述，如果setTimeout指定時間t執行一段代碼，那麼這段代碼一定是t毫秒時之後執行嗎？
理解setTimeout運行機制，必須弄清楚以下名詞：

1. JS單線程
2. 任務隊列
3. 同步任務
4. 異步任務
5. 宏任務
6. 微任務

點擊瞭解詳情>>

---

9. get和post的請求區別

1. get用於獲取信息，且無副作用，可緩存
2. post用於修改服務器上的數據，有副作用，不可緩存

報文上的區別：

3. get請求參數放在URL中
4. post請求參數放在body中

數據上區別：

5. get請求傳遞的參數有長度限制（URL最大長度微2048字符），只允許ASCII字符
6. post參數無長度限制，且無類型限制

安全性上區別：

7. get安全性較差，因爲發送數據是URL的一部分，在發送密碼或其他敏感信息時不能用get請求
8. post較安全因爲參數不會被保存在瀏覽器歷史或web服務器日誌中

---

10. 浮動元素有什麼特性

1. 脫離文檔流
2. 浮動元素後面如果不是塊級元素，後面的元素將會和它並排（除非設置元素寬度，或者放不下時會自動換行）
3. 浮動元素的上一個元素如果沒有浮動，浮動只會在當前行浮動。當浮動元素遇到浮動元素將同行浮動
4. 元素設置了position:absolute或position:fixed時浮動會被忽略
5. 浮動會引起父元素高度塌陷
6. 浮動元素會被後一個元素的margin-top影響