中高階前端面試祕籍，助你直通大廠(一)

引言

又是一年寒冬季，隻身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。剛過完金九銀十，經過一場慘烈的江湖廝殺後，相信有很多小夥伴兒已經找到了自己心儀的工作，也有的正在找工作的途中。考慮到年後必定又是一場不可避免的廝殺，這裡提前記錄一下自己平時遇到和總結的一些知識點，自己鞏固複習加強基礎的同時也希望能在你的江湖路上對你有所幫助。筆者在入職最近這家公司之前也曾有過長達3個月的閉關修煉期，期間查閱資料無數，閱讀過很多文章，但總結下來真正讓你印象深刻的，不是那些前沿充滿神祕感的新技術，也不是為了提升程式碼逼格的奇淫巧技，而是那些我們經常由於專案週期緊而容易忽略的基礎知識。所謂萬丈高樓平地起，只有你的地基打得足夠牢固，你才有搭建萬丈高樓的底氣，你才能在你的前端人生路上越走越遠。

這篇主要是先總結一下CSS相關的知識點，可能某些部分不會涉及到太多具體的細節，主要是對知識點做一下彙總，如果有興趣或者有疑惑的話可以自行百度查閱下相關資料或者在下方評論區留言討論，後續文章再繼續總結JS和其他方面相關的知識點，如有不對的地方還請指出。

1. CSS盒模型

CSS盒模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。CSS 假定所有的HTML 文件元素都生成了一個描述該元素在HTML文件佈局中所佔空間的矩形元素框，可以形象地將其看作是一個盒子。CSS 圍繞這些盒子產生了一種“盒子模型”概念，通過定義一系列與盒子相關的屬性，可以極大地豐富和促進各個盒子乃至整個HTML文件的表現效果和佈局結構。

CSS盒模型可以看成是由從內到外的四個部分構成，即內容區（content）、內邊距(padding)、邊框(border)和外邊距(margin)。內容區是盒子模型的中心，呈現盒子的主要資訊內容；內邊距是內容區和邊框之間的空間；邊框是環繞內容區和內邊距的邊界；外邊距位於盒子的最外圍，是新增在邊框外周圍的空間。

根據計算寬高的區域我們可以將其分為IE盒模型和W3C標準盒模型，可以通過box-sizing來進行設定：

content-box：W3C標準盒模型
border-box：IE盒模型

區別：
W3C標準盒模型：width(寬度) = content(內容寬度)
IE盒模型：width(寬度) = content(內容寬度) + padding(內邊距) + border(邊框)

2. BFC

BFC即Block Fromatting Context(塊級格式化上下文)，它是頁面中的一塊獨立的渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。具有BFC特性的元素可以看成是一個隔離的獨立容器，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

IE瀏覽器下為hasLayout，一般可以通過zoom:(除normal外任意值)來觸發，hasLayout是IE瀏覽器渲染引擎的一個內部組成部分。在IE瀏覽器中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和和組織內容。為了調節這兩個不同的概念，渲染引擎採用了hasLayout的屬性，屬性值可以為true或false。當一個元素的hasLayout屬性為true時，我們就說這個元素有一個佈局(Layout)。當擁有佈局後，它會負責對自己和可能的子孫元素進行尺寸計算和定位，而不是依賴於祖先元素來完成這些工作。

2.1 觸發條件

根元素(<html>)
浮動元素(元素的float不是none)
絕對定位元素(元素的position為absolute或fixed)
行內塊元素(元素的display為inline-block)
表格單元格(元素的display為table-cell，HTML表格單元格預設為該值)
表格標題(元素的display為table-caption，HTML表格標題預設為該值)
display值為flow-root的元素
overflow屬性的值不為visible
彈性元素(display為flex或inline-flex元素的直接子元素)
網格元素(display為grid或者inline-grid元素的直接子元素)

2.2 佈局規則
普通文件流佈局規則：
浮動的元素是不會被父級計算高度的
非浮動元素會覆蓋浮動元素的位置
margin會傳遞給父級
兩個相鄰元素上下margin會發生重疊

BFC佈局規則：

浮動的元素會被父級計算高度(父級觸發了BFC)
非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)
margin不會傳遞給父級(父級觸發了BFC)
兩個相鄰元素上下margin不會發生重疊(給其中一個元素增加一個父級，並讓它的父級觸發BFC)

