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

時間 2019-11-26

原文原文鏈接

引言

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

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

1. CSS盒模型

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

CSS盒模型能夠當作是由從內到外的四個部分構成，即內容區（content）、內邊距(padding)、邊框(border)和外邊距(margin)。內容區是盒子模型的中心，呈現盒子的主要信息內容；內邊距是內容區和邊框之間的空間；邊框是環繞內容區和內邊距的邊界；外邊距位於盒子的最外圍，是添加在邊框外周圍的空間。前端

根據計算寬高的區域咱們能夠將其分爲 IE盒模型和 W3C標準盒模型，能夠經過 box-sizing來進行設置：

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

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

2. BFC

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

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

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 佈局規則

普通文檔流佈局規則：web

浮動的元素是不會被父級計算高度的
非浮動元素會覆蓋浮動元素的位置
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軸上的上下順序

注意：

普通元素的層疊等級優先由其所在的層疊上下文決定。

層疊等級的比較只有在當前層疊上下文元素中才有意義，不一樣層疊上下文中比較層疊等級是沒有意義的。

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

首先斷定兩個要比較的元素是否處於同一個層疊上下文中
若是處於同一個層疊上下文中，則誰的層疊等級大，誰最靠上
若是處於不一樣的層疊上下文中，則先比較他們所處的層疊上下文的層疊等級
當兩個元素層疊等級相同，層疊順序相同時，在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的屬性

transition(過渡動畫)

用法：transition: property duration timing-function delay

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

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實現三角形的原理

工做中咱們常常會遇到須要三角形圖標的應用場景，例如內容展開收起、左右箭頭點擊切換輪播，點擊某條列表數據查看詳情等。三角形圖標的應用範圍之廣，使得咱們有必要了解一下它的實現原理。

首先咱們來實現一個最基礎的邊框效果

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

效果以下：

而後咱們嘗試將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！

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

逆境中成長，只有不斷地學習，才能成爲更好的本身，與君共勉！