前端面試常考知識點---js

1.CSS3的新特性有哪些

點我檢視

1. CSS3選擇器 .

2. CSS3邊框與圓角

   CSS3圓角border-radius:
   屬性值由兩個引數值構成: value1 / value2，值之間用/分隔，value1代表圓角的水平半徑，value2代表圓角的垂直半徑
   盒陰影box-shadow:
   語法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴充套件程度 顏色 是否具有內陰影

3. CSS3背景與漸變

   重要的幾個：
   background-image

   ``` 語法：backgroundimage:url('1.jpg),url('2.jpg') ```

   background-origin

   ``` 定義：設定背景影象的原始起始位置 語法：background-origin：border-box / padding-box / content-box(背景圖片座標原點與這三個有關係) ```

   background-repeat

   ``` 定義：設定是否及如何重複背景影象，預設地，背景影象在水平和垂直方向上重複。 ```

   background-size

   ``` 定義：指定背景影象的大小 語法：background-size：number / % / cover / contain ```

   太多了，本寶寶休息一下再寫

4. CSS3過渡
5. CSS3變換
6. CSS3動畫

2.flex

這篇講的很全
簡單易懂
一方面是在父容器的幾個屬性，另一些就是子元素的屬性

父：                                                                                  
    * flex-direction                                 子元素排列方向
    * flex-wrap                                        如果一條軸線排不下，如何換行
    * flex-flow                                         flex-direction屬性和flex-wrap屬性的簡寫形式
    * justify-content                               在主軸上的對齊方式
    * align-items                                     在交叉軸上如何對齊
    * align-content                                 多根軸線的對齊方式
子：
    * order
    * flex-grow
    * flex-shrink
    * flex-basis
    * flex
    * align-self
 

3.BFC

盒模型和BFC

1. 內部的box會在垂直方向，一個接一個的放置
2. 每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從做往右的格式化，否則相反）
3. box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰box的margin會發生重疊
4. bfc的區域不會與浮動區域的box重疊
5. bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc裡的元素，反過來，裡面的也不會影響外面的
6. 計算bfc高度的時候，浮動元素也會參與計算

怎麼建立bfc

1. float屬性不為none（脫離文件流）
2. position為absolute或fixed
3. display為inline-block,table-cell,table-caption,flex,inine-flex
4. overflow不為visible
5. 根元素

應用場景

1. 自適應兩欄佈局
2. 清除內部浮動

3. 防止垂直margin重疊

   為什麼overflow:hidden可以消除margin合併？

   我們首先要搞清楚為什麼會發生margin合併。這些元素（包括兄弟、父子元素等）之間之所以會發生margin合併，是因為它們屬於同一個BFC。所以，我們就知道怎麼辦了，只要讓它們不屬於同一個BFC不就可以了？通過overflow:hidden建立了一個BFC

   為什麼overflow:hidden可以清除浮動的影響？

   當給.parent設定"overflow:hidden"時，實際上建立了一個超級屬性BFC，此超級屬性反過來決定了"height:auto"是如何計算的。在“BFC佈局規則”中提到：計算BFC的高度時，浮動元素也參與計算。因此，父元素在計算其高度時，加入了浮動元素的高度，“順便”達成了清除浮動的目標，所以父元素就包裹住了子元素。

   為什麼overflow:hidden...

4. link、import、require的區別
   import和require

   require是執行時呼叫，所以require理論上可以運用在程式碼的任何地方
   import是編譯時呼叫，所以必須放在檔案開頭

   link和import

   當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再載入。所以有時候瀏覽@import載入CSS的頁面時會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

原文地址：https://segmentfault.com/a/1190000017257916