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

前端面試常考知識點---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的頁面時會沒有樣式（就是閃爍），網速慢的時候還挺明顯。