CSS 基礎拾遺 | 整理了數10萬字資料，分享給你這些 CSS 乾貨

△ 是新朋友嗎？記得先點web前端學習圈關注我哦～

雖然說實際編程水平是才最重要的，可是夯實基礎，才能走得更遠。仿生獅子最近在準備面試，這個禮拜看了一堆 CSS 相關的內容。整理了數十萬字資料後，給你帶來這些 CSS 知識點分享。
javascript

閱讀本文（收藏本文）你將串聯如下關鍵詞：php

選擇器：特殊性、繼承、級聯css
佈局基礎：元素、盒模型、BFC、IFC、FFC、浮動及應對方法html
字體應用：瀏覽器如何查找與應用字體前端
方法論：ITCSS、常見命名方案vue
常見問題：居中方案（垂直、水平、水平且垂直）、多行文本截斷java
調試技巧：打印、渲染、標尺web

世界寬廣而宏大，咱們的知識只是汪洋裏的一葉扁舟。組織語言，用博客和書本輸出內容，天然受到語言這種媒介的限制。儘管通過悉心整理，線性的文字不可能把每個知識點都結網通常從頭至尾串聯起來。要是你們能靈活使用搜索引擎，遨遊互聯網，突破平面的限制，構建本身的知識骨架，那是再好不過。文中內容比較基礎，大部份內容掃一下就闊，若是一點兒印象也沒的，仍是要看看文檔詳細瞭解，最好編碼實踐一下——寫代碼和玩樂器同樣，都屬於動態學習的範疇，也就是說，邊學邊實踐能更容易地將概念融會貫通。面試

概念辨析

我曾因在掘金某篇文章評論區看到有位老哥由於看不懂文章中講述的概念而以爲「（文章）寫的亂七八糟，不清不楚」，以爲非常心酸。對知識的深刻了解不能拋開概念不談，這和對概念的理解或是編碼實操的能力是不一樣的。它們相互補充的，對學習也有所幫助。不要由於看了代碼就不敲代碼了，也不要由於能敲代碼就不去了解概念了。這裏提一些比較重要的 CSS 技術名詞（或概念），作個開頭吧。數據庫

規則&規則集

規則，由屬性和值組成的聲明、聲明與括號造成的聲明塊再加上選擇器組成，而一條或多條規則組合成了規則集。

元素（Elements）

元素是用來組織文檔結構的基礎，好比 p、span 等。每一個元素都會對文檔的表現起必定做用，每一個元素都會在瀏覽器中以矩形盒子的形式出現。

儘管不能直接查看頁面上的盒子的外邊界，但你能夠打開控制檯，輸入這行代碼，給頁面上全部的元素設置邊框樣式，一覽其排列：

?('*').map(x => x.style.border = '1px solid')

塊級元素（Block-level elements）與內聯元素（Inline-level elements）

相似 div、ul、p、h1 這些都是塊級元素。通常來講，塊級元素會生成一個默認填滿父容器的內容區域。其後的兄弟元素將會被「換行顯示」；內聯元素會在一個文本行中生成元素框，它不會打斷這行文本。內聯元素常也譯爲「行內級元素」，在一些文章中，也被稱爲「行內元素」。

替換元素（Replaced elements）與非替換元素（Nonreplaced elements）

除了如 img、input、iframe 等元素，大多數元素都是非替換元素。替換元素的內容區域會被替換爲其指向的外部對象。好比，若是 img 元素不帶 src 屬性的話，它不指向任何內容，在文檔中沒有意義，也就不是替換元素；若是 img 的 src 連接了外部圖片，那麼它的內容區域將被圖片替換，此時就是替換元素。

元素的內在盒子（Inner Display Type）與外在盒子（Outer Display Type）

元素會依據其 Display 類型參與佈局。主要取決於兩種特徵：內在盒子和外在盒子。內在盒子一般也稱做「容器盒子」，和外在盒子相比，前者描述了元素跟其後代之間的行爲，然後者描述了元素與其父元素和兄弟元素之間的行爲。

