「建议观看」史上超长，前端css晦涩难懂的点都在这啦
前言
CSS大家肯定都是會的但是每個人所撐握的情況都不一樣，特別是已經(jīng)工作幾年的前輩很多CSS玩法都不知道，可能他們已經(jīng)習慣了用組件， 但是面試的時候又不可避免問，所以我整理了下CSS比較晦澀難懂的點總結寫了這篇文章，在最后也會有些面試中常問的CSS相關面試題，看完全文面試就不用慌了。
本文篇幅超長，建議轉發(fā)收藏后觀看，我這里有前端進階架構vip學習資料，包含內容有：HTML、css3、JavaScript、Vue，移動端web開發(fā)，Ajax、jQuery、canvas、等多個知識點。需要獲取這些內容的朋友可以私信回復我“前端”兩個字領取
目錄
三大特性
: css大三特性是css最重要的部分，可以說如果了解了這三大特性就對css撐握了一半，對于屬性只不過是記不記得住的事，而這個是重在理解。
- 層疊性：css樣式?jīng)_突采取的原則（后者覆蓋前者)
- 繼承性：對于部分屬性樣式會有天生的繼承
- 優(yōu)先級：選擇器優(yōu)先級算法
選擇器
在講這三個特性之前我們需要來全面了解下選擇器。
種類
下面我將選擇進行劃分為三大部分，對于基本選擇器我就不說了，主要講下偽類選擇器，組合選擇器及它們各自的使用場景。
- 基本選擇器 類名：.box 標簽: div 屬性: input[type="eamil"] | a[href*="http://www.beige.world"] ID: #box
- 偽類選擇器 結構偽類: :nth-child(n) | :nth-of-type(n) | :hover 偽元素: ::before | ::after
- 組合選擇器 相鄰兄弟 A + B 普通兄弟 A ~ B 子選擇器 A > B 后代選擇器 A B
基本選擇器
算了還是講下屬性選擇器吧，這個選擇器我在項目開發(fā)中還是用到過的
直接看例子：
/* 匹配包含title屬性的a標簽 => <a title> */ a[title] {color: purple;} /* 存在href屬性并且屬性值為"http://beige.world"的<a>標簽*/ /* <a href="http://beige.world"> */ a[href="http://beige.world"] {color: green;}/* 存在href屬性并且屬性值包含"baidu"的<a>標簽*//* <a href="https://baidu.com/we"> <a href="https://fanyi.baidu.com/we"> <a href="https://pan.baidu.com/we"> */ a[href*="baidu"] {font-size: 20px;}/* 存在id屬性并且屬性值結尾是"-wrapper"的<div>標簽 *//* <div id="btn-wrapper"><div id="menu-wrapper"><div id="pic-wrapper">*/ div[id$="-wrapper"] {display: flex;}/* 存在class屬性并且屬性值包含以空格分隔的"logo"的<div>元素 *//* <div id="aaa logo"><div id="bbb logo">*/ div[class~="logo"] { padding: 2px; } 復制代碼偽類選擇器
結構偽類
先講這兩比較作用類似的：nth-child(n) | nth-of-type(n)
結構
<ul><li>1</li><li><p>a1</p><div>b1</div><p>a2</p><div>b2</div></li><li>3</li><li>4</li><li>5</li> </ul> 復制代碼CSS
// 第一個li => <li>1</li> ul li:first-child { background-color: lightseagreen;} // 最后一個li => <li>5</li> ul li:last-child { background-color: lightcoral;} // 第三個li => <li>3</li> ul li:nth-child(3) { background-color: aqua; } // 第二個li下的第一個div(不是div標簽的都不算) => <div>b1</div> ul li:nth-child(2) > div:nth-of-type(1) {background-color: red}它倆的區(qū)別
- nth-child 選擇父元素里面的第幾個子元素，不管是第幾個類型
- nth-of-type 選擇指定類型的元素
下面講講nth-child()括號中的公式，這個算是這個選擇器的亮點了。
注意?：本質上就是選中第幾個子元素
- n 可以是數(shù)字、關鍵字、公式
- n 如果是數(shù)字，就是選中第幾個
- 常見的關鍵字有 even 偶數(shù)、odd 奇數(shù)
- 常見的公式如下(如果 n 是公式，則從 0 開始計算)
- 但是第 0 個元素或者超出了元素的個數(shù)會被忽略
對于這里面的公式平常也用不到太復雜的，我說下我的技巧：nth-child(3n + 3); 這里的n可以看做幾個為一組，3可以看做選這組的第幾個。
例： nth-child(5n + 3) ：5個為一組，選一組中的第三個。 對于"-"號就表示選擇的是前面的。
組合選擇器
組合選擇器本質上就是通過連接符來對兩個選擇器進行組合
- 子選擇器 A > B
- 后代選擇器 A B
上面這兩我就不說了，相信大家都用爛了。主要說說下面這兩個。
- 相鄰兄弟 A + B
- 普通兄弟 A ~ B
結構
<div class="box1"><div>One</div><div>Two!</div><div>Three</div><p>pppp</p></div><div class="box2"><div>One2</div><p>pppp1</p><div>Two2!</div><p>pppp2</p></div> 復制代碼選擇器解析
<style>/*(+標識)符介于兩個選擇器之間，當?shù)诙€選擇器匹配的元素緊跟著第一個元素后面并且它們都是同一個父親.box1 div:first-of-type(A元素)div(B元素) 匹配緊跟著A的B*/.box1 div:first-of-type+div { color: red; }.box1 div:first-of-type+p { color: red;} 篩選不到的/*(~標識)符介于兩個選擇器之間，匹配第一個選擇器元素后面所有匹配第二個選擇器的同層級元素.box2 div(A元素)p(B元素)匹配所有A后面的B*/.box2 div~p { color: seagreen; }</style> 復制代碼好了，在講完這些選擇器之后我們來看看它們的使用場景。
組合選擇器可以用于：hover偽類操縱自己包含的子元素及以外的元素。舉個例子
<div?id='a'>元素1<div?id='b'>元素2</div> </div> <div?id='c'>元素3<div?id='b'>元素2</div> </div> <div>同級元素1</div> <div>同級元素2</div> <div>同級元素3</div> </body> 復制代碼 #a:hover?>?#b{....}???? #a:hover?~?div{....} // 鼠標停留在a元素的時候讓所有同層級元素有某某樣式 // 防止選擇器層級替換了下面的樣式 #a:hover?+?#c{....} // 鼠標停留在a元素的時候讓同層級中的c元素有某某樣式 #a:hover?+?#c?>?#b{....} // 鼠標停留在a元素的時候讓同層級中的c元素下的b元素有某某樣式 復制代碼上面這兩選擇器在做一些特效頁的時候應該是會用到的。
綜合例子
效果
結構
<body><div class="img-box enter-box"> <!-- 懸浮在這個盒子的時候動態(tài)添加enter-box類名 --><img src="http://resource.beige.world/imgs/beige.jpg" alt=""><div class="cover"><h3>標題名稱</h3><p class="con">Bei Ge</p><p class="brier">這里放內容簡介，內容簡介,這里放內容簡介，內容簡介,這里放內容簡介，內容簡介</p><div class="handle"><span>.</span><span>.</span><span>.</span></div></div></div><!-- 其他盒子 --><div class="img-box">2</div> <div class="img-box">3</div><div class="img-box">4</div><div class="img-box">5</div> </body> 復制代碼樣式
布局樣式
<style>.img-box {position: relative;top: 100px;left: 200px;z-index: 1;display: inline-block;overflow: hidden;background: #70adc4;cursor: pointer;transition: transform .5s, box-shadow .3s;}.img-box img {width: 200px;height: 200px;opacity: 1;float: left;}.img-box .cover {width: 200px;height: 200px;padding: 15px;position: absolute;box-sizing: border-box;color: hotpink;}.img-box .cover h3 {margin-top: 10%;font-size: 24px;font-weight: bold;text-shadow: 0 0 2px #ccc;opacity: 0;transition: opacity .5s;}.img-box .cover .con {margin: 20px 0;font-style: italic;font-weight: bold;transform: translateX(-150%);}.img-box .cover .brier {font-size: 12px;transform: translateX(150%);}.img-box .cover .handle {position: absolute;right: 10px;bottom: -50px;font-size: 25px;transition: bottom 1s;/* 對于position的過渡動畫, 不能用position, 直接用位置屬性: left right top bottom */}</style> 復制代碼定義了一個animation動畫
@keyframes textAnimation {/* 0% {transform: translateX(150%);} */100% {transform: translateX(0);} } 復制代碼懸浮在盒子設置樣式
.img-box:hover {transform: scale(1.1);box-shadow: 2px 2px 13px 3px #ccc; }.img-box:hover img {opacity: .5; }.img-box:hover .cover h3 {opacity: 1; }.img-box:hover p {animation: textAnimation .6s ease-out forwards;/* forwards讓動畫停留在最后一幀 */ }.img-box:hover .cover .handle {bottom: 5px; }.enter-box:hover ~ .img-box {background-color: transparent;color: wheat; } .enter-box:hover + .img-box {color: red; } 復制代碼上面這個例子有些還沒有講，但是相信大家之前也都學過，后文中也會說。主要會說些細節(jié)方面的東西。
- flex(彈性布局）
- transform: translate3D rodate3D
- animation(設定動畫)
- 3D or 透視(perspective)
這里需要注意在使用偽類Hover的注意點，在使用他影響子級元素的時候盡量將選擇器寫全。例：
先看下效果
上面的效果相信大家都能寫出來，所以我要講的肯定不是怎么去實現(xiàn)這個效果，我要說下使用Hover時的一些細節(jié)。
結構比較簡單
flex類名用于布局實現(xiàn)重置和水平居中，box: 綠色盒子；center: 紫色盒子 inner: 橙黃色盒子
<div class="box flex"><div class="center flex"><div class="inner"></div></div> </div> 復制代碼我們用了一個:hover讓鼠標虛浮的時候讓盒子變紅
.box:hover div {background-color: red; } 復制代碼這里有一個問題不知道大家想過沒有，為什么我這段代碼只讓center盒子變紅了，inner為什么沒有變紅呢？？？
展開查看
因為CSS選擇器的優(yōu)先級！復制代碼我們在實現(xiàn)的時候一般都會像下面這樣寫吧，這個時候使用偽類選擇器改變元素樣式的時候就要注意選擇器優(yōu)先級的問題了。
.box .center {width: 150px;height: 150px;background-color: blueviolet; } .box .center .inner {width: 100px;height: 100px;background-color: coral; } 復制代碼這段代碼的優(yōu)先級比 .box .center高，所以他也就只能覆蓋它了。
.box:hover div { background-color: red; } 復制代碼相信我們很多人如果在寫鼠標懸浮大盒子讓最里面的inner盒子變色的時候，都會這么寫吧：
.box:hover .inner { background-color: red; } 復制代碼有用嗎？沒用！
注意?: 優(yōu)先級還是沒有.box .center .inner高。
層疊性
所謂層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉
- 原則： 樣式?jīng)_突，遵循的原則是就近原則。?那個樣式離著結構近，就執(zhí)行那個樣式。 樣式不沖突，不會層疊
繼承性
：子標簽會繼承父標簽的某些樣式，如文本顏色和字號。 想要設置一個可繼承的屬性，只需將它應用于父元素即可。簡單的理解就是： 子承父業(yè)
CSS繼承性口訣： 龍生龍，鳳生鳳，老鼠生的孩子會打洞我們恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復雜性。比如有很多后代元素都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。
注意點：在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
可繼承的屬性
控制繼承
注意點: 對于天生自帶的繼承屬性我們可以控制它是否需要繼承
四個屬性
- inherit: 被應用屬性繼承父級的該屬性（默認就是該值）
- initial初始化，把應用屬性初始為它默認的樣式，并且排除繼承的干擾（默認會繼承的屬性也不在默認繼承，而是表現(xiàn)出沒有任何設置時候的默認樣式）
- unset：意思是恢復其原本的繼承方式。對color屬性而言，就相當于inherit；而對于諸如border這樣默認不繼承的屬性，就相當于initial。
- revert: 效果等同于unset且瀏覽器支持有限，這里不做演示
效果圖
演示
<ul style="color: green;"><li class="default">Default <a href="#">link</a> color</li><li class="inherit">Inherit the <a style="color: inherit;" href="#">link</a> color</li><li class="initial">Reset the <a style="color: initial;" href="#">link</a> color</li><li class="unset">Unset the <a style="color: unset;" href="#">link</a> color</li> </ul> 復制代碼- default中的a標簽沒有寫默認為inherit屬性，但是使用了瀏覽器預設樣式表：可以理解為瀏覽器幫我們?yōu)?lt;a>寫了個style，其優(yōu)先級自然就高于其父元素了。
- inherit中的a標簽在行內寫了inherit，于是使用其父（或祖父，etc）元素的顏色值，在這里是綠色；
- initial中的a標簽使用color屬性初始值（黑色), 注意不要混淆屬性初始值和瀏覽器樣式表指定值，樣式預設表是瀏覽器事先寫好的樣式，但是我color默認值就是黑色啊。
- unset，意思是恢復其原本的繼承方式。對color屬性而言，就相當于inherit；而對于諸如border這樣默認不繼承的屬性，就相當于initial。
如果我們需要控制元素所有屬性的繼承使用all屬性
.inherit a {all: initial; /* 將所有的屬性都恢復成默認值(天生繼承也不再繼承) *//* 行內設置過的除外：你的層級干不過人家 */ } 復制代碼繼承的權重是0
這個不難，但是忽略很容易繞暈。其實，我們修改樣式，一定要看該標簽有沒有被選中。
（1） 如果選中了，那么以上面的公式來計權重。誰大聽誰的。 （2） 如果沒有選中，那么權重是0，因為繼承的權重為0.
控制繼承在我們封裝自己的組件的時候是會用到的，我們在封裝組件需要沿用樣式，有些默認情況下不可繼承父元素的屬性：box-sizing，這個其實用的就很多。
優(yōu)先級
要想了解優(yōu)先級，肯定得了解選擇器；但是選擇器非常多的，前面列舉的是日常開發(fā)用的比較多，其他的你可能一輩子都用不到，這里貼出C1~C4的選擇器，感興趣的同學可以看看。
定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多選擇器應用在同一元素上，此時，
- 選擇器相同，則執(zhí)行層疊性（后者覆蓋前者)
- 選擇器不同，就會出現(xiàn)優(yōu)先級的問題。
權重計算公式
關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）
標簽選擇器計算權重公式繼承或者 *0,0,0,0每個元素（標簽選擇器）0,0,0,1每個類，結構偽類(如:hover),屬性選擇器[type="number"]0,0,1,0每個ID0,1,0,0每個行內樣式 style=""1,0,0,0h1 + p::first-line0,0,0,3li > a[href*="beige.world"] > .inline-warning0,0,2,2每個!important 重要的∞ 無窮大
值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。
常用的選擇器記法：
- 行內: 1,0,0,0
- #id: 0,1,0,0
- .class | :hover | :nth-child(): 0,0,1,0 (:hover這種一個冒號叫結構偽類)
- ::after | ::before | ::first-line: 0,0,0,1 (這種兩冒號的叫偽元素，在書寫的時候雖然你可以寫一個冒號但是瀏覽器還是給你補上去了，本質上就是兩冒號)
權重疊加
我們經(jīng)常用組合選擇器，是有多個基礎選擇器組合而成，那么此時，就會出現(xiàn)權重疊加。
就是一個簡單的加法計算
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
注意?: 數(shù)位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。
important適用優(yōu)先級
#id .box div {color: red !important; }#id div.box div {color: green !important; // 使用這個選擇器中的顏色 } 復制代碼通關答題
下面來幾道題，全對才算通過了噢
<style type="text/css">.c1 .c2 div{ color: blue;}div #box3 { color:green;}#box1 div { color:yellow;} </style> </head> <body> <div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">文字</div></div> </div> </body> 復制代碼什么顏色??
展開查看答案
yellow 上面兩選擇器的層級都是一樣的, 后者覆蓋前者 復制代碼 <style type="text/css">#father #son{ color:blue;}#father p.c2{ color:black;}div.c1 p.c2{ color:red;}#father{color:green !important;} </style> </head> <body> <div id="father" class="c1"><p id="son" class="c2">試問這行字體是什么顏色的？</p> </div> </body> 復制代碼展開查看答案
blue 復制代碼 <body><style>div.parent {width: 300px;height: 300px;border: 10px solid #000;font-size: 46px;text-shadow: 3px 13px 4px green;box-sizing: border-box}div.child {width: 200px;height: 200px;background-color: brown;border: 5px solid #000;width: inherit;box-sizing: inherit;font-size: 80px;}</style> </head><div class="parent"><div id="child" class="child">123</div></div><!-- child: 字體多大? 有沒有文字陰影? 真實內容的寬高是多少?--> </body> 復制代碼展開查看答案
字體：80，有文字陰影，真實內容的寬：290px 高190px復制代碼講下這最后一題
文字陰影有：因為從父元素中繼承到了,字體: 80px;
真實內容寬290px, 高190px
常問的屬性
- flex(彈性布局）
- transform: translate3D rodate3D
- animation(設定動畫)
- 3D or 透視(perspective)
flex
flex布局相信大家也都用爛了，用來讓盒子垂直和水平居中好用的一批
父項常用屬性
- flex-direction：設置主軸的方向
- justify-content：設置主軸上的子元素排列方式
- flex-wrap：設置子元素是否換行
- align-content：設置側軸上的子元素的排列方式（多行）
- align-items：設置側軸上的子元素排列方式（單行）
- flex-flow：復合屬性，相當于同時設置了 flex-direction 和 flex-wrap
flex-direction
在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
- 默認主軸方向就是 x 軸方向，水平向右
- 默認側軸方向就是 y 軸方向，水平向下
： 主軸和側軸是會變化的，就看 flex-direction 設置誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的
flex-wrap設置是否換行
- 默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex布局中默認是不換行的。
- nowrap 不換行
- wrap 換行
justify-content 設置主軸上的子元素排列方式
效果圖
： 這里講下space-around和space-evenly
- space-around：項目之間的間距為左右兩側項目到容器間距的2倍。
- space-evenly：項目兩側之間的間距與項目與容器兩側的間距相等，相當于除去項目寬度和容器和項目的兩側間距，剩下的平均分配了剩余寬度作為項目左右margin。
**設置側軸上的子元素排列方式：align-items(單行)/align-content(多行) **
上圖寫能設置多行只能用于子項出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的。
效果跟上面是一樣的只不過是方向換了，上面是元素在主軸上排列，這個是在側抽上，至于側軸是不是Y軸就看你的flex-direciton怎么設置的了
子項常見屬性
- flex(復合屬性): 默認: flex: 0 1 auto; flex-grow flex-shrink flex-basis
- align-self：控制子項自己在側軸的排列方式
- order：定義子項的排列順序(前后順序), 0是第一個
flex-grow
默認0，用于決定項目在有剩余空間的情況下是否放大，默認不放大；注意，即便設置了固定寬度，也會放大。
假設第一個項目默認為0，第二個項目為flex-grow:2，最后一個項目為1，則第二個項目在放大時所占空間是最后項目的兩倍。
可以這么理解:
- flex: 1 => 在剩余的空間里我就占一份
- flex: 2 => 在剩余的空間里我就占兩份
- flex: 3 => 在剩余的空間里我就占三份
flex-shrink
默認1，用于決定項目在空間不足時是否縮小，默認項目都是1，即空間不足時大家一起等比縮小；注意，即便設置了固定寬度，也會縮小。但如果某個項目flex-shrink設置為0，則即便空間不夠，自身也不縮小。
上圖中第二個項目flex-shrink為0，所以自身不會縮小。
flex-basis
默認auto，用于設置項目寬度，默認auto時，項目會保持默認寬度，或者以width為自身的寬度，但如果設置了flex-basis，權重會width屬性高，因此會覆蓋widtn屬性。
上圖中先設置了flex-basis屬性，后設置了width屬性，但寬度依舊以flex-basis屬性為準。
注意?: 如果當容器中有多個盒子并且還寬度100%, flex-basis會被影響, 如下圖
解決辦法就是在我們設置flex-basis寬度時, 最好給他設置flex-shrink為0不縮放
transform
2D的屬性相信大家都會用了, 本文主要深究transform的3D屬性
- 透視：perspctive
- 3D呈現(xiàn)：transfrom-style
- 3D 位移：translate3d(x, y, z)
- 3D旋轉：rotate3d(x, y, z)
透視(perspective)
在講3D之間先來了解一下透視(視距)，只有了解了透視我們才能理解3D的物體投影在2D平面上
- 透視也稱為視距，所謂的視距就是人的眼睛到屏幕的距離
- 實際上模仿人類的視覺位置，可視為安排一直眼睛去看
- 距離透視點越近的在電腦平面成像越大，越遠成像越小
- 透視的單位是像素
注意: 透視需要寫在被視察元素的父盒子上面
拿圖說話
- d：就是視距，視距就是指人的眼睛到屏幕的距離
- z：就是 z 軸，z 軸越大(正值)，我們看到的物體就越大
來個栗子
給實例的父元素設置: perspective: 200px;上面我們在div的父盒子上設置了perspective，也就是說從3D成像的角度來講我們人眼距離屏幕div是200的視距，translate3D設置Z軸讓div往前挪了100，視距變小距離我們人眼距離也就越小，所以看到的div也就變大了。 （可以想像成在500米遠看見的人， 和5米看見的人。）
translate3d(x, y, z)
3D的特點
- 近大遠小
- 物體和面遮擋不可見
三維坐標系
- x 軸：水平向右 --?注意：x 軸右邊是正值，左邊是負值
- y 軸：垂直向下 --?注意：y 軸下面是正值，上面是負值
- z 軸：垂直屏幕 --?注意：往外邊的是正值，往里面的是負值
3D 呈現(xiàn) transform-style
transform-style：控制子元素是否開啟三維立體環(huán)境，代碼寫給父級，但是影響的是子盒子
- transform-style: flat 代表子元素不開啟 3D 立體空間，默認的
- transform-style: preserve-3d 子元素開啟立體空間
效果圖
body {perspective: 500px; }.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 2s;/* 讓子元素保持3d立體空間環(huán)境 */transform-style: preserve-3d; }.box:hover {transform: rotateY(60deg); }.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink; }.box div:last-child {background-color: purple;transform: rotateX(60deg); } 復制代碼rotate3d(x, y, z)
3D 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉
- transform: rotate3d(x, y, z, 45deg)` -- 沿著自定義軸旋轉 45 deg 為角度
animation
動畫(animation)是 CSS3 中最具顛覆性的特征之一，可通過設置多個節(jié)點來精確的控制一個或者一組動畫，從而實現(xiàn)復雜的動畫效果, 先定義動畫在調用定義好的動畫
動畫序列
0% 是動畫的開始，100 % 是動畫的完成，這樣的規(guī)則就是動畫序列
- 在 @keyframs 中規(guī)定某項 CSS 樣式，就由創(chuàng)建當前樣式逐漸改為新樣式的動畫效果
- 動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變任意多的樣式任意多的次數(shù)
- 用百分比來規(guī)定變化發(fā)生的時間，或用 from 和 to，等同于 0% 和 100%
動畫常見屬性
動畫簡寫方式
/* animation: 動畫名稱 持續(xù)時間 運動曲線 何時開始 播放次數(shù) 是否反方向 起始與結束狀態(tài) */ animation: name duration timing-function delay iteration-count direction fill-mode 復制代碼除了名字，持續(xù)時間，何時開始有嚴格順序要求其它隨意
CSS實現(xiàn)掃描二維碼
代碼篇幅過長放到gitHub倉庫了，大家可以pull下來自行研究。
地址：https://github.com/it-beige/blog
面試常問題
BFC相關
BFC(Block formatting context)直譯為"塊級格式化上下文"。
在講BFC之前得先說下display的屬性值，只有它符合成為條件才資格觸發(fā)BFC機制
那些屬性值會具有BFC的條件
不是所有的元素模式都能產(chǎn)生BFC，w3c 規(guī)范： display 屬性為 block, list-item, table 的元素，會產(chǎn)生BFC.
大家有沒有發(fā)現(xiàn)這個三個都是用來布局最為合理的元素，因為他們就是用來可視化布局。注意其他的，display屬性，比如 line 等等，他們創(chuàng)建的是 IFC ，我們下面研究。
這個BFC 有著具體的布局特性：
有寬度和高度，有 外邊距margin 有內邊距padding 有邊框 border。就好比，你有了練習武術的體格了。 有潛力，有資質。
什么情況下可以讓元素產(chǎn)生BFC
以上盒子具有BFC條件了，就是說有資質了，但是怎樣觸發(fā)才會產(chǎn)生BFC，從而創(chuàng)造這個封閉的環(huán)境呢？
就好比，你光有資質還不行，你需要一定額外效果才能出發(fā)的武學潛力，要么你掉到懸崖下面，撿到了一本九陰真經(jīng)，要么你學習葵花寶典，欲練此功必先....
同樣，要給這些元素添加如下屬性就可以觸發(fā)BFC。
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible。
BFC元素所具有的特性
BFC布局規(guī)則特性：
- 在BFC中，盒子從頂端開始垂直地一個接一個地排列
- 盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊
- 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。 BFC的區(qū)域不會與浮動盒子產(chǎn)生交集，而是緊貼浮動邊緣。 計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度
它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
白話文： 孩子在家里愿意怎么折騰都行，但是出了家門口，你就的乖乖的，不能影響外面的任何人。BFC的主要用途
(1) 清除元素內部浮動
只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式
主要用到
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。 復制代碼(2) 解決外邊距合并(塌陷)問題
主要用到
盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊 復制代碼屬于同一個sBFC的兩個相鄰盒子的margin會發(fā)生重疊，那么我們創(chuàng)建不屬于同一個BFC，就不會發(fā)生margin重疊了。
(3) 制作右側自適應的盒子問題
主要用到
普通流體元素BFC后，為了和浮動元素不產(chǎn)生任何交集，順著浮動邊緣形成自己的封閉上下文 復制代碼BFC 總結
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合并等等，因此，有了這個特性，我們布局的時候就不會出現(xiàn)意外情況了。
IFC相關
IFC（inline Formatting Context）叫做“行級格式化上下”相對BFC比較簡單且問的也不是很多，這里大該做個了解
布局規(guī)則如下：
- 內部的盒子會在水平方向，一個個地放置(默認就是IFC)；
- IFC的高度，由里面最高盒子的高度決定(里面的內容會撐開父盒子）；
- 當一行不夠放置的時候會自動切換到下一行；
哪些屬性開啟了性能加速
何為硬件加速：就是將瀏覽器的渲染過程交給GPU(Graphics Processing Unit)處理，而不是使用自帶的比較慢的渲染器。這樣就可以使得animation與transition更加順暢
我們可以在瀏覽器中用CSS開啟硬件加速，使GPU發(fā)揮功能，從而提升性能
所謂GPU，就是圖形處理器的縮寫，相當于PC中的顯卡。手機中的GPU也是為了對圖形、圖像處理而存在的，所謂強制渲染，就是hwa（hardware acceleration硬件加載）的一種，其存在的意義就是為了分擔cpu的負擔，其原理是通過GPU對軟件圖形的處理來減輕CPU的負擔。從而使應用軟件能夠以更快的速度被處理，以達到提速的目的。
硬件加速的原理
瀏覽器接收到頁面文檔后，會將文檔中的標記語言解析為DOM樹。DOM樹和CSS結合后形成瀏覽器構建頁面的渲染樹。渲染樹中包含大量的渲染元素，每個渲染元素會被分到一個圖層中，每個圖層又會被加載到GPU形成渲染紋理，而圖層在GPU中transform是不會觸發(fā)repaint的，最終這些使用transform的圖層都會由獨立的合成器進程進行處理, CSS transform會創(chuàng)建了一個新的復合圖層，可以被GPU直接用來執(zhí)行transform操作。
瀏覽器什么時候會創(chuàng)建一個獨立的復合圖層呢？事實上一般是在以下幾種情況下：
- 3D或者CSS transform
- <video>和<canvas>標簽
- css filters(濾鏡效果)
- 元素覆蓋時，比如使用了z-index屬性
為什么硬件加速會使頁面流暢
因為transform屬性不會觸發(fā)瀏覽器的repaint（重繪），而絕對定位absolute中的left和top則會一直觸發(fā)repaint（重繪）。
為什么transform沒有觸發(fā)repaint呢？
簡而言之，transform動畫由GPU控制，支持硬件加載，并不需要軟件方面的渲染。并不是所有的CSS屬性都能觸發(fā)GPU的硬件加載，事實上只有少數(shù)的屬性可以，比如transform、opacity、filter
如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
我這里有前端進階架構vip學習資料，包含內容有：HTML、css3、JavaScript、Vue，移動端web開發(fā)，Ajax、jQuery、canvas、等多個知識點。需要獲取這些內容的朋友可以私信回復我“前端”兩個字領取
總結
以上是生活随笔為你收集整理的「建议观看」史上超长，前端css晦涩难懂的点都在这啦的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1214线段覆盖问题——贪心法
- 下一篇： 巧用Hosts文件 杀掉麻烦的IE浏览器