2.3 應用
防止margin重疊
清除內部浮動(原理是父級計算高度時，浮動的子元素也會參與計算)
自適應兩欄佈局
防止元素被浮動元素所覆蓋

3. 層疊上下文

層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每個盒模型的位置都是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在頁面上沿X軸Y軸平鋪，我們察覺不到它們在Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。

如果一個元素含有層疊上下文，我們就可以理解為這個元素在Z軸上就"高人一等"，最終表現就是它離螢幕觀察者更近。

你可以把層疊上下文理解為該元素當了官，而其他非層疊上下文元素則可以理解為普通群眾。凡是"當了官的元素"就比普通元素等級要高，也就是說元素在Z軸上更靠上，更靠近觀察者。

3.1 觸發條件

根層疊上下文(<html>)
position屬性為非static值並設定z-index為具體數值
CSS3中的屬性也可以產生層疊上下文
- flex
- transform
- opacity
- filter
- will-change
- -webkit-overflow-scrolling
  
  3.2 層疊等級
  層疊等級(stacking level)，又叫"層疊級別"或者"層疊水平"。
在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序
在其他普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序
注意：
1. 普通元素的層疊等級優先由其所在的層疊上下文決定。
2. 層疊等級的比較只有在當前層疊上下文元素中才有意義，不同層疊上下文中比較層疊等級是沒有意義的。

根據以上的層疊等級圖，我們在比較層疊等級時可以按照以下的思路來順序比較：

首先判定兩個要比較的元素是否處於同一個層疊上下文中
如果處於同一個層疊上下文中，則誰的層疊等級大，誰最靠上
如果處於不同的層疊上下文中，則先比較他們所處的層疊上下文的層疊等級
當兩個元素層疊等級相同，層疊順序相同時，在DOM結構中後面的元素層疊等級在前面元素之上

4. CSS3中新增的選擇器以及屬性

屬性選擇器：

屬性選擇器	含義描述
E[attr^="val"]	屬性attr的值以"val"開頭的元素
E[attr$="val"]	屬性attr的值以"val"結尾的元素
E[attr*="val"]	屬性attr的值包含"val"子字串的元素

結構偽類選擇器

選擇器	含義描述
E:root	匹配元素所在文件的根元素，對於HTML文件，根元素始終是`<html>`
E:nth-child(n)	匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n)	匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n)	與:nth-child()作用類似，但是僅匹配使用同種標籤的元素
E:nth-last-of-type(n)	與:nth-last-child() 作用類似，但是僅匹配使用同種標籤的元素
E:last-child	匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type	匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
E:last-of-type	匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child	匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一個不包含任何子元素的元素，文字節點也被看作子元素
E:not(selector)	匹配不符合當前選擇器的任何元素

CSS3新增屬性

屬性	含義描述
transition	過渡效果
transform	變換效果(移動(translate)、縮放(scale)、旋轉(rotate)、傾斜(skew))
transform-origin	設定旋轉元素的基點位置
animation	動畫效果
border-color	為邊框設定多種顏色
border-radius	圓角邊框
box-shadow	邊框陰影
border-image	邊框圖片
background-size	規定背景圖片的尺寸
background-origin	規定背景圖片的定位區域
background-clip	規定背景圖片從什麼位置開始裁切
text-shadow	文字陰影
text-overflow	文字截斷
word-wrap	對長單詞進行拆分，並換行到下一行
opacity	不透明度
box-sizing	控制盒模型的組成模式
rgba	基於r,g,b三個顏色通道來設定顏色值，通過a來設定透明度

5. CSS3中transition和animation的屬性

1) transition(過渡動畫)

用法：transition: property duration timing-function delay
| 屬性 | 含義描述 |
| ---- | ---- |
| transition-property | 指定哪個CSS屬性需要應用到transition效果 |
| transition-duration | 指定transition效果的持續時間 |
| transition-timing-function | 指定transition效果的速度曲線 |
| transition-delay | 指定transition效果的延遲時間 |

2) animation(關鍵幀動畫)

