CSS 面試題

本文轉載自查看原文 2022-03-07 17:02 1166 面經

1、css 的渲染層合成是什么？瀏覽器如何創建新的渲染層？

2、css 優先級是怎么計算的？

!important 會覆蓋頁面內任何位置的元素樣式
內聯樣式，例如：style="color: green"
ID 選擇器，例如：#app
類、偽類、屬性選擇器
標簽、偽元素選擇器
通配符、子類選擇器、兄弟選擇器，例如：*，>，+
繼承的樣式沒有權值

3、css 怎么開啟硬件加速（GPU 加速）

4、CSS中可繼承與不可繼承屬性有哪些

5、display 的屬性值及其作用

根據 display 的取值在瀏覽器中進行不同的顯示，取值如下：

（1）none：元素不顯示，並且會從文檔流中移除

（2）block：塊類型，默認寬度為父元素寬度，可設置寬高，換行顯示

（3）inline：行內元素類型，默認寬度為內容寬度，不可設置寬高，同行顯示

（4）inline-block：默認寬度為內容寬度，可以設置寬高，同行顯示

（5）list-item：像塊類型元素一樣顯示，並添加樣式列表標記

（6）table：此元素會作為塊級表格來顯示

（7）inherit：規定應該從父元素繼承 display 屬性的值

6、display 的 block、inline 和 inline-block 的區別？行內元素、塊級元素的特點？

（1）區別：

　　① block：獨占一行，多個元素會另起一行，可以設置 width、height、margin 和 padding 屬性；

　　② inline：元素不會獨占一行，設置 width、height 屬性無效；但可以設置水平方向的 margin 和 padding 屬性，不能設置垂直方向的 padding 和 margin；

　　③ inline-block：元素不會獨占一行，可以設置width、height 屬性

（2）行內元素、塊級元素的特點：

行內元素

　　① 設置寬高無效

　　② 可以設置水平方向的 margin 和 padding 屬性，不能設置垂直方向的 padding 和 margin；

　　③ 不會自動換行；

塊級元素

　　① 可以設置寬高；

　　② 設置 margin 和 padding 都有效；

　　③ 可以自動換行，多個塊狀，默認排列從上到下。

7、隱藏元素的方法

（1）display:none：渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據位置，也不會響應綁定的監聽事件

（2）visibility:hidden：元素在頁面中仍占據空間，但是不會響應綁定的監聽事件

（3）opacity: 0：將元素的透明度設置為 0，以此來實現元素的隱藏。元素在頁面中仍然占據空間，並且能夠響應元素綁定的監聽事件

（4）position: absolute：通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏

（5）z-index: 負值：來使其他元素遮蓋住該元素，以此來實現隱藏

8、link 和 @import 的區別

兩者都是外部引用 CSS 的方式，它們的區別如下：

① link 引用 CSS 時，在頁面載入時同時加載；@import 需要頁面網頁完全載入以后加載

② link 是 XHTML 標簽，無兼容問題；@import 低版本的瀏覽器不支持

③ link 支持使用 Javascript 控制 DOM 去改變樣式；而 @import 不支持

④ link 是 XHTML 標簽，除了加載 CSS 外，還可以定義 RSS 等其他事務；@import 屬於 CSS 范疇，只能加載 CSS

9、transition 和 animation 的區別

（1）transition

過渡屬性，強調過渡，它的實現需要觸發一個事件（比如鼠標移動上去，焦點，點擊等）才執行動畫

（2）animation

動畫屬性，不需要觸發事件，設定好時間之后可以自己執行，且可以循環一個動畫

10、display:none 與 visibility:hidden 的區別

這兩個屬性都是讓元素隱藏不可見，兩者區別如下：

（1）在渲染樹中

display:none 會讓元素完全從渲染樹中消失，渲染時不會占據任何空間；

visibility:hidden 不會讓元素從渲染樹中消失，渲染的元素還會占據相應的空間，只是內容不可見

（2）是否是繼承屬性

display:none 是非繼承屬性，子孫節點會隨着父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示；

visibility:hidden 是繼承屬性，子孫節點消失是由於繼承了hidden，通過設置 visibility:visible 可以讓子孫節點顯示；

（3）修改常規文檔流中的元素

元素的 display 通常會造成文檔的重排，但是修改visibility屬性只會造成本元素的重繪

