CSS面試要點！看完你還覺得你已經學好CSS了嗎？

一、px，em，rem、vw、vh

1.px (pixel，畫素)：

是一個虛擬長度單位，是計算機系統的數字化影像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸畫素數)，在掃描列印時一般都有DPI可選。Windows系統預設是96dpi，Apple系統預設是72dpi。

2.em(相對長度單位，相對於當前物件內文字的字型尺寸)：

是一個相對長度單位，最初是指字母M的寬度，故名em。現指的是字元寬度的倍數，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

3.rem(root em，根em):

rem是一個相對單位，1rem等於html元素上字型設定的大小。我們只要設定html上font-size的大小，就可以改變rem所代表的大小。這樣我們就有了一個可控的統一參考系。我們現在有兩個目標：

rem單位所代表的尺寸大小和螢幕寬度成正比，

也就是設定html元素的font-size和螢幕寬度成正比rem單位和px單位很容易進行換算，方便我們按照標註稿寫cssrem與em的區別：

rem是相對於根元素（html）的字型大小，而em是相對於其父元素的字型大小

em最多取到小數點的後三位

4.vw、vh：

css3中引入了一個新的單位vw/vh，與檢視視窗有關，vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：

這裡我們發現視窗寬高都是100vw／100vh，那麼vw或者vh，下簡稱vw，很類似百分比單位。

vw和%的區別為：

二、聖盃佈局-雙飛翼佈局

聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局

三列布局，中間寬度自適應，兩邊定寬
中間欄要在瀏覽器中優先展示渲染
允許任意列的高度最高

提醒：聖盃佈局中相對佈局中，main元素必須是container的第一個元素

html程式碼

<div class="container">
   <div class="main">main</div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

1.相對佈局：

.container {
  width: 100%;
  min-height: 300px;
  padding: 0 60px;
  box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}

2.flex佈局：

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}

3.絕對佈局：

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}

三、流式佈局與響應式佈局

流式佈局

使用非固定畫素來定義網頁內容，也就是百分比佈局，透過盒子的寬度設定成百分比來根據螢幕的寬度來進
行伸縮，不受固定畫素的限制，內容向兩側填充。

響應式開發

利用CSS3 中的 Media Query(媒介查詢)，透過查詢 screen 的寬度來指定某個寬度區間的網頁佈局。

超小螢幕(移動裝置) 768px 以下
小屏裝置 768px-992px
中等螢幕 992px-1200px
寬屏裝置 1200px 以上

由於響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如 bootstrap 來完成一部分工作，當然也 可以自己寫響應式。

四、CSS優先順序演算法

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標籤：1000

!important宣告的樣式優先順序最高，如果衝突再進行計算。
如果優先順序相同，則選擇最後出現的樣式。
繼承得到的樣式的優先順序最低。

五、CSS3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最後元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控制元件的禁用狀態。
:checked 單選框或核取方塊被選中。

六、CSS3新特性

1.RGBA和透明度

2.background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap（對長的不可分割單詞換行）

3.word-wrap：break-word

4.文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

5.font-face屬性：定義自己的字型

6.圓角（邊框半徑）：border-radius 屬性用於建立圓角

7.邊框圖片：border-image: url(border.png) 30 30 round

8.盒陰影：box-shadow: 10px 10px 5px #888888

9.媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不同的屬性

七、CSS最佳化、提高效能的方法有哪些？

1.避免過度約束

2.避免後代選擇符

3.避免鏈式選擇符

4.使用緊湊的語法

5.避免不必要的名稱空間

6.避免不必要的重複

7.最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像

8.避免！important，可以選擇其他選擇器

9.儘可能的精簡規則，你可以合併不同類裡的重複規則

八、CSS動畫

CSS 中的 transform，transition 和 animation 是分開的三部分內容，其中 transfrom 主要是控制元素變形，並沒有一個時間控制的概念，而 transition 和 animation 才是動畫的部分，它們可以控制在一個時間段裡，元素在兩個或以上的狀態切換的效果。

1.transition

transition屬性：transition-delay 延遲多久後開始動畫

transition-duration 過渡動畫的一個持續時間

transition-property 執行動畫對應的屬性，例如 color，background 等，可以使用 all 來指定所有的屬性

transition-timing-function 隨著時間推進，動畫變化軌跡的計算方式，常見的有：linear，ease，ease-in，ease-out，cubic-bezier(...) 等。

transition 相關的事件

transitionend 事件會在 transition 動畫結束的時候觸發。

通常我們會在動畫結束後執行一些方法，例如繼續下一個動畫效果或者其他。

Zepto.js 中的動畫方法都是使用 CSS 動畫屬性來處理，而其中動畫執行後的回撥便應該是使用這個事件來處理。

2.animation

雖然 transition已經提供了很棒的動畫效果了，但是我們只能夠控制從一個狀態到達另外一個狀態，沒法來控制多個狀態的不斷變化，而 animation 而幫助我們實現了這一點。使用 animation 的前提是我們需要先使用 @keyframes 來定義一個動畫效果，@keyframes 定義的規則可以用來控制動畫過程中的各個狀態的情況，語法大抵是這個樣子：

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}

@keyframes 關鍵詞後跟動畫的名字，然後是一個塊，塊中有動畫進度的各個選擇器，選擇器後的塊則依舊是我們常見的各個 CSS 樣式屬性。

animation 屬性:

animation-name 你需要的動畫效果的 @keyframes 的名字。

animation-delay 和 transition-delay 一樣，動畫延遲的時間。

animtaion-duration 和 transition-duration 一樣，動畫持續的時間。animation-direction 動畫的一個方向控制。

