中高級前端面試秘籍，助你直通大廠(一)-有解無憂

引言

又是一年寒冬季，只身前往沿海作業，也是我第一次感受到沿海城市冬天的寒冷，剛過完金九銀十，經過一場慘烈的江湖廝殺后，相信有很多小伙伴兒已經找到了自己心儀的作業，也有的正在找作業的途中，考慮到年后必定又是一場不可避免的廝殺，這里提前記錄一下自己平時遇到和總結的一些知識點，自己鞏固復習加強基礎的同時也希望能在你的江湖路上對你有所幫助，筆者在入職最近這家公司之前也曾有過長達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軸上的上下順序

注意：

普通元素的層疊等級優先由其所在的層疊背景關系決定，

層疊等級的比較只有在當前層疊背景關系元素中才有意義，不同層疊背景關系中比較層疊等級是沒有意義的，

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

首先判定兩個要比較的元素是否處于同一個層疊背景關系中
如果處于同一個層疊背景關系中，則誰的層疊等級大，誰最靠上
如果處于不同的層疊背景關系中，則先比較他們所處的層疊背景關系的層疊等級
當兩個元素層疊等級相同，層疊順序相同時，在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 ></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 >
    <div >左</div>
    <div >中</div>
    <div >右</div>
</div>

優點：方便快捷，簡單實用，不容易出現問題，而且還可以將<div ></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 >
    <div >左</div>
    <div >中</div>
    <div >右</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 >
    <div >中</div>
</div>
<div >左</div>
<div >右</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 >
    <div >中</div>
    <div >左</div>
    <div >右</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 >
    <div >左側內容</div>
    <div >
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div >右側內容</div>
</div>

真等高：

使用flex布局的方式

.container {
    display: flex;
}

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

.left {
    background: red;
}

.main {
    background: green;
}

.right {
    background: blue;
}

<div >
    <div >左側內容</div>
    <div >
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div >右側內容</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 >
    <div >左側內容</div>
    <div >
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div >右側內容</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 >
    <div >左側內容</div>
    <div >
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div >右側內容</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 >
    <div >左側內容</div>
    <div >
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div >右側內容</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！

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168608.html

標籤：JavaScript

上一篇：你真的會用JavaScript中的sort方法嗎

下一篇：一個匹配字字串是aabbcc或者其他模式的運用

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

引言