引言
又是一年寒冬季，只身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。剛過完金九銀十，經過一場慘烈的江湖廝殺后，相信有很多小夥伴兒已經找到了自己心儀的工作，也有的正在找工作的途中。考慮到年後必定又是一場不可避免的廝殺，這裏提前記錄一下自己平時遇到和總結的一些知識點，自己鞏固複習加強基礎的同時也希望能在你的江湖路上對你有所幫助。筆者在入職最近這家公司之前也曾有過長達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中的屬性也可以產生層疊上下文flextransformopacityfilterwill-change-
-webkit-overflow-scrolling3.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的屬性
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方面、瀏覽器視角、算法基礎和框架方面的內容，希望你能夠喜歡！
文章已同步更新至，若覺文章尚可，歡迎前往star！
你的一個點贊，值得讓我付出更多的努力！
逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線
※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益
※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象