用法：animation: name duration timing-function delay iteration-count direction fill-mode play-state
| 屬性 | 含義描述 |
| ---- | ---- |
| animation-name | 指定要繫結到選擇器的關鍵幀的名稱 |
| animation-duration | 指定動畫的持續時間 |
| animation-timing-function | 指定動畫的速度曲線 |
| animation-delay | 指定動畫的延遲時間 |
| animation-iteration-count | 指定動畫的播放次數 |
| animation-direction | 指定是否應該輪流反向播放動畫 |
| animation-fill-mode | 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式 |
| animation-play-state | 指定動畫是否正在執行或已暫停 |

6. 清除浮動的方式以及各自的優缺點

額外標籤法(在最後一個浮動元素的後面新加一個標籤如<div class="clear"></div>，並在其CSS樣式中設定clear: both;)

優點：簡單，通俗易懂，寫少量程式碼，相容性好
缺點：額外增加無語義html元素，程式碼語義化差，後期維護成本大
給父級設定高度

優點：簡單，寫少量程式碼，容易掌握
缺點：不夠靈活，只適用於高度固定的佈局
觸發父級BFC(如給父元素設定overflow:hidden，特別注意的是：在IE6中還需要觸發hasLayout，例如給父元素設定zoom:1。原理是觸發父級BFC後，父元素在計算高度時，浮動的子元素也會參與計算)

優點：簡單，程式碼簡潔
缺點：設定overflow:hidden容易造成不會自動換行導致超出的尺寸被隱藏掉，無法顯示要溢位的元素
使用after偽元素，常見的寫法如下：

 .clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility:hidden;
    font-size: 0;
 }
 
 .clearfix {
    // 注意此處是為了相容IE6和IE7瀏覽器，即觸發hasLayout
    zoom: 1;
 }

優點：符合閉合浮動思想，結構語義化正確
缺點：程式碼量多，因為IE6-7下不支援after偽元素，需要額外寫zoom:1來觸發hasLayout

7. 居中佈局的方式

水平居中：

若是行內元素，則直接給其父元素設定text-align: center即可
若是塊級元素，則直接給該元素設定margin: 0 auto即可
若子元素包含浮動元素，則給父元素設定width:fit-content並且配合margin

.parent {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

使用flex佈局的方式，可以輕鬆實現水平居中，即使子元素中存在浮動元素也同樣適用

// flex 2012年版本寫法
.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

// flex 2009年版本寫法
.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
}

使用絕對定位的方式，再配合CSS3新增的transform屬性

.child {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

使用絕對定位的方式，再配合負值的margin-left(此方法需要固定寬度)

.child {
    position: absolute;
    left: 50%;
    width: 200px; // 假定寬度為200px
    margin-left: -100px; // 負值的絕對值為寬度的一半
}

使用絕對定位的方式，再配合left:0;right:0;margin:0 auto;(此方法需要固定寬度)

.child {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px; // 假定寬度為200px
}

垂直居中：

若元素是單行文字，則直接給該元素設定line-height等於其父元素的高度
若元素是行內塊級元素，可以配合使用display:inline-block;vertical-align:middle和一個偽元素來讓內容塊居中

.parent::after, .child {
    display: inline-block;
    vertical-align: middle;
}

.parent::after {
    content: "";
    height: 100%;
}

使用vertical-align屬性並且配合使用display:table和display:table-cell來讓內容塊居中

.parent {
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

使用flex佈局的方式，可以輕鬆實現垂直居中，即使子元素中存在浮動元素也同樣適用

// flex 2012年版本寫法
.parent {
    display: flex;
    align-items: center;
}

// flex 2009年版本寫法
.parent {
    display: box;
    box-orient: vertical;
    box-pack: center;
}

使用絕對定位的方式，再配合CSS3新增的transform屬性

.child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

使用絕對定位的方式，再配合負值的margin-top(此方法需要固定高度)

.child {
    position: absolute;
    top: 50%;
    height: 200px; // 假定高度為200px
    margin-top: -100px; // 負值的絕對值為高度的一半
}

使用絕對定位的方式，再配合top:0;bottom:0;margin:auto 0;(此方法需要固定高度)

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 200px; // 假定高度為200px
}

水平垂直居中：

使用flex佈局的方式同樣可以輕鬆實現水平垂直居中

// flex 2012年版本寫法
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

// flex 2009年版本寫法
.parent {
    display: box;
    box-pack: center;
    box-align: center;
}

使用絕對定位的方式，再配合CSS3新增的transform屬性

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

使用絕對定位的方式，再配合使用負值的margin-top和負值的margin-left(此方法需要同時固定寬度和高度)

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px; // 負值的絕對值為高度的一半
    margin-left: -100px; // 負值的絕對值為寬度的一半
    width: 200px; // 假定寬度為200px
    height: 100px; // 假定高度為100px
}

