前端知識點總結（CSS篇）

1. 聖盃佈局
2. CSS合併方法
3. 盒子模型
4. CSS定位
5. CSS動畫原理
6. CSS3動畫（簡單動畫的實現，如旋轉等）
7. CSS不一樣選擇器的權重(CSS層疊的規則)
8. flexbox佈局
9. 塊級元素和行內元素的異同
10. CSS在性能優化方面的實踐（比方說選擇器的效率等）
11. CSS打包壓縮的方法
12. 使用CSS預處理的優缺點（比方說Sass和Compass等）
13. { box-sizing: border-box; }這條CSS規則是幹嗎的，有什麼優勢
14. CSS浮動的原理及清除浮動的方法及優缺點
15. CSS垂直居中的方法
16. base64的原理及優缺點
17. CSS reset和normalize的區別
18. link和@import的區別
19. 左右上下margin合併重合的問題
    
20. rem字體大小設置
    
21. CSS3新增的特性
    
22. 列出你所知道能夠改變頁面佈局的屬性
23. 多人協做時，怎麼避免樣式被覆蓋

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1. 聖盃佈局
   答案：聖盃佈局 參考資料

2. CSS合併方法
   答案：避免使用@import引入多個css文件，可使用CSS工具將CSS合併爲一個CSS文件，例如使用Sass\Compass等。

3. 盒子模型
   答案：參考HTML中第11題。

4. CSS定位
   答案：Position各屬性值詳解　　
   CSS中的絕對定位與相對定位,注意的是定位的參照：relative參照於本身該出現的位置，而absolute參照於祖先元素中與本身最近的已定位元素(relative或者absolute)直到body元素。

5. CSS動畫原理
   答案：擠壓與拉伸、預期、舞臺佈局、順利動畫與關鍵幀、動做跟隨與重疊、慢進慢出、弧形移動
   CSS 動畫指南： 原理和實戰
   英文原版

6. CSS3動畫（簡單動畫的實現，如旋轉等）
   答案：依靠CSS3中提出的三個屬性：transition、transform、animation。
   transition：定義了元素在變化過程當中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
   transform：定義元素的變化結果，包含rotate、scale、skew、translate。
   animation：動畫定義了動做的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。
   具體能夠參考一下三篇文章：
   CSS3 Transition
   CSS3 Transform
   CSS3 Animation

7. CSS不一樣選擇器的權重(CSS層疊的規則)
   答案：首先，找出全部應用到該標籤的全部規則。而後按照下面的規則進行應用：一、！important規則最重要，大於其它規則；二、行內樣式規則，加1000；三、對於選擇器中給定的各個ID屬性值，加100；四、對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10；五、對於選擇其中給定的各個元素標籤選擇器，加1；六、通配符和結合符給予特殊性沒有任何貢獻；七、若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則。記住，CSS中選擇器的優先級是先判斷高位的數字，若是相等，纔會繼續判斷低位的數字，若是高位分出大小了，就不考慮低位了。

8. flexbox佈局及相關設置
   答案：簡單描述一下flex的屬性，細節能夠參考連接文檔
   容器屬性（採用Flex佈局的元素，container）：
   flex-direction：決定主軸的方向（即項目的排列方向）；row | row-reverse | column | column-reverse;
   flex-wrap：設置是否換行；nowrap | wrap | wrap-reverse
   flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，flex-direction || flex-wrap
   justify-content：定義了項目在主軸上的對齊方式；flex-start | flex-end | center | space-between | space-around
   align-items：定義項目在交叉軸上如何對齊；flex-start | flex-end | center | baseline | stretch
   align-content：定義了多根軸線的對齊方式；flex-start | flex-end | center | space-between | space-around | stretch

   項目屬性（子元素爲項目，item）
   order：定義項目的排列順序。數值越小，排列越靠前，默認爲0。
   flex-grow：定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
   flex-shrink：定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
   flex-basis：定義了在分配多餘空間以前，項目佔據的主軸空間。
   flex：flex-grow, flex-shrink 和 flex-basis的簡寫。
   align-self：容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。

   Flex 佈局教程：語法篇
   Flex 佈局教程：實例篇