11、偽元素和偽類的區別和作用

（1）區別：根本在於操作的對象元素是否存在於原來的 dom 結構里。

　　① 偽元素：操作對象是新生成的 dom 元素，而不是原來 dom 結構里就存在的；

　　② 偽類：操作對象是原來的 dom 結構里就存在的元素。

（2）作用

　　① 偽元素：在內容元素的前后插入額外的元素或樣式

　　② 偽類：將特殊的效果添加到特定選擇器上

12、對 requestAnimationframe 的理解

13、對盒子模型的理解

CSS3中的盒模型有以下兩種：標准盒子模型、IE盒子模型

盒模型都是由四個部分組成的，分別是 margin、border、padding 和 content。

標准盒模型和 IE 盒模型的區別在於設置 width 和 height 時，所對應的范圍不同

標准盒模型的 width 和 height 屬性的范圍只包含了 content
IE盒模型的 width 和 height 屬性的范圍包含了 border、padding 和 content

可以通過修改元素的 box-sizing 屬性來改變元素的盒模型：

box-sizeing: content-box 表示標准盒模型（默認值）
box-sizeing: border-box 表示 IE 盒模型（怪異盒模型）

14、為什么有時候⽤ translate 來改變位置而不是定位？

15、為什么 li 與 li 之間有看不見的空白間隔？如何解決？

（1）原因

瀏覽器會把行內元素間的空白字符（空格、換行、Tab等）渲染成一個空格。

為了美觀，通常是一個 <li> 放在一行，這導致 <li> 換行后產生換行字符，它變成一個空格，占用了一個字符的寬度。

（2）解決辦法

消除 <li> 的字符間隔

letter-spacing:-8px

不足：這也設置了 <li> 內的字符間隔，因此需要將 <li> 內的字符間隔設為默認

letter-spacing:normal

16、CSS3中有哪些新特性

① 新增各種 CSS 選擇器

: not(.input)： class 不是 "input" 的節點

② 圓角（border-radius:8px）

③ 多列布局（multi-column layout）

④ 陰影和反射（Shadoweflect）

⑤ 文字特效（text-shadow）

⑥ 文字渲染（Text-decoration）

⑦ 線性漸變（gradient）

⑧ 旋轉（transform）

⑨ 增加了旋轉、縮放、定位、傾斜、動畫、多背景

17、替換元素的概念及計算規則

18、常見的圖片格式及使用場景

19、對 CSSSprites 的理解

20、什么是物理像素、邏輯像素和像素密度？為什么在移動端開發時需要用到 @3x、@2x 這種圖片？

21、對 line-height 的理解及其賦值方式

（1）概念

line-height 指一行文本的高度，包含了字間距，實際上是下一行基線到上一行基線距離
一個標簽沒有定義 height 屬性，那么其最終表現的高度由 line-height 決定
一個容器沒有設置高度，那么撐開容器高度的是 line-height
把 line-height 值設置為 height 一樣大小的值，可以實現單行文本的垂直居中
line-height 和 height 都能撐開一個高度

帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
純數字：會把比例傳遞給后代。例如：父級行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px
百分比：將計算后的值傳遞給后代

22、CSS 優化和提高性能的方法有哪些

23、CSS 預處理器、后處理器是什么？為什么要使用它們？

24、::before 和 :after 的雙冒號和單冒號有什么區別

25、單行、多行文本溢出隱藏

（1）單行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;      // 溢出用省略號顯示
white-space: nowrap;         // 規定段落中的文本不進行換行

（2）多行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;     // 溢出用省略號顯示
display:-webkit-box;       　　  // 作為彈性伸縮盒子模型顯示
-webkit-box-orient:vertical;    // 設置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3;              // 顯示的行數

注意：由於上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個 -webkit- 來兼容一部分瀏覽器

26、Sass、Less 是什么為什么要使用他們

27、對媒體查詢的理解

28、對 CSS 工程化的理解

29、如何判斷元素是否到達可視區域

30、z-index 屬性有什么作用？在什么情況下會失效？

（1）作用

通常 z-index 的使用是在有兩個重疊的標簽，在一定的情況下控制其中一個在另一個的上方或者下方出現
z-index 值越大就越是在上層
z-index 元素的 position 屬性需要是 relative、absolute 或是 fixed

（2）在下列情況下會失效