Display: block 的盒子由外在塊級盒子和內在塊級容器盒子組成
Display: inline-block 的盒子由外在內聯盒子和內在塊級容器盒子組成
Display: inline 的盒子由外在內聯盒子和內在內聯盒子組成

選擇器

基礎內容

CSS 中有哪些經常使用的選擇器呢？

有哪些經常使用的僞類/僞元素呢？

僞元素與僞類

僞類和僞元素在選擇器中用一個冒號仍是兩個冒號鏈接？它們有什麼區別呢？... 這裏提到了僞類和僞元素，分享一下個人理解思路，我以爲仍是蠻好使的：

僞類表示元素的一種狀態，如激活狀態（:active）。同一個元素，多個狀態之間能夠並存，如激活懸浮狀態（:active:hover）。爲何 :hover、:focus 等和用戶操做相關的狀態也是僞類呢？由於用戶操做致使元素狀態改變。
僞元素表示經過選取 DOM Tree 中不存在的元素，進行樣式修改。如首字母（::first-letter）。

前陣子看一篇文章，有一位老哥以爲在 HTML 中給空列表加一個「空」的佔位很差，致使「佈局混亂信息難懂」，因此可使用 :empty 僞類把佔位邏輯往 CSS 轉移的：

<dl> <dt>姓名：</dt> <dd>張三</dd> <dt>性別：</dt> <dd></dd> <dt>手機：</dt> <dd></dd> <dt>郵箱：</dt> <dd></dd></dl><style>dd:empty::before { content: '暫無'; color: gray;}</style>

這隻能體現 CSS 的可能性，但在項目中運用則是一種錯誤的作法。好比，若是考慮項目後期要作國際化，那麼寫在 CSS 中這些內容的可維護性就很是差了。CSS 是負責樣式的語言，千萬別混淆了 CSS 處理樣式，JS 處理邏輯這兩種不一樣的思惟形式。

特殊性

特殊性（Specificity），又稱做：優先級、特異性，即瀏覽器對應用到同一個元素的同種聲明的重視程度。選擇器的特殊性由選擇器的組成肯定。特殊性值表述爲 4 個數字組成的統一的部分，如：[0，0，0，0]。比較特殊性值表時，同索引左側位數較大者特殊性高，如 [1，0，0，0] 大於 [0，99，0，0]

重要性聲明的特殊性老是賽過非重要性聲明（!important 力壓羣雄）
對於行內樣式，特殊性值表加：[1，0，0，0]
對於 ID 選擇器，加：[0，1，0，0]
對於類選擇器，屬性選擇器，或是僞類，加：[0，0，1，0]
對於標籤選擇器和僞元素選擇器，加：[0，0，0，1]
通配選擇器、子代選擇器、相鄰選擇器、同胞選擇器會給特殊性值表加：[0，0，0，0]（不等同於不增長，這點在後面有辨析）

試着比較一下 #container .card .card-body a.graph:hover:active、#container #card-graph-con a.graph:hover 這兩個個選擇器的特殊性吧？

繼承

咱們沒必要事無鉅細地給每個元素都加上聲明，對於某些值，子元素會繼承父元素的值。CSS世界的誕生就是爲圖文信息展現服務的，因此 CSS 中的繼承理念很符合咱們的直覺。大部分屬性如邊框、邊距、填充等盒子的樣式不能繼承，而文字相關的如字體、顏色等屬性就能夠繼承。

可繼承的屬性如下列出：

交互樣式相關屬性：visibility、cursor
文字排版相關屬性：letter-spacing、word-spacing、white-space、line-height、color、font、 font-*（font-family、font-size、font-style）、text-*（text-indent、text-align、text-shadow、text-transform）
表格排版相關屬性：border-collapse
列表排版相關屬性：list-style、list-style-type、list-style-position、list-style-image

