這裡總結一下 WEB 前端面試 CSS 部分的常見問題，同時這些問題也是對一些基礎的技術概念和思想的理解。對這些基本知識的掌握程度和深度決定了你的技術層級。高級工程師是必須掌握本文列出的這些知識的，資深工程師則要對這些基本概念的縱向深度進行挖掘（文/YHSPY）。

CSS技術部分：

1、介紹一下標準的 CSS 的盒子模型？與低版本IE的盒子模型有什麼不同的？

IE 盒子模型的範圍同標準 CSS 盒子模型一樣，包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。分別對應於 box-sizing 屬性的 content-box 和 border-box 兩個值。

2、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為 1/60＊1000ms ＝ 16.7ms ；

3、在網頁中的應該使用奇數還是偶數的字體？為什麼？

偶數字號相對更容易和 Web 設計的其他部分構成比例關係，也是為了兼容 Windows Vista 上的點陣宋體字體（只提供了偶數字體點陣）。其他方面筆者感覺，並沒有區別。

自動變成 display:block。

5、讓頁面裡的字體變清晰，變細用 CSS 怎麼做？

-webkit-font-smoothing: antialiased;（抗鋸齒）

6、用純 CSS 創建一個三角形的原理是什麼？

border-top:solid 100px red;

border-left:solid 100px green;

border-right:solid 100px orange;

border-bottom:solid 100px blue;

width: 0;

height: 0;

7、如何修改 Chrome 記住密碼後自動填充表單的黃色背景？

瀏覽器自動添加了 input:-webkit-autofill 私有屬性。

8、瀏覽器是怎樣解析 CSS 選擇器的？

CSS 選擇器是從右往左解析

瀏覽器渲染過程：HTML->HTML 解析器->DOM 樹；樣式->樣式解析器->樣式規則；DOM 樹和樣式規則進行結合形成渲染樹。

9、CSS 繼承

CSS 樣式繼承性是指下級的樣式屬性會繼承上級的屬性，比如 li 會繼承 ul 的屬性。

10、如何居中 div？如何居中一個浮動元素？如何讓絕對定位的 div 居中？

對於定寬的非浮動元素我們可以在 CSS 中用 margin:0 auto 進行水平居中；對於浮動元素可以父子元素同時向一個方向浮動，父元素設置 left:50%；

11、position 的值 relative 和 absolute 定位原點是？

相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。

12、::before 和 :after 中雙冒號和單冒號有什麼區別？

兩個冒號和一個冒號的作用其實一致的，只是在 CSS3 中為了區分偽類選擇器和偽元素選擇器，在語義上更清晰明瞭；

偽類選擇器：:hover :link :active :target :not(s) :focus （偽類的效果可以通過添加一個實際的類來達到）

偽元素選擇器：::first-letter ::first-line ::before ::after ::selection （偽元素的效果是需要通過添加一個實際的元素才能達到的）

13、transform 屬性的幾種常用方法

rotate 旋轉 translate 平移 skew 傾斜 scale 縮放 （以及各個方法的3d版本）

transform-origin 屬性設置動作原點

perspective-origin 屬性設置透視方位

perspective 設置透視角度

14、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過 WebP？

PNG 可以存儲 Alpha 通道，失真小，沒鋸齒，無損壓縮，一種是Index（體積較小），一種是RGB，體積較大；GIF 可以存儲動畫；JPEG 圖片色彩更加豐富，但是有損壓縮，不適合多次讀取儲存；

WebP 是一種谷歌開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3；

15、style 標籤寫在 body 後與 body 前有什麼區別？

CSS 樣式的加載順序從上到下，同時應該符合樣式的放置規範，外部、內部、內嵌。放在 body 裡不符合規範也不利於代碼維護。

16、font-style 屬性的 oblique 和 italic 有什麼區別？

italic 是斜體，是一種不同的字體，而 oblique 是一種仿斜體，是瀏覽器通過將普通字體通過變形而成的“斜體”，italic 選擇字體族的 italic 變體，如果沒有 italic 變體就妥協到 oblique 變體。如果字體族連 oblique 也未提供，則由瀏覽器合成傾斜的仿 oblique 字體。italic 和 oblique 在字體形態上有所不同。

17、常見的移動端開發問題

應該有很多，這裡只列出筆者遇到過的一部分：