父元素 position 為 relative 時，子元素的 z-index 失效。解決：父元素 position 改為 absolute 或 static；
元素沒有設置 position 屬性為非 static 屬性。解決：設置該元素的 position 屬性為 relative，absolute 或是 fixed 中的一種；
元素在設置 z-index 的同時還設置了 float 浮動。解決：float 去除，改為 display：inline-block；

31、常見的 CSS 布局單位

32、px、em、rem 的區別及使用場景

（1）區別

px是固定的像素，一旦設置了就無法因為適應頁面大小而改變
em和rem相對於px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用於響應式布局
em是相對於其父元素來設置字體大小，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小。而rem是相對於根元素，這樣就意味着，只需要在根元素確定一個參考值

（2）使用場景

對於只需要適配少部分移動設備，且分辨率對頁面影響不大的，使用 px 即可
對於需要適配各種移動設備，使用 rem，例如需要適配 iPhone 和 iPad 等分辨率差別比較挺大的設備

33、兩欄布局的實現

一般兩欄布局指的是左邊一欄寬度固定，右邊一欄寬度自適應，具體實現：

（1）利用浮動，將左邊元素寬度設置為200px，並且設置向左浮動。將右邊元素的margin-left設置為200px，寬度設置為auto（默認為auto，撐滿整個父元素

.outer { height: 100px;
} .left { float: left; width: 200px; background: tomato;
} .right { margin-left: 200px; width: auto; background: gold;
}

（2）利用浮動，左側元素設置固定大小，並左浮動，右側元素設置 overflow: hidden; 這樣右邊就觸發了 BFC，BFC 的區域不會與浮動元素發生重疊，所以兩側就不會發生重疊

.left{ width: 100px; height: 200px; background: red; float: left;
 } .right{ height: 300px; background: blue; overflow: hidden;
 }

（3）利用flex布局，將左邊元素設置為固定寬度 200px，將右邊的元素設置為 flex:1

.outer { display: flex; height: 100px;
} .left { width: 200px; background: tomato;
} .right { flex: 1; background: gold;
}

（4）利用絕對定位，將父級元素設置為相對定位。左邊元素設置為absolute定位，並且寬度設置為200px。將右邊元素的margin-left的值設置為200px

.outer { position: relative; height: 100px;
} .left { position: absolute; width: 200px; height: 100px; background: tomato;
} .right { margin-left: 200px; background: gold;
}

（5）利用絕對定位，將父級元素設置為相對定位。左邊元素寬度設置為200px，右邊元素設置為絕對定位，左邊定位為200px，其余方向定位為0

.outer { position: relative; height: 100px;
} .left { width: 200px; background: tomato;
} .right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold;
}

34、如何根據設計稿進行移動端適配

移動端適配主要有兩個維度：

適配不同像素密度，針對不同的像素密度，使用 CSS 媒體查詢，選擇不同精度的圖片，以保證圖片不會失真
適配不同屏幕大小，由於不同的屏幕有着不同的邏輯像素大小，所以如果直接使用 px 作為開發單位，會使得開發的頁面在某一款手機上可以准確顯示，但是在另一款手機上就會失真。為了適配不同屏幕的大小，應按照比例來還原設計稿的內容

為了能讓頁面的尺寸自適應，可以使用 rem，em，vw，vh 等相對單位

35、對Flex布局的理解及其使用場景

36、響應式設計的概念及基本原理

（1）概念

響應式網站設計（Responsive Web design）是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本

（2）原理

基本原理是通過媒體查詢（@media）查詢檢測不同的設備屏幕尺寸做處理；關於兼容：頁面頭部必須有mate聲明的 viewport

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

37、為什么需要清除浮動？有哪些清除浮動的方式？

浮動的定義：

非IE瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。此時，內容會溢出到容器外面而影響布局。這種現象被稱為浮動（溢出）

浮動的工作原理：

浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）

浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

38、使用 clear 屬性清除浮動的原理

39、如何理解 BFC？如何創建BFC？

40、什么是 margin 重疊問題？如何解決？

41、元素的層疊順序

42、display、position、float 的關系