9. 塊級元素和行內元素的異同
   答案：塊級元素：header/p/div/form/table/footer....；行內元素：span/a/strong/em/input...
   1.塊級元素分行，行內元素不分行；
   2.塊級元素能夠包含塊級元素和行內元素，行內元素只能包含行內元素，不能包含塊級元素；
   3.行內元素設置width、height、margin的上下、padding的上下無效；
   4.行內元素能夠經過設置display：block，渲染爲塊級元素。

10. CSS在性能優化方面的實踐（比方說選擇器的效率等）
    答案：網絡層面：css壓縮與合併、Gzip壓縮；加載方式：css文件放在head裏、不要用@import；語法結構：儘可能用縮寫、避免用濾鏡、合理使用選擇器。
    可參考CSS性能優化策略

11. CSS打包壓縮的方法與異同
    答案：利用打包工具grunt/gulp。
    易於使用：採用代碼優於配置策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。
    高效：經過利用Node.js強大的流，不須要往磁盤寫中間文件，能夠更快地完成構建。
    高質量：Gulp嚴格的插件指導方針，確保插件簡單而且按你指望的方式工做。
    易於學習：經過把API降到最少，你能在很短的時間內學會Gulp。構建工做就像你設想的同樣：是一系列流管道。

12. 使用CSS預處理的優缺點（比方說Sass和Compass等）
    答案：Css預處理器定義了一種新的語言將Css做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做了。預處理器一般能夠實現瀏覽器兼容，變量，結構體等功能，代碼更加簡潔易於維護。讓你用一種編程語言的思惟來寫CSS樣式。可是帶來的缺點是須要增長設計工做以及學習熟悉成本。

13. { box-sizing: border-box; }這條CSS規則是幹嗎的，有什麼優勢
    答案：讓CSS佈局更加直觀：box-sizing

14. CSS浮動的原理及清除浮動的方法及優缺點
    答案：而此浮動元素在文檔流空出的位置，由後續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。給元素的float屬性賦值後，就是脫離文檔流，進行左右浮動，緊貼着父元素(默認爲body文本區域)的左右邊框。
    css-float浮動的深刻研究、詳解及拓展
    那些年咱們一塊兒清除過的浮動
    css清除浮動各類方法

15. CSS水平垂直居中的方法
    答案：CSS垂直居中總結

16. base64的原理及優缺點
    答案：優缺點以下，原理參考文章
    優勢能夠加密，減小了http請求，圖片更新沒有上傳和清緩存了；
    缺點是須要消耗CPU進行編解碼、增大了CSS、瀏覽器兼容方面吧。
    從原理上搞定編碼-- Base64編碼
    關於base64編碼的原理及實現
    小tip: base64:URL背景圖片與web頁面性能優化

17. CSS reset和normalize的區別
    答案：reset是將瀏覽器全部的默認樣式進行重置、覆蓋，normalize是保留原來瀏覽器的樣式而且儘可能在不一樣瀏覽器裏保持一致。
    能夠參考知乎上的問題Normalize.css 與傳統的 CSS Reset 有哪些區別？

18. link和@import的區別
    答案：本質上他們都是爲了引入外部css樣式的，可是有區別以下：
    1.link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。
    2.加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
    3.兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。
    4.使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

19. 左右上下margin合併重合的問題
    答案：上下margin重合，並選取最大的做爲間距。左右margin不合並，間距等於相加。
    也能夠參考：
    CSS 外邊距(margin)重疊及防止方法
    W3C 8.3.1 Collapsing margins

20. rem字體大小設置
    答案： rem其實就是相對根元素的相對值，具體可參考：
    CSS3的REM設置字體大小

21. CSS3新增的特性
    答案：深刻了解 CSS3 新特性

22. 列出你所知道能夠改變頁面佈局的屬性
    答案：position、display、float、width、height、margin、padding、top、left、right、bottom，歡迎繼續補充。

23. 多人協做時，怎麼避免樣式被覆蓋
    答案：團隊之間制定良好的CSS規範，能夠參考：web前端代碼規範--CSS篇