預設是 normal，如果是上述的 left 從 0% 到 100%，那麼預設是從左到右。如果這個值是 reverse，那麼便是從右到左

由於 animation 提供了迴圈的控制，所以還有兩個值是 alternate 和 alternate-reverse，這兩個值會在每次迴圈開始的時候調轉動畫方向，只不過是起始的方向不同。

由於 animation 提供了迴圈的控制，所以還有兩個值是 alternate 和 alternate-reverse，這兩個值會在每次迴圈開始的時候調轉動畫方向，只不過是起始的方向不同。

animation 相關事件

可以透過繫結事件來監聽 animation 的幾個狀態，這些事件分別是：

animationstart 動畫開始事件，如果有 delay 屬性的話，那麼等到動畫真正開始再觸發，如果是沒有 delay，那麼當動畫效果應用到元素時，這個事件會被觸發。

animationend 動畫結束的事件，和 transitionend 類似。如果有多個動畫，那麼這個事件會觸發多次，像上邊的例子，這個事件會觸發三次。如果 animation-iteration-count 設定為 infinite，那麼這個事件則不會被觸發。

animationiteration 動畫迴圈一個生命週期結束的事件，和上一個事件不一樣的是，這個在每次迴圈結束一段動畫時會觸發，而不是整個動畫結束時觸發。無限迴圈時，除非 duration 為 0，否則這個事件會無限觸發

九、BFC

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定位的一個概念。要明白BFC到底是什麼，首先來看看什麼是視覺格式化模型。

視覺格式化模型

視覺格式化模型(visual formatting model)是用來處理文件並將它顯示在視覺媒體上的機制，它也是CSS中的一個概念。

視覺格式化模型定義了盒（Box）的生成，盒主要包括了塊盒、行內盒、匿名盒（沒有名字不能被選擇器選中的盒）以及一些實驗性的盒（未來可能新增到規範中）。盒的型別由display屬性決定。

怎樣才能形成BFC

• 根元素 或其它包含它的元素；*  浮動  (元素的 float 不為 none )；*  絕對定位元素  (元素的 position 為 absolute 或 fixed )；*  行內塊 inline-blocks (元素的  display: inline-block )；*  表格單元格 (元素的 display: table-cell ，HTML表格單元格預設屬性)；*  overflow 的值不為 visible 的元素；*  彈性盒 flex boxes  (元素的 display: flex 或 inline-flex )；

但其中，最常見的就是 overflow:hidden 、 float:left/right 、 position:absolute 。也就是說，每次看到這些屬性的時候，就代表了該元素以及建立了一個BFC了。

瀏覽器對BFC區域的約束規則：

1. 生成BFC元素的子元素會一個接一個的放置。
2. 垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素的 外邊距會摺疊(Mastering margin collapsing) 。
3. 生成BFC元素的子元素中，每一個子元素左外邊距與包含塊的左邊界相接觸（對於從右到左的格式化，右外邊距接觸右邊界），即使浮動元素也是如此（儘管子元素的內容區域會由於浮動而壓縮），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）。

BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然。我們可以利用BFC的這個特性來做很多事。

十、flex 佈局

基本概念

採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"。

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

容器的屬性：

1.flex-direction： 屬性決定主軸的方向（即專案的排列方向）

row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

2.flex-wrap ：預設情況下，專案都排在一條線（又稱"軸線"）上

nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

3.flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式

4.justify-content：定義了專案在主軸上的對齊方式

flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。

所以，專案之間的間隔比專案與邊框的間隔大一倍。

5.align-items：定義專案在交叉軸上如何對齊

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

6.align-content：定義了多根軸線的對齊方式。

如果專案只有一根軸線，該屬性不起作用flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。

專案的屬性order屬性定義專案的排列順序。

數值越小，排列越靠前，預設為0。

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

十一、Grid 佈局總結

grid 佈局是 css 中的一種新的佈局方式，對盒子和盒子內容的位置及尺寸有很強的控制能力。與 flex 不同，flex 著重於單軸，而 grid 適應於多軸，下面就來做個簡單的介紹。

flex 佈局示意

grid 佈局示意

基本概念

設定 display: grid; 的元素稱為容器，它的直接子元素稱為專案，但注意子孫元素不是專案。

grid line：網格線，構成 grid 佈局的結構，分為水平和豎直兩種。grid track：兩條相鄰網格線之間的空間，可以認為是一行或者一列。
grid cell：兩條相鄰行和相鄰列之間分割線組成的空間，是 grid 佈局中的一個單元。
grid area：四條網格線包裹的全部空間，任意數量的 grid cell 組成一個 grid area。

容器屬性

grid 容器的屬性還是有點多的，一共有 18 個，但是很多可以透過簡寫完成，所以也不用太緊張。

grid-template 系列

grid-template-columns
grid-template-rows
grid-template-areas

grid-gap 系列

grid-column-gap
grid-row-gap

place-items 系列

justify-items
align-items

place-content 系列

justify-content
align-content

grid 系列

grid-auto-columns
grid-auto-rows
grid-auto-flow

十二、box-sizing

設定CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding

box-sizing屬性可以為三個值之一：

content-box，預設值，只計算內容的寬度，border和padding不計算入width之內
padding-box，padding計算入寬度內
border-box，border和padding計算入寬度之內

十三、硬體加速

有時候動畫可能會導致使用者的電腦卡頓，你可以在特定元素中使用硬體加速來避免這個問題：

.block {
    transform: translateZ(0);
}

你並不會察覺有什麼不同，但瀏覽器會為這個元素進行3D硬體加速，在will-change這個特殊屬性未被全面支援之前，這個方法還是很有用的。

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的朋友。