首先判斷 display 屬性是否為 none，如果為 none，則 position 和 float 屬性的值不影響元素最后的表現
然后判斷 position 的值是否為 absolute 或者 fixed，如果是，則 float 屬性失效，並且 display 的值應該被設置為 table 或者 block，具體轉換需要看初始轉換值
如果 position 的值不為 absolute 或者 fixed，則判斷 float 屬性的值是否為 none，如果不是，則 display 的值則按上面的規則轉換。注意，如果 position 的值為 relative 並且 float 屬性的值存在，則 relative 相對於浮動后的最終位置定位
如果 float 的值為 none，則判斷元素是否為根元素，如果是根元素則 display 屬性按照上面的規則轉換，如果不是，則保持指定的 display 屬性值不變

總的來說，可以把它看作是一個類似優先級的機制，'position:absolute' 和 'position:fixed' 優先級最高，有它存在的時候，浮動不起作用，'display' 的值也需要調整

其次，元素的 'float' 特性的值不是 'none' 的時候或者它是根元素的時候，調整 'display' 的值；

最后，非根元素，並且非浮動元素，並且非絕對定位的元素，'display' 特性值同設置值

43、absolute 與 fixed 共同點與不同點

共同點：

改變行內元素的呈現方式，將 display 置為 inline-block

使元素脫離普通文檔流，不再占據文檔物理空間

覆蓋非定位文檔元素

不同點：

abuselute與fixed的根元素不同，abuselute的根元素可以設置，fixed根元素是瀏覽器。

在有滾動條的頁面中，absolute會跟着父元素進行移動，fixed固定在頁面的具體位置

44、對 sticky 定位的理解

45、設置小於 12px 的字體

46、CSS3 新增偽類有哪些？

47、CSS 選擇器有哪些？哪些屬性可以繼承？

48、margin 和 padding 分別適合什么場景使用

（1）何時使用margin

需要在border外側添加空白

空白處不需要背景色

上下相連的兩個盒子之間的空白，需要相互抵消時

（2）何時使用padding

需要在border內側添加空白

空白處需要背景顏色

上下相連的兩個盒子的空白，希望為兩者之和。

兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決

49、解釋一下 png、jpg、gif 圖片格式？分別什么時候用？有沒有了解過 webp？

50、列舉一些CSS框架

Bootstrap：基於HTML、CSS、JavaScript 開發，由動態 CSS 語言 Less寫成

React 組件

Layui：遵循原生 HTML/CSS/JS 的書寫與組織形式

ElementUI：基於 Vue 2.0的桌面端組件庫

51、使用 CSS Sprites 的好處

52、overflow 屬性在 CSS 中有什么作用？

（1）作用

overflow 屬性規定當內容溢出元素框時發生的事情

如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條

（2）可能的值

overflow: auto：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容

overflow: hidden：內容會被修剪，並且其余內容是不可見的

overflow: scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

overflow: visible：默認值。內容不會被修剪，會呈現在元素框之外

53、CSS 的特異性是什么意思

54、什么是塊級格式化上下文（BFC）？如何工作？

55、這段 CSS 代碼會產生什么影響 {box-sizing：border-box;}？

56、相對、固定、絕對、靜態定位的元素有什么區別？

57、什么是文件分割？何時使用？

58、介紹一下標准的 css 的盒子模型？與低版本 IE 的盒子模型有什么不同？

59、Render Tree 和 CSSOM Tree 的區別

60、重排與重繪

（1）重排 reflow（回流）

當瀏覽器發現某個部分發生了變化影響了布局，需要倒回去重新渲染

添加、刪除可見的 DOM 元素
元素位置改變、尺寸改變、內容改變
頁面初始化、resize 事件等

（2）重繪 repaint

改變某個元素的背景色、文字顏色、邊框顏色等影響周圍或內部布局的屬性時，屏幕的一部分要重畫，但元素的幾何尺寸不變

注意：

① 回流必定引起重繪，而重繪不一定會引起回流

② display: none;的節點不會被加入渲染樹，而 visibility: hidden;會被加入渲染樹

③ display:none;會觸發回流；visibility: hidden;會觸發重繪

61、position 中的 relative 和 absolute 的定位原點是什么

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 有關於CSS的面試題和練習 CSS3面試題 css js基礎面試題前端面試題 - css html5和css3面試題 HTML+CSS+JS（面試題） CSS前端面試題基礎面試題——HTML/CSS 【前端面試】CSS常見面試題匯總 50道 CSS 基礎面試題（附答案）