有一點須要注意的是，text-decoration-* 屬性看起來會被繼承，但實則否則：

<p style="text-decoration: underline;"> 父元素 |  <span style="text-decoration: line-through;"> 子元素 text-decoration: line-through </span>  | 父元素</p>

父元素 | 子元素 text-decoration: line-through | 父元素

繼承&特殊性

須要額外注意的一點是，繼承得來的值得特殊性要比 [0，0，0，0] 低。假設有如下代碼：

<h1>This is my heading.<span>asdf</span></h1><style>* { color: #bbb;}h1 {  color: #333; }</style>

將會獲得如下結果：

此外，《CSS權威指南》中提到：應用到 body 元素得背景樣式能夠（向上）傳遞到 html 元素，相應地能夠定義其畫布，這點屬於繼承中的特例。但我沒能復現。

級聯

瀏覽器會如何應用兩個特殊性相等的規則呢？級聯（又做：層疊）會給出答案。這裏給出一個有關於級聯與樣式來源的權重的參考，按權重遞減排列：

用戶樣式的重要性聲明
網站樣式的重要性聲明
網站樣式的正常聲明
用戶樣式的正常聲明
瀏覽器的默認樣式
聲明出如今文檔中的順序越後，權重越大

附：在個人 Yandex 瀏覽器裏已經找不到顯式設置用戶樣式的入口了，我也相信普通用戶不會知曉如何設置用戶樣式的方法，就算知曉也不會去使用——畢竟，插件要香一些。

LVHT

「LVHT」指的是咱們寫 CSS 時常使用的「a:link、a:visited、a:hover、a:active」順序，主要是依靠級聯的最後一條規則「聲明出如今文檔中的順序越後，權重越大」。

通常來講，咱們不會使用「a:active:hover、a:hover:link」等選擇器。因爲咱們老是這四個狀態的重要性依次遞增，因此推薦「LVHT」順序，也能夠記爲「Love&Hate」。

從「LVHT」這個例子能夠看出我爲何以爲「級聯」是CSS最吸引人的地方。級聯概念能體現出一種簡單但深入的理念——設計人員老是但願用戶在瀏覽器中與網頁交互獲得正確的反饋，就比如懸浮按鈕時有樣式反饋，點擊按鈕時有激活提示——級聯迫使設計人員（開發者）思考「咱們能提供什麼信息」、「咱們鼓勵用戶作什麼」。

VFM

VFM，即「Visual Formatting Model」，視覺格式化模型。決定了瀏覽器如何處理文檔樹，將元素轉化爲盒子，及如何佈局。若是對 VFM 不清楚，每每不能理解瀏覽器中不少看起來怪異（經常被說是「BUG」）的佈局表現。其實這些怪異的表現不是「BUG」，只是儘管 VFM 是一種開放而強大的模型，它充滿細節，和咱們腦海中的佈局常識可能不一致；同時，又留有一些規範未覆蓋的餘地，供瀏覽器自由發揮。

頁面上的佈局受到這些因素的影響：

盒子尺寸
盒子類型
定位方案
子元素及兄弟元素
Viewport尺寸及位置
內在尺寸（若是是替換元素的話，須要考慮元素的內在尺寸，如圖片寬度）

盒模型

元素根據 VFM 生成矩形盒子時，須要經過盒模型規範盒子的尺寸。

通常狀況下，CSS 使用自上而下，從左至右的佈局。盒子是其中的最基礎的渲染單位，表明了元素的展示方式，以及它們同周圍元素的相互做用。渲染時，全部元素都會依據盒模型來斷定其大小，位置以及屬性。

一般咱們會以爲 Width 屬性定義了一個元素（塊級元素）的寬度，這種說法其實不太準確。Width 定義的是「內容區」的寬度。通常來講，內容區的寬度指下圖的 width

第一張圖是 W3C 標準盒模型，第二張是 IE 盒模型。至於爲啥有兩種標準，這得追溯回...

...好久之前...

IE：我以爲盒模型應該是這樣的，blahblah。
W3C：明顯應該是這樣的纔對，blahblah。
結果是 IE 在怪異模式下用了「不標準」的盒模型，而標準模式下用了「標準」的盒模型。
圍觀羣衆：據說 IE 的盒模型不標準。

...多年過去...

W3C：感受仍是 IE 的那個模型比較好。但咱們已經回不去了... 算了加個屬性支持一下 IE 那種模式吧。
顧軼靈@知乎: box-sizing 這貨就是用來擦屁股的..

之前寫項目的時候，我喜歡使用通配符重置全部元素的 Box Sizing 爲 Border Box，這樣會使樣式編寫容易一些，由於 Border Box 包含了 Border 的寬度，這個寬度各符合直覺。不過，有幾點可能須要考慮：

統配符可能會帶來樣式污染（好比污染頁面引入的其它庫）
統配符可能會帶來沒必要要的性能消耗（我沒找到關於通配符帶來性能消耗的資料，這條觀點有些站不住腳）
通配符聲明的特殊性要比繼承的值的特殊性要高，容易引發混淆（這點以前提到過，能夠返回去看看以前的「CSS 繼承」小節）

《CSS世界》提到：屬性 Box Sizing 發明的初衷多是用於解決替換元素的寬度自適應的問題。好比輸入框的寬度默認狀況下的 100% 每每會超過父容器。因此建議這樣寫樣式重置：

input, textarea, img, video, object {  box-sizing: border-box; }

盒子的類型

盒子的類型對應元素的 Display 屬性。

外在盒子與內在盒子

想象一下，咱們在樣式表中編寫的 display: inline-block 聲明，能使元素在行內顯示，而內部佈局依舊相似塊級元素。它實際上是一種省略式寫法，能夠理解爲這條聲明只規定了外在盒子顯示爲 Inline，而內在盒子則會回退爲默認值 Block。將這條聲明補全則成了 display: inline-block block。

如下是咱們經常使用的簡寫對應的默認值：

Short display	Full display
Block	Block Flow
Inline	Inline Flow
Inline Block	Inline FlowRoot
Flex	Block Flex

顯示內容類型

一個顯示內容類型的元素（display: contents）會在格式化從佈局樹中將自身移除，可是它的內容卻得以保留。請聯想一下 Vue 內置的 Template 標籤，或是 React.Fragment，大概相似那種玩意兒...

須要注意如下幾點：

盒子不會渲染邊界框，這意味着 Margin、Padding、Border 相關屬性都將失效。
子元素依舊能繼承某些屬性，這和正常盒子的行爲是一致的。
盒子依舊存在於文檔樹中，只是不渲染邊界框。而 Vue 中 Template 標籤是不渲染的。
盒子的 ::before 和 ::after 兩個僞元素都將獲得保留。

顯示內容類型的元素 ::before 和 ::after 兩個僞元素都將獲得保留。

盒子定位

定位方案就三種，普通流定位，浮動定位或是絕對定位。

普通流定位，按普通流的規則從左至右、自上而下地排列盒子，Position 屬性的值爲 static
浮動定位，脫離文檔流，Float 屬性的值不爲 none
絕對定位，脫離文檔流，Position 屬性的值爲 static | fixed

流的方向

可使用相關屬性改變流的方向，下圖是阿拉伯使用的搜索引擎主頁，見 HTML 元素上定義的 DIR 屬性：

BFC

佈局時，會依據盒子的類型生成 BFC（Block Formatting Context）或是 IFC（Inline Formatting Context），它們使盒子在界面上造成一個獨立的，不影響外界的容器。

最直觀的感覺確定是 HTML 元素，即根元素，它是瀏覽器中最重要的一個獨立的不影響外界的容器。根元素會建立 BFC，在一些狀況下，其它元素也會。這裏有 MDN 的一份建立 BFC 方法的清單：

根元素
浮動元素
絕對定位元素
Overflow 不爲 Visible 的塊級元素
行內塊元素，彈性元素，網格元素
表格單元格，表格標題
CSS3 中新增了一種 Display: FlowRoot 能夠用來建立無反作用的 BFC。

BFC 在佈局時，會應用如下規則，須要注意：

BFC 不會和外部浮動元素重疊。
BFC 內部的相鄰的塊級盒子的垂直外邊距會摺疊。
計算 BFC 的高度時，內部浮動的盒子也會參與計算。

BFC 不會和外部浮動元素重疊

BFC 內部的相鄰的塊級盒子的垂直外邊距會摺疊

計算 BFC 的高度時，內部浮動的盒子也會參與計算

IFC

若是一個塊級盒內部只有行內盒子，那麼會建立一個行內上下文，其內部的盒子按照 IFC 的規則水平排列。

在 IFC 中，須要注意如下問題：

內部的盒子一個接着一個地排列，起點是包含塊的頂點。
若是一行放不下內容，那麼會被「拆」開放到下一行。
只有水平方向上的 Margin 會在盒子中保留。
Padding 和 Border 不會撐開行高。

浮動

Float 雖然日常用的很少，可是這裏單獨拎出來康康。原理至少仍是要了解的，由於浮動涉及到一些「看起來像 BUG」的問題。

父容器塌陷問題

浮動元素，尤爲是浮動的圖片，很適合用來進行圖文混合排版。可是因爲脫離了正常文檔流，非 BFC 容器不會計算內部浮動元素的高度，因此會引發父容器塌陷的問題。下一小節將會介紹清除浮動的一些辦法。

浮動錯位問題

HTML 中兩個向右浮動的元素，分別爲 ONE 和 TWO，在瀏覽器渲染出來確實 ONE 在右側，TWO 在左側。

一個浮動的元素會脫離正常的文檔流，而後依據 Float 屬性向左或者向右浮動，直到碰到父容器的邊框或者另外一個浮動元素的邊框爲止。因此，浮動錯位問題是「特性」，不是「BUG」...

清除浮動

有幾種常見的解決塌陷問題的方法，記錄以下：

使用 Clear 屬性：

給父容器的僞元素應用 Clear: Both；（推薦）
添加一個額外的標籤，應用 Clear: Both；

觸發父容器的 BFC:

父元素設置 Display: FlowRoot | Flex | Grid；
父元素設置 Overflow: Hidden | Visible；
父元素也浮動；

給父元素定高；
...（歡迎補充）

FFC

VFM 概念中除了有 BFC、IFC、TFC（Table Formatting Context），CSS3 中還新增了 FFC（Flex Formatting Context）和 GFC（Grid Formatting Context），由於可擴展講的內容太多了，這裏暫且只簡單提一下 FFC。

應用了 display: flex | inline-flex 的元素將會成爲 Flex 容器，Flex 容器會建立 FFC 以格式化佈局其子項。咱們常說的「Flex 佈局」，就是指「FFC」。

FFC 是一種很是靈活的一維佈局方式（GFC 則是強大的二維佈局方式），它使子元素按照主軸方向排列，並可設置不一樣軸向的對齊方式。

Flex 容器能夠應用的屬性

Flex 容器的子元素能夠應用的屬性

flex-grow 光看概念有些難懂，這裏用數值說明一下：假設父容器寬度 100px，子元素只有1個，寬度爲 50px，flex-grow: .5，那麼，子元素就會佔據 100px-50px 剩餘空間的「自身 flex-grow 數值 / 全部子項 flex-grow 之和」的值的百分比（.5 / .5 = 100%）。

因此，當父容器只含有一個子元素時，給子元素設置 flex-grow: 1 能使它填充滿整個父容器：

<div class="b1" stype="display: flex; height: 50px;"> <div class="bb p010 bg-gray tac" style="margin: 1px; border: 1px dashed; flex-grow: 1; height: 50px; line-height: 50px;">DASHED-ITEM</div></div>

前幾天在羣裏有老哥問：怎麼在 Flex 佈局中強制換行啊？

我內心一驚，Flex 不是這樣用的。謹記：儘管有主軸和副軸之分，但 Flex 是一維佈局。不過，強制換行也能夠作到，有不少種方法，如下展現經過子元素設置 flex-basis: 100% 達到強制換行的示例：

<div class="b1" stype="display: flex; flex-wrap: wrap;"> <div class="bb p010 bg-gray tac" style="margin: 1px; border: 1px dashed; height: 50px; line-height: 50px;">DASHED-ITEM</div> <div style="flex-basis: 100%" /> <div class="bb p010 bg-gray tac" style="margin: 1px; border: 1px dashed; height: 50px; line-height: 50px;">DASHED-ITEM</div></div>

FFC 中稍微要注意的地方就是，子元素的 vertical-align、float、clear 屬性會失效。

文本

Line Height & Vertical Align，先挖坑，之後再跳。想要詳細瞭解的話，能夠先康康《CSS世界》，連接直達。

字體

瀏覽器怎樣應用字體

假使 CSS 中指定了頁面運用的字體，瀏覽器要怎麼查找與匹配它們呢？如下是詳細步驟：

建立一個字體屬性數據庫，包含了機器上全部安裝了的字體，及瀏覽器內置字體。
根據如下步驟查找匹配的字體，某些屬性須要徹底匹配，某些則容許匹配失敗（並應用回退選項）。

根據 font-family 的值，按逗號分隔，從左至右依次選定一種候選字體家族，繼續如下匹配。
根據 font-style 匹配。如「italic」關鍵字能夠匹配家族中標有「italic」或「oblique」的字體。若是沒有這樣的字體，則匹配失敗。
根據 font-variant 匹配。若是此項失敗，不會影響繼續匹配。
根據 font-weight 匹配。一定成功。
根據 font-size 匹配。一定成功。

若是字體匹配成功，可是某字形匹配失敗——好比在英文字體中找不到中文字符的定義——那麼將此字形繼續應用 font-family 中值的當前候選字體向後的匹配（返回步驟2）。
若是沒有從 font-family 的值中找到候選字體，則使用瀏覽器默認字體。

好比我把博客字體中全部彎引號的映射都改爲了直角引號，見下圖：

其實原理比較簡單，直接康康定義的 CSS：

@font-face { font-family: 'Quote'; unicode-range: U+201c, U+201d, U+300C, U+300D;}
@font-face { font-family: 'Noto Serif CJK';}
:root { --font-text: 'Quote', 'Noto Serif CJK';}
article { font-family: var(--font-text);}

也就是定義了一個只包含了引號 Unicode 映射的字體「Quote」，而中文字符或是英文字符在這個字體中找不到對應的映射，則回退至「Noto Serif CJK」中進行匹配。在這篇文章能夠康康關於我使用直角引號這件事的原由《關於標點那些事兒》。

前陣子看了蠻多字體相關的東西，我會再寫一篇《前端字體技術進階》（挖坑），不過最近要開始準備找工做啦，得咕咕咕一陣子...

字體屬性使用建議

不使用 font-size: larger | smaller

慎用 font-size: <percent-value>

實踐

CSS管理

關於「如何在項目中管理CSS」的話題夠寫一本書了。這裏簡要介紹一下在我博客項目中採用的一種組織 CSS 的方法——ITCSS。

日常咱們寫 CSS 可能會碰到如下問題：

CSS 的組織結構很鬆散，有時按頁面組織，有時按組件組織，有時候還會按文件夾組織（手動狗頭）
不良的組織習慣致使頁面樣式的繼承很凌亂（調試時沉浸在一堆糨糊中）
凌亂的繼承引來更多的選擇器特殊性問題（Buff：糨糊的粘稠度提升了68%）
...

其實這一切都是 CSS 自己的特徵致使的問題，CSS 自己是弱邏輯的，「裝飾性」的，這注定了通常狀況下咱們不會重視它——沒有文檔、沒有質量保證機制——因此寫 CSS 時經常陷入「用新的樣式去覆蓋舊的樣式」的怪圈（對，往 index.css 文件尾部添加一個帶有 !important 聲明的選擇器）。而遵照 ITCSS 理論可以約束咱們的行爲，它是由 csswizardry 提倡的一種用來組織與管理項目中的樣式文件的體系結構，一種元框架，或是一種 CSS 設計方法論。

ITCSS（Inverted Triangle CSS）的名字很形象，這和它的核心概念有關，它經過規範樣式文件的組織結構來適應項目中特殊性不斷增長的選擇器。見如下倒立的三角形，其中每一層都表明一種樣式的概念結構：

Settings：Global variables、Config switches
Tools：Mixins、Functions
Generic：Ground-zero styles（Normalize.css，resets.css）
Base：Unclassed HTML elements（Type selectors）
Objects：Cosmetic-free design patterns
Components：Designed components
Trumps：Helpers、Overrides

實踐理論將帶來的好處顯而易見：層級自上而下，選擇器影響的 DOM 數量也愈來愈少，同時選擇器特殊性遞增。修改某個樣式時咱們能夠輕易從相關組織文件中作出修改，而不影響其它樣式，或是致使 CSS 樣式繼承的崩塌。

一個使用 ITCSS 組織的項目，其 index.css 可能長這個樣子：

命名方案

CSS 命名方案解決的主要是命名衝突和複用兩個問題。這裏簡單總結幾種較經常使用的，瞭解一下，方便之後直接選坑往裏面跳。

CSS Module
Tailwind
BEM
OOCSS
Atomic css

問題

居中方案

CSS 居中每每是新手們抱怨的問題。下面，咱們分別探討水平居中、垂直居中和水平且垂直居中三種常見問題。

水平居中

行內級元素（如 Inline，Inline Block）

單個塊級元素（如 Block）

多個塊級元素

垂直居中

單行行內級元素

多行行內級元素

塊級元素

水平且垂直居中其實水平且垂直居中，無非就是上兩種方案的整合版本。

結論

總的來講，在不須要考慮兼容性的環境使用 Grid 佈局，能夠完美規避居中問題，由於使用 Grid 佈局每每意味着你的網站頁面排版已經定型。若是不能使用 Grid，那麼局部使用 Flex 佈局是很是省心的作法。

若須要考慮兼容性，那麼用回 Margin 吧，Margin: Auto 會成爲你的好助手。

多行文本截斷

使用 Line Clamp 屬性

模擬截斷

易混淆的點

CSS 大小寫敏感嗎？

2秒內回答：Pixel（px）是相對長度單位仍是絕對長度單位？

display: none 與 visibility: hidden 的區別

letter-spacing 與 word-spacing 的區別

vertical-align 默認對齊哪裏？

調試技巧

打印

我想全部人都知道要怎麼預覽頁面的打印結果，Ctrl + P，等待一段時間，搞定，見下圖：

不過若是頁面複雜的話，就須要等待至關長的時間了... 能夠從這幾點開始進行優化：

經過媒體查詢去除無關樣式，如側邊欄、導航欄

@media print, speech { /* ************************************************************ */ /* *************************************************** 版面調整 */ .navbar, .sidebar-mask, .sidebar, .table-of-contents, #valine-vuepress-comment { display: none; }
 /* **************************************************************** */ /* *************************************************** 具體元素調整 */ .page > div.content__default { // ... }}