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

時間 2019-12-08

標籤前端開發基礎知識整理 css 欄目 CSS 简体版

原文原文鏈接

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

CSS優先級如何計算？

同權重下，優先級就近原則（離被設置元素越近優先級別越高），載入樣式以最後載入的爲準：html

內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）

不一樣權重下，優先級關係：前端

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

參考：CSS 樣式優先級css3

什麼是FOUC?如何避免

Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。解決方法：把樣式表放到文檔的headgit

考慮下面的代碼,`<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是16pxgithub

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

引伸部分：web

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

px像素。絕對單位，像素px是相對於顯示器屏幕分辨率而言的，是一個虛擬單位。是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI
em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，所以並非一個固定的值
rem是CSS3新增的一個相對單位(root em,根em),使用rem爲元素設定字體大小事，仍然是相對大小但相對的只是HTML根元素

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方式一覽