前端面試知識點大全——CSS篇（四）
總綱：前端面試知識點大全
目錄
1.css3動畫
animation配合@keyframes
1.1 animation語法：
animation:name duration timing-function delay iteration-count direction
animation-name：規定需要繫結到選擇器的keyframe名稱
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計(帶單位)，預設0
animation-timing-function：固定動畫的速度曲線，liner | ease | ease-in | ease-out | ease-in-out
animation-delay：在動畫開始前的延遲，秒或毫秒計，預設0
animation-iteration-count：動畫播放的次數
animation-direction：normal|alternate，是否應該輪流反向播放動畫，預設normal
1.2 @keyframes語法
@keyframes animation-name {keyframes-selector{css-styles}；}
animation-name 必須，動畫的名稱（animation的第一個引數）
keyframes-selector 必須。動畫市場的百分比。（1）0%~100% （2）from（相當於0%）（3）to（相當於100%）
css-styles 必須，一個或多個合法的css樣式屬性
2.佈局之：左邊定寬，右邊自適應
方法1、左邊設定左浮動，右邊寬度設定100%
方法2、利用flex，父元素設定為display:flex；右側自適應子元素設定flex:1，即flex-grow：1，放大比例。預設為0，即如果存在剩餘空間，也不放大。
方法3、利用負margin，這個對html結構有要求，需要額外的包裹標籤包裹右側自適應元素，然後放置在左側的前面，即<div "包裹元素"><section></section></div><aside></aside>，利用margin-left:-100%，可以讓下面浮動的元素，擠上來（因為浮動元素是儘可能向上浮動，只要有位置）
方法4、設定浮動 + 在 css 中使用 calc() 函式
參考連結：https://blog.csdn.net/sinat_36521655/article/details/81113350
3.聖盃佈局，雙飛翼佈局
HTML結構：
<div class=“main”></div>
<div class="left"></div>
<div class="right"></div>主欄 左側 右側 這樣的html結構，然後全部左浮動，主欄width設為100%，左側想要上浮，設定齊margin-left:-100%；右側想上去，則把margin-left：負右側固定寬度；然後主欄設定box-sizing：border-box，設定padding為固定寬度的值（將內容擠回中間，不會被兩側遮蓋）
聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局的幾種經典佈局的具體實現示例https://blog.csdn.net/wangchengiii/article/details/77926868
4.實現垂直居中和水平居中
1、行級元素 父元素text-align：center 水平居中
2、塊級元素 子元素margin：0 auto 水平居中
3、浮動元素 直接父元素relative，子元素absolute，然後translate(-50%,-50%) 都居中
4、父元素設定display:flex;justify-content:center;align-items:center 都居中
5、行級元素，height和line-height一樣即可
6、塊級元素，父元素高度固定，則設定為inline或者inline-block，然後height與line-height相同
父元素高度不固定，padding-top和padding-bottom相同即可
7、父元素display：flex；justify-content：center；flex-direction：column；
或display：flex；align-items：center
參考部落格：https://blog.csdn.net/sinat_36521655/article/details/80131869
5.css預載入
放在任何位置都是可行的，之所以推薦放在head標籤裡是因為瀏覽器程式碼解析是從上到下的。如果把css放在底部，當網速慢時，html程式碼載入完成後而css沒載入完的話，會導致頁面沒有樣式而難以閱讀，所以先載入css樣式能讓頁面正常顯示。
1、css載入不會阻塞DOM樹的解析
2、css載入會阻塞DOM樹的渲染
3、css載入會阻塞後面js語句的執行
6.bootstrap原理
Bootstrap 框架 柵格佈局系統設計原理https://www.cnblogs.com/suwings/p/6079178.html
Bootstrap缺點：
1、多餘的HTML結構和CSS樣式，在media query下不同螢幕要對css進行重寫或者增強
2、同樣的圖片可能需要兩套 （小螢幕，大螢幕)
3、Sprite IMG 無法得到充分的利用， Background Size ， Position微小畫素差等問題
4、其實根本沒有人會閒的蛋疼的去不停的縮放螢幕
5、兩套事件繫結（Click，Tap） 偷懶的話只用Click事件，導致點選觸控方面體驗極差
6、資原始檔體積過大， 不利於優化, 手機載入解析速度慢
7.less前處理器
學習資料：http://www.css88.com/doc/less/features/#features-overview-feature-variables-
8.樣式相容
-moz-：火狐瀏覽器的私有屬性
-webkit-：safari 和 chrome的私有屬性
-o-：opera的私有屬性
-ms-：ie的私有屬性
9.link 和@import 的區別
(1) link屬於HTML標籤，而@import是CSS提供的;
(2) 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
(3) import只在IE5以上才能識別，而link是HTML標籤，無相容問題;
10.css樣式注意點
10.1 CSS 選擇符：
1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標籤選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.後代選擇器(li a)
7.萬用字元選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a: hover, li:nth-child)
10.2 可繼承的樣式：
1.font-size
2.font-family
3.color
4.text-indent
10.3 不可繼承的樣式：
1.border
2.padding
3.margin
4.width
5.height
10.4 優先順序：
1.優先順序就近原則，同權重情況下樣式定義最近者為準;
2.載入樣式以最後載入的定位為準;
3.!important > id > class > tag
4.important 比 內聯優先順序高，但內聯比 id 要高
可以參考：https://blog.csdn.net/sinat_36521655/article/details/80140221
10.5 CSS3新增偽類舉例：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控制元件的禁用狀態。
:checked 單選框或複選框被選中。
11.css樣式注意點
FOUC - Flash Of Unstyled Content 文件樣式閃爍，樣式還沒載入完成，後面載入完成後又迴流
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS檔案的@import就是造成這個問題的罪魁禍首。IE會先載入整個HTML文件的DOM，然後再去匯入外部的CSS檔案，因此，在頁面DOM載入完成到CSS匯入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。
12.table佈局（table-layout）
table有一個樣式屬性叫table-layout，他的值有fixed和auto（預設）以及inherit
12.1 固定表格佈局（fixed）：
固定表格佈局與自動錶格佈局相比，允許瀏覽器更快地對錶格進行佈局。
在固定表格佈局中，水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
通過使用固定表格佈局，使用者代理在接收到第一行後就可以顯示錶格。
12.2 自動錶格佈局（auto）：
在自動錶格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。
此演算法有時會較慢，這是由於它需要在確定最終的佈局之前訪問表格中所有的內容。
13.層疊上下文
引自張鑫旭的博文《深入理解CSS中的層疊上下文和層疊順序》：http://www.zhangxinxu.com/wordpress/?p=5115