若父容器設置了 transform 屬性，則其內部子元素的 position:fixed; 屬性會失效；

18、對 line-height 的理解

行高指的是文本行的基線間的距離，line-height 若使用百分比則實際像素值為所有繼承的元素的 font-size 乘以這個百分比，是先計算然後轉換為像素值；若使用直接像素值，則所有繼承元素使用相同的 line-height 值；相對來說，用純數字指定 line-height 比較好，可以動態改變行距；段落中的行間距最好是本身 font-size 的1.5倍最好，瀏覽器默認行間距為1.14左右。

containing-boxes：它包含了其他的 boxes，比如 p 本身就是一種；

inline-boxes：讓顯示的內容排成一行，比如 span 元素；沒有標籤包裹的文字為匿名 inline-boxes；

line-boxes：inline-boxes 在 containing-boxes 連接成了 line-boxed；

content-area：是圍繞著文字的一種看不見的 boxes，高取決於 font-size；

* line-height 超出 font-size 部分的一半稱為“半行間距”，它被平均的放到 content-area 的頂部和底部；

20、CSS 裡的 visibility 屬性的 collapse 屬性值有什麼作用？在不同瀏覽器下有什麼區別？

該屬性兼容性各個瀏覽器並不統一，對於一般的元素，它的表現跟 hidden 是一樣的。但例外的是，如果這個元素是 table 相關的元素，它的表現卻跟display: none一樣。

21、* position:absolute 的 containing block 計算方式與正常流有什麼不同？

22、視差滾動的原理

視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。

實現原理：主要利用了 background-attachment: fixed; 屬性，隨著頁面的滾動軸背景圖片不會移動。

23、有一個高度自適應的 div，裡面有兩個 div，一個高度 100px，如何讓另一個填滿剩下的高度？

使用 absolute 佈局，通過設置left:0;right:0;top:100px;bottom:0;來自動拉伸子容器，同時父容器設置佈局。

24、display:inline-block 什麼時候會顯示間隙？

瀏覽器的默認行為是把 inline 元素間的空白字符（空格、換行、Tab）渲染成一個空格，這個問題不止出現在 li 元素上；

解決方案：

1、所以把所有 li 放到同一行；

2、將這些被渲染成空格的字符 font-size 設置為 0；

3、設置 letter-spacing 為適當大小；

25、Z-Index 棧

Z-Index 只在設置了 position 屬性（非 static）的元素上生效；父元素的 Z-Index 比子元素先生效；

26、float、relative、absolute、fixed 基礎重點

relative：參照物為元素本身，即默認情況下在文檔流中的位置；

float：元素默認寬度為內容寬度；半脫離文檔流（元素脫離文檔流，內容不脫離文檔流，即一種文字環繞圖片的效果）；

absolute：元素默認寬度為內容寬度；脫離文檔流；參照物為第一個定位祖先（設置了 position 並且值不是 static 的元素）/根元素；如果設置了 absolute 的元素沒有設置寬高，則 LRTB 四個屬性可以將該元素自適應抻開；

fixed：元素默認寬度為內容寬度；脫離文檔流；參照物為視窗；

* float 會導致原有的 inline-boxes 消失，

27、overflow:scroll 時不能平滑滾動（失去滾動慣性）的問題怎麼處理？

添加 -webkit-overflow-scrolling: touch; 屬性，該屬性創建了帶有硬件加速的系統級控件，但比較耗費內存；也可以採用 iScroll 插件解決這個問題。

28、常見的瀏覽器兼容性問題有哪些？

HTML5 的兼容性問題等（筆者公司不考慮IE10以下的瀏覽器）。

29、元素豎向的百分比設定是相對於容器的高度嗎?

當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如 padding-to、padding-bottom、margin-top、margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

30、兩個 CSS 模型

一個是 box 盒狀模型，對應 CSS 為 “（height/width）+ padding + margin”，另外一個是 line box 模型，對應樣式為“line-height”；

31、彈性佈局

彈性父容器：display:flex;

彈性元素：父容器的直接子元素，並且沒有脫離文檔流（非 absolute 屬性）。

指定彈性容器內元素排列方向：flex-direction:row | row-reverse | column | column-reverse

指定彈性容器內元素換行方式：flex-wrap:no-wrap | wrap | wrap-reverse

指定彈性容器內元素排隊和換行方式：flex-flow:

