前端開發基礎知識整理–css篇

Lemo_Liu發表於2018-03-09
前端CSS

awesome-frontend-interviews是一個用於整理、收集前端基礎知識的開源專案，放在Github上，內容會一直更新，歡迎提交好的內容共同進步，歡迎star。

CSS優先順序如何計算？

同權重下，優先順序就近原則（離被設定元素越近優先順序別越高），載入樣式以最後載入的為準：

  • 內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）

不同權重下，優先順序關係：

  • !important > 內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器 > 萬用字元選擇器
  • 計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標籤選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先順序高，相等則比較下一個。若最後兩個的選擇符中 a、b、c 都相等，則按照“就近原則”來判斷

參考：CSS 樣式優先順序

什麼是FOUC?如何避免

Flash Of Unstyled Content：使用者定義樣式表載入之前瀏覽器使用預設樣式顯示文件，使用者樣式載入渲染之後再從新顯示文件，造成頁面閃爍。解決方法：把樣式表放到文件的head

考慮下面的程式碼,<h1>和<p>元素的margin-bottom的值分別應該是多少px？(假設<h1>和<p>是同級元素)

html {
  font-size: 100%;
}
h1 { 
  font-size: 2em;
  margin-bottom: 1em;
} 
p { 
  font-size: 1em;
  margin-bottom: 1em;
}

<h1>的margin-bottom是32px，<p>的margin-bottom是16px

這種現象的發生在於1em等同於它當前的font-size。因為<h1>中的font-size被設定為了2em,其用在<h1>內的em來計算的屬性，就為1em = 32px。(對於大多數的使用者(和瀏覽器)，font-size的值為100%，就會預設為16px，除非使用者通過瀏覽器設定來改變font-size的預設值)

引申部分：

面試題中，一般em會跟rem、px、vh、vw等單位進行比較使用場景和區別，px、em和rem應該是被比較的比較多的，簡單介紹一下：

  • px畫素。絕對單位，畫素px是相對於顯示器螢幕解析度而言的，是一個虛擬單位。是計算機系統的數字化影像長度單位，如果px要換算成物理長度，需要指定精度DPI
  • em是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對瀏覽器的預設字型尺寸。它會繼承父級元素的字型大小，因此並不是一個固定的值
  • rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字型大小事，仍然是相對大小但相對的只是HTML根元素

推薦閱讀：

題外：

上次在掘金上看到有人在爭關於em的話題，一方說em是相對於父元素的大小，這也是網上被引用的比較多的解釋，另一方說em是相對於自己本身的字型大小。爭議的根源是font-size具有繼承性，它的對錯請自己分辨，不過有爭議是好事，爭議讓我們更深入的瞭解問題。（既然說到繼承了，面試官會不會說：假設我們認為em是繼承的，請用ES6物件導向簡單還原一下我們的問題，然後又是其他一堆東西…）

css清除浮動的幾種方式

  • clear:both
  • overflow（hidden和auto可以清除浮動，visible不行）
  • clearfix

clearfix方法一：

利用:after和:before來在元素內部插入兩個元素塊,其實現原理類似於clear:both方法(只使用clearfix:after時在跨瀏覽器相容問題會存在一個垂直邊距疊加的bug)

.clearfix:before,
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

clearfix方法二：

Nicolsa在《Better float containment in IE using CSS expressions》中介紹的方法

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
  overflow:hidden;
}
.clearfix {
  zoom:1; /* IE < 8 */
}

參考：Clear Float

BFC是什麼?怎麼觸發？有什麼用？

BFC 即 Block Formatting Contexts (塊級格式化上下文)，是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

只要元素滿足下面任一條件即可觸發 BFC 特性：

  • body 根元素
  • 浮動元素：float 除 none 以外的值
  • 絕對定位元素：position (absolute、fixed)
  • display 為 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC作用：

  • 不和浮動元素重疊
  • 清除元素內部浮動
  • 解決上下相鄰兩個元素重疊

推薦閱讀：

重繪和迴流（重排）是什麼，如何優化？

  • Reflow（迴流）：當Render Tree中的一部分（或全部）因為元素的尺寸、佈局、隱藏等改變而需要重新構建。這就稱為迴流
  • Repaint（重繪）：當Render Tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風格、而不會影響佈局的，就是重繪

重繪（Repaint）不一定會引起迴流（Reflow重排），但迴流必將引起重繪（Repaint）

導致Reflow（迴流）的情況：

  • 頁面首次載入
  • 新增或者刪除可見的DOM元素；
  • 元素位置改變；
  • 元素尺寸改變——邊距、填充、邊框、寬度和高度
  • 內容改變——比如文字改變或者圖片大小改變而引起的計算值寬度和高度改變；
  • 頁面渲染初始化；
  • 瀏覽器視窗尺寸改變——resize事件發生時；

減少迴流、重繪其實就是需要減少對render tree的操作（合併多次多DOM和樣式的修改），並減少對一些style資訊的請求，儘量利用好瀏覽器的優化策略。具體方法有：

  • 直接改變className，如果動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）
  • 讓要操作的元素進行”離線處理”，處理完後一起更新
  • 不要經常訪問會引起瀏覽器flush佇列的屬性，如果你確實要訪問，利用快取
  • 讓元素脫離動畫流，減少迴流的Render Tree的規模

參考：頁面重繪和迴流以及優化

rgba()和opacity的透明效果有什麼不同？

rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，而rgba()只作用於元素的顏色或其背景色。（設定rgba透明的元素的子元素不會繼承透明效果！）

如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

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

怎麼解決移動端Retina螢幕1px邊框問題？

  • viewport + rem 實現
  • 0.5px方案
  • border-image
  • background-image
  • 多背景漸變實現
  • 使用box-shadow模擬邊框
  • 偽類 + transform 實現

推薦閱讀：

css hack原理及常用hack

由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。

CSS Hack大致有3種表現形式，CSS屬性字首法、選擇器字首法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際專案中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

  • 屬性字首法(即類內部Hack)：例如 IE6能識別下劃線”_”和星號” “，IE7能識別星號” “，但不能識別下劃線”_”，IE6~IE10都認識”9″，但firefox前述三個都不能認識。
  • 選擇器字首法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
  • IE條件註釋法(即HTML條件註釋Hack)：針對所有IE(注：IE10+已經不再支援條件註釋)： IE瀏覽器顯示的內容 ，針對IE6及以下版本： 。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效。

史上最全的CSS hack方式一覽

css佈局

一般佈局相關的整理:

  • 如何水平居中一個元素（區分單行、多行）
  • 如何豎直居中一個元素（區分居中元素有高度和沒有高度的情況）
  • 左側固定，右側自適應
  • 右側固定，左側自適應
  • 兩邊固定，中間自適應
  • Flex佈局
  • Grid佈局

佈局相關的文章：

相關文章