8. CSS的優先順序和權重

選擇器(優先順序從高到低)	示例	特殊性值
!important(重要性標識)	`div { color: #fff !important; }`	無，但為了方便記憶，可將其表示為1,0,0,0,0
行內樣式	`<div style="color: #fff;"></div>`	1,0,0,0
id選擇器	`#id`	0,1,0,0
類，偽類和屬性選擇器	`.content, :first-child, [type="text"]`	0,0,1,0
標籤和偽元素選擇器	`h1, ::after`	0,0,0,1
萬用字元、子選擇器、相鄰選擇器	`*, div > p, p + p`	0,0,0,0
繼承	`span { color: inherit; }`	無
瀏覽器預設值	瀏覽器開發者工具右側的`Styles`面板中會顯示`user agent stylesheet`字樣	無

9. 移動端1px物理畫素邊框

我們知道，在移動端存在物理畫素(physical pixel)和裝置獨立畫素(density-independent pixel)的概念。物理畫素也稱為裝置畫素，它是顯示裝置中一個最微小的物理部件，每個畫素可以根據作業系統設定自己的顏色和亮度。裝置獨立畫素也稱為密度無關畫素，可以認為是計算機座標系統中的一個點，這個點代表一個可以由程式使用的虛擬畫素(比如CSS畫素)，然後由相關係統轉換為物理畫素。根據物理畫素和裝置獨立畫素也衍生出了裝置畫素比(device pixel ratio)的概念，簡稱為dpr，其定義了物理畫素和裝置獨立畫素的對應關係，其計算公式為裝置畫素比 = 物理畫素 / 裝置獨立畫素。因為視網膜(Retina)螢幕的出現，使得一個物理畫素並不能和一個裝置獨立畫素完全對等，如下圖所示：

在上圖中，在普通螢幕下1個CSS畫素對應1個物理畫素，而在Retina螢幕下，1個CSS畫素卻對應4個物理畫素，即在Retina螢幕下會有不同的dpr值。為了追求在移動端網頁中更好的顯示質量，因此我們需要做各種各樣的適配處理，最經典的莫過於1px物理畫素邊框問題，我們需要根據移動端不同的dpr值來對邊框進行處理。在JavaScript中，可以通過window.devicePixelRatio來獲取當前裝置的dpr，在CSS中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio來進行媒體查詢，從而針對不同的裝置，來做一些樣式適配。這裡對於1px畫素的邊框問題，給出一種最常見的寫法：

.border-1px {
    position: relative;
}