指定彈性元素的排列權重（重的在後邊）：order:

設置元素空餘空間分配權重：flex-grow:

設置元素超出分配空間權重：flex-shrink:

設置元素在主軸方向的基礎長度：flex-basis:

設置元素在主軸方向的彈性：flex:

指定彈性容器內元素的間隔方式：justify-content:flex-start | flex-end | center | space-between | space-arount

指定彈性容器內元素輔軸對齊方式：align-items:flex-start | flex-end | center | stretch | baseline

設置元素在主軸方向的對齊方式：align-self:flex-start | flex-end | center | stretch | baseline

指定彈性容器內元素的輔軸上行的對齊方式：align-content:flex-start | flex-end | center | space-between | space-arount | stretch

32、font-family:serif sans-serif

襯線體 serif：意思是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。

非襯線體 sans-serif：沒有這些額外的裝飾，而且筆畫的粗細差不多。

33、DOMContentLoaded 和 load 的區別

DOM文檔加載的步驟為：

1、解析HTML結構；2、加載外部腳本和樣式表文件；

34、DOM 樹上的各種操作

DOM 樹上的各種操作

35、children 和 childNodes 的區別？nextElementSibling 和 nextSibling 的區別？

children 只會包含元素節點，不會包含文字節點，childNodes 會包含所有子節點；nextElementSibling 只包含元素兄弟節點，nextSibling 會包含文字節點。

36、CSS DOM 概覽

window.getComputedStyle([element]); // 可以獲得一個元素計算後的樣式 CSSStyleDeclaration 對象

CSS DOM 概覽

37、DOM 屬性訪問器訪問屬性和 （g/setAttribute）訪問屬性的區別？

DOM 屬性訪問器：通用性差、擴展性差；但取到的是一個實用對象；

g/setAttribute：取到的只是字符串，通用性；

dataset：element.dataset;（取到該 DOM 元素上所有的自定義屬性，以 data- 開頭的屬性）；

38、DOM 事件觸發、事件綁定與事件卸載

IE8以上：ele.addEventListener ele.removeEventListener ele.dispatchEvent(type); W3C 標準；

IE8及以下：ele.attachEvent ele.detachEvent ele.fireEvent(type);沒有捕獲階段；

39、onerror 事件的常用場景

在 image 標籤加入 在設置圖片出錯時顯示默認圖片；

40、HTML 模塊化構建

HTML 模塊化構建

41、position 屬性各個值的分層關係

static 不能通過 z-index 分層；relative、absolute 和 fixed 可以通過 z-index 分層；首先是遵循DOM的規則，同級的後面居上。一般有定位屬性的元素會高於無定位屬性的同級元素。都有定位屬性的同級元素，z-index 大者居上；如果是非同級的元素， 則會忽略元素本身 z-index，取與對比元素同級的祖先元素的 z-index 屬性，大者居上 。

42、如何高效的插入 HTML 到 DOM 樹的指定位置

1、使用 createDocumentFragment() 創建一個內存中的文檔片段，將所有需要追加到頁面的 HTML 都 appendChild 到這個文檔片段，最後一次性的將該文檔片段 appendChild 到 DOM 樹上；由於拼接子元素的過程是在內存中進行的因此可以減少頁面的迴流和重繪；

2、使用 insertAdjacentHTML(position, text) 直接向頁面插入 HTML 片段，position 分為四個值：beforebegin、afterbegin、beforeend、afterend；

43、em rem vh vw vmin vmax ex ch

em：現對於父元素的字體大小；

rem：相對於根元素 html 的字體大小；

vh vw：其中的 v 表示 viewpoint（視窗），所以這兩個大小單位代表相對於當前視窗的大小，1vh vw 相當於百分之1的視窗高度 寬度。

vmin vmax：同上，其中的 v 表示 viewpoint（視窗），vmin 取 vh vw 中兩者較小的作為單位，vmax 則相反。

ch：常與等寬字體聯合使用“Consolas，Monaco，monospace”。1ch 表示一個0字符的寬度，因此只有在等寬字體的情況下，我們才能用 ch 來精確的調整字符的顯示。

ex：相對長度單位。相對於字符“x”的高度。通常為字體高度的一半。利用 ex 可以實現內聯圖標與段落的垂直居中。

相關閱讀：

閱讀更多 螞蟻大喇叭 的文章

關鍵字: HTML Line 工程師