.border-1px::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0), (min-device-pixel-ratio: 2.0) {
    .border-1px::after {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3.0), (min-device-pixel-ratio: 3.0) {
    .border-1px::after {
        -webkit-transform: scaleY(.33);
        transform: scaleY(.33);
    }
}

10. 實現三欄佈局的方式有哪些

三欄佈局，顧名思義就是分為左中右三個模組進行佈局，並且左右兩邊固定，中間模組根據瀏覽器的視窗變化進行自適應，效果圖如下：

這裡給出四種實現三欄佈局的方式：

使用絕對定位的方式

.container {
    position: relative;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    background: red;
}

.main {
    margin-left: 160px;
    margin-right: 110px;
    background: green;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    background: blue;
}

<div class="container">
    <div class="left">左</div>
    <div class="main">中</div>
    <div class="right">右</div>
</div>

優點：方便快捷，簡單實用，不容易出現問題，而且還可以將<div class="main"></div>元素放到最前面，使得主要內容被優先載入。
缺點：元素脫離了文件流，可能會造成元素的重疊。

使用flex佈局的方式

.container {
    display: flex;      
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

.left {
    width: 150px;
    background: red;
}

.main {
    margin: 0 10px;
    flex: 1;
    background: green;
}

.right {
    width: 100px;
    background: blue;
}

<div class="container">
    <div class="left">左</div>
    <div class="main">中</div>
    <div class="right">右</div>
</div>

優點：簡單實用，是現在比較流行的方案，特別是在移動端，大多數佈局都採用的這種方式，是目前比較完美的一個。
缺點：需要考慮到瀏覽器的相容性，根據不同的瀏覽器廠商需要新增相應的字首。

雙飛翼佈局

.content {
    float: left;
    width: 100%;
}

.main,
.left,
.right {
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

.main {
    margin-left: 160px;
    margin-right: 110px;
    background: green;
}

.left {
    float: left;
    margin-left: -100%;
    width: 150px;
    background: red;
}

.right {
    float: right;
    margin-left: -100px;
    width: 100px;
    background: blue;
}

<div class="content">
    <div class="main">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>

優點：比較經典的一種方式，通用性強，沒有相容性問題，而且支援主要內容優先載入。
缺點：元素脫離了文件流，要注意清除浮動，防止高度塌陷，同時額外增加了一層DOM結構，即增加了渲染樹生成的計算量。

聖盃佈局

.container {
    margin-left: 160px;
    margin-right: 110px;
}

.left,
.main,
.right {
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    color: #fff;    
}

.main {
    float: left;
    width: 100%;
    background: green;      
}

.left {
    position: relative;
    left: -160px;
    margin-left:  -100%;
    float: left;
    width: 150px;
    background: red;
}

.right {
    position: relative;
    right: -110px;
    margin-left:  -100px;
    float: left;
    width: 100px;
    background: blue;
}

<div class="container">
    <div class="main">中</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

優點：相比於雙飛翼佈局，結構更加簡單，沒有多餘的DOM結構層，同樣支援主要內容優先載入。
缺點：元素同樣脫離了文件流，要注意清除浮動，防止高度塌陷。

11. 實現等高佈局的方式有哪些

等高佈局，顧名思義就是在同一個父容器中，子元素高度相等的佈局。從等高佈局的實現方式來說，可以分為兩種，分別是偽等高和真等高。偽等高是指子元素的高度差依然存在，只是視覺上給人的感覺就是等高，真等高是指子元素的高度真實相等。效果圖如下：

這裡給出五種實現等高佈局的方式：

偽等高：

使用padding-bottom和負的margin-bottom來實現

.container {
    position: relative;
    overflow: hidden;
}
    
.left,
.main,
.right {
    padding-bottom: 100%;
    margin-bottom: -100%;
    float: left;
    color: #fff;
}

.left {
    width: 20%;
    background: red;
}

.main {
    width: 60%;
    background: green;
}

.right {
    width: 20%;
    background: blue;
}

<div class="container">
    <div class="left">左側內容</div>
    <div class="main">
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div class="right">右側內容</div>
</div>

真等高：

使用flex佈局的方式

.container {
    display: flex;
}

.left,
.main,
.right {
    flex: 1;
    color: #fff;
}

.left {
    background: red;
}

.main {
    background: green;
}

.right {
    background: blue;
}

<div class="container">
    <div class="left">左側內容</div>
    <div class="main">
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div class="right">右側內容</div>
</div>

使用絕對定位的方式

.container {
  position: relative;
  height: 200px;
}

.left,
.main,
.right {
    position: absolute;
    top: 0;
    bottom: 0;
    color: #fff;
}

.left {
    left: 0;
    width: 20%;
    background: red;
}

.main {
    left: 20%;
    right: 20%;
    background: green;
}

.right {
    right: 0;
    width: 20%;
    background: blue;
}

<div class="container">
    <div class="left">左側內容</div>
    <div class="main">
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div class="right">右側內容</div>
</div>

使用table佈局的方式

.container {
    width: 100%;
    display: table;
}

.left,
.main,
.right {
    display: table-cell;
    color: #fff;
}

.left {
    width: 20%;
    background: red;
}

.main {
    width: 60%;
    background: green;
}

.right {
    width: 20%;
    background: blue;
}

<div class="container">
    <div class="left">左側內容</div>
    <div class="main">
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div class="right">右側內容</div>
</div>

使用grid網格佈局的方式

.container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    color: #fff;
}

.left {
    background: red;
}

.main {
    background: green;
}

.right {
    background: blue;
}

<div class="container">
    <div class="left">左側內容</div>
    <div class="main">
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div class="right">右側內容</div>
</div>

12. CSS實現三角形的原理

工作中我們經常會遇到需要三角形圖示的應用場景，例如內容展開收起、左右箭頭點選切換輪播，點選某條列表資料檢視詳情等。三角形圖示的應用範圍之廣，使得我們有必要了解一下它的實現原理。
1) 首先我們來實現一個最基礎的邊框效果

.content {
    width: 50px;
    height: 50px;
    border: 2px solid;
    border-color:#ff9600 #3366ff #12ad2a #f0eb7a;
}

效果如下：

2) 然後我們嘗試將border值放大10倍

.content {
    width: 50px;
    height: 50px;
    border: 20px solid;
    border-color: #ff9600 #3366ff #12ad2a #f0eb7a;
}

效果如下：

上圖中我們可以很清楚地看到，在繪製border的時候並不是矩形區域，而是梯形區域，那麼此時如果我們將width和height值設定為0，看會發生什麼：

.content {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: #ff9600 #3366ff #12ad2a #f0eb7a;
}

效果如下：

此時會看到一個由四個三角形拼裝而成的矩形區域，即由上下左右四個邊框組合而成。因此不難想象，如果我們想得到某一個方向的三角形，我們只需要讓其他方向的邊框不可見就行了，例如我們想得到一個朝左的三角形：

.content {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent #3366ff transparent transparent;
}

效果如下:

這樣就得到了一個很完美的三角形圖示，是不是很簡單？

13. link與@import的區別

從屬關係區別

@import是CSS提供的語法規則，只有匯入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS，Rel連線屬性，設定瀏覽器資源提示符preload、prefetch等。
載入順序區別

HTML文件在解析的過程當中，如果遇到link標籤，則會立即發起獲取CSS檔案資源的請求；@import引入的CSS將在頁面載入完畢後才會被載入。
相容性區別

@import是CSS2.1才有的語法，因此需要IE5以上才能識別；link標籤作為HTML元素，不存在相容性問題。
DOM可控性區別

link標籤可以通過JS來動態引入，而@import無法通過JS來插入樣式

const loadStyle = (url) => {
    const link = document.createElement('link');
    link.setAttribute('type', 'text/css');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', url);
    
    document.head.appendChild(link);
}

14. 瀏覽器是怎樣解析CSS選擇器的

CSS選擇器的解析是從右向左解析的。若從左向右地匹配，發現不符合規則，需要進行回溯，會損失很多效能。若從右向左匹配，先找到所有的最右節點，對於每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的效能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點)，而從左向右的匹配規則的效能都浪費在了失敗的查詢上面。而在CSS解析完畢後，需要將解析的結果與DOM Tree的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立Render Tree時瀏覽器就要為每個DOM Tree中的元素根據CSS的解析結果(Style Rules)來確定生成怎樣的Render Tree。

15. CSS的效能優化方案

層級儘量扁平，避免巢狀過多層級的選擇器；
使用特定的選擇器，避免解析器過多層級的查詢；
減少使用萬用字元與屬性選擇器；
減少不必要的多餘屬性；
避免使用!important標識，可以選擇其他選擇器；
實現動畫時優先使用CSS3的動畫屬性，動畫時脫離文件流，開啟硬體加速；
使用link標籤代替@import；
將渲染首屏內容所需的關鍵CSS內聯到HTML中；
使用資源預載入指令preload讓瀏覽器提前載入CSS資源並快取；
使用Gulp，Webpack等構建工具對CSS檔案進行壓縮處理；

交流

終於接近尾聲了，居然花費掉了我一整個週末的時間，不過這篇主要是先總結一下CSS相關的知識點，當然還有很多地方沒有總結到，只是列出了個人覺得比較容易考察的點，如果你有其他補充的，歡迎在下方留言區討論哦，也歡迎關注我的公眾號[前端之境]，關注後我可以拉你加入微信前端交流群，我們一起互相交流學習，共同進步。
後續會陸續總結出JS方面、瀏覽器視角、演算法基礎和框架方面的內容，希望你能夠喜歡！

文章已同步更新至Github部落格，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！