2023.06.06 更新前端面試問題總結（9道題） - CSS 系列

2023.06.04 - 2023.06.06 更新前端面試問題總結（9道題）

擷取更多面試相關問題可以通路

github 位址: https://github.com/pro-collection/interview-question/issues

gitee 位址: https://gitee.com/yanleweb/interview-question/issues

目錄：

• 初級開發者相關問題【共計 2 道題】
• 414.什麼是正向代理，反向代理【熱度: 656】【CSS】
• 415.css 隐藏元素的方法有哪些【熱度: 1,076】【CSS】
• 中級開發者相關問題【共計 7 道題】
• 416.css 中 僞元素和僞類的差別和作用【熱度: 429】【CSS】
• 417.CSS3 中有哪些新特性【熱度: 1,102】【CSS】
• 418.postcss 是什麼，作用是啥？【熱度: 1,155】【CSS】
• 419.css 栅格布局是什麼，如何實作【熱度: 368】【CSS】
• 420.詳細介紹一下 CSS Grid 布局【熱度: 370】【CSS】
• 421.html 元素節點上， 有多個 class 名稱，這幾個class 名稱對應的樣式渲染優先級是如何的？【熱度: 769】【CSS】
• 422.如何避免全局樣式污染？【熱度: 744】【CSS】

初級開發者相關問題【共計 2 道題】

414.什麼是正向代理，反向代理【熱度: 656】【CSS】

關鍵詞：css display 屬性、css display 作用

下面是一些常用的 CSS display 屬性值及其作用，用表格形式表示：

屬性值	描述
block	元素生成塊級框，占據一行，上下和左右都有邊距，可以設定寬高等屬性
inline	元素生成内聯框，不會獨占一行，僅占據内容所需的空間
inline-block	元素生成内聯塊級框，不會獨占一行，可設定寬高等屬性
none	元素不顯示，不占據空間，對布局沒有影響
flex	使用彈性盒模型布局，子元素可伸縮、排列和對齊
grid	使用網格布局，将元素劃分為網格，可以進行自由布局
table	将元素顯示為表格，包括表格行、表格列和單元格
inline-table	元素以内聯方式顯示為表格
table-cell	元素作為表格單元格顯示
table-row	元素作為表格行顯示
table-row-group	元素作為表格行組顯示

這個表格展示了一些常見的 display 屬性值以及它們的作用。通過設定不同的 display 值，可以控制元素的布局行為和顯示效果，進而實作不同的頁面布局和樣式效果。

415.css 隐藏元素的方法有哪些【熱度: 1,076】【CSS】

關鍵詞：隐藏元素

有多種方法可以隐藏元素的CSS。

1. display: none;：将元素完全隐藏，不占據任何空間。
2. visibility: hidden;：将元素隐藏，但仍占據空間。
3. opacity: 0;：将元素透明化，但仍占據空間。
4. position: absolute; left: -9999px;：将元素定位到螢幕外部，不顯示在可見區域。
5. height: 0; width: 0; overflow: hidden;：将元素高度和寬度設為0，同時隐藏溢出内容。
6. clip-path: polygon(0 0, 0 0, 0 0);：使用剪切路徑将元素隐藏。

這些方法可以根據具體的需求選擇合适的方式來隐藏元素。使用 display: none; 是最常見和常用的隐藏元素的方法，它會完全移除元素并且不占據頁面空間。而其他方法則可以根據需要在元素隐藏的同時保留占位空間或其他特殊效果。

display: none;、visibility: hidden; 和 opacity: 0; 差別是啥

display: none;、visibility: hidden; 和 opacity: 0; 是用于隐藏元素的CSS屬性，它們之間有一些差別：

1. display: none;：該屬性會完全移除元素，并且不占據頁面空間。隐藏後的元素在文檔流中不可見，也不會影響其他元素的布局。相當于元素被完全移除了，無法通過任何方式找到它。當需要徹底從頁面中移除元素時，可以使用該屬性。
2. visibility: hidden; ：該屬性會将元素隐藏，但仍然占據頁面空間。隐藏後的元素在文檔流中保留了位置，僅僅是不可見了。元素隐藏後不會影響其他元素的布局。可以通過JavaScript或其他方式找到該元素，并且可以在需要時将其重新顯示。
3. opacity: 0;：該屬性将元素設定為完全透明。元素仍然占據頁面空間，但是不可見。透明元素在文檔流中保留位置，并且不會影響其他元素的布局。可以通過JavaScript或其他方式找到該元素，并在需要時将其重新設定為可見。

綜上所述，display: none; 完全移除元素并且不占據空間，visibility: hidden; 保留元素位置但不可見，opacity: 0; 使元素透明但仍然占據空間。根據具體需求選擇合适的屬性來隐藏元素。

中級開發者相關問題【共計 7 道題】

416.css 中 僞元素和僞類的差別和作用【熱度: 429】【CSS】

關鍵詞：僞元素和僞類

僞元素和僞類是 CSS 中用于選擇和樣式化元素的特殊标記，它們有一些差別和不同的作用。

僞元素（Pseudo-Element）：

• 表示文檔中不存在的元素，用于在元素的特定位置插入樣式化内容。
• 通過雙冒号 :: 來表示，例如 ::before、::after。
• 可以使用僞元素為元素添加額外的内容、樣式或裝飾，如插入文本、圖示、邊框等。
• 通過 content 屬性設定僞元素的内容。
• 僞元素在文檔中并不存在，是以無法通過 JavaScript 直接操作它們。

僞類（Pseudo-Class）：

• 表示元素在特定狀态下的樣式，例如滑鼠懸停、被點選、處于某個狀态等。
• 通過單冒号 : 來表示，例如 :hover、:active。
• 用于選擇符合特定條件的元素，如選擇第一個子元素、選擇奇偶行等。
• 僞類通過 CSS 規則選擇元素的特定狀态或條件來應用樣式，與元素本身相關。
• 僞類可以通過 JavaScript 動态地添加或移除，以改變元素的狀态。

總結：

• 僞元素用于建立不存在于文檔結構中的元素，并為其添加樣式化内容。
• 僞類用于選擇元素的特定狀态或條件，并為其應用樣式。
• 僞元素使用雙冒号 :: 表示，僞類使用單冒号 : 表示。
• 僞元素在文檔中并不存在，而僞類選擇的是實際存在的元素。

使用僞元素和僞類可以在 CSS 中實作更多的樣式化效果和互動行為，使頁面更加豐富和動态。

417.CSS3 中有哪些新特性【熱度: 1,102】【CSS】

CSS3引入了許多新特性和子產品，以下是一些常見的CSS3新特性：

1. 選擇器增強：
2. 屬性選擇器：支援更多的屬性選擇器，如屬性值字首、字尾、包含等。
3. 僞類選擇器：引入了新的僞類選擇器，如:nth-child()、:nth-of-type()等。
4. 盒子模型：
5. 邊框圓角（border-radius）：可以設定元素的邊框圓角。
6. 陰影效果（box-shadow）：可以為元素添加陰影效果。
7. 盒子大小（box-sizing）：可以調整盒子模型的尺寸計算方式。
8. 背景和漸變：
9. 線性漸變（linear-gradient）：可以建立水準或垂直方向的漸變背景。
10. 徑向漸變（radial-gradient）：可以建立從一個中心點向外擴散的漸變背景。
11. 文字和字型：
12. @font-face：允許在網頁中引用自定義字型檔案。
13. 文字陰影（text-shadow）：可以為文字添加陰影效果。
14. 多列文字（columns）：可以建立多列布局的文字。
15. 過渡和動畫：
16. 過渡效果（transition）：可以實作元素在不同狀态之間的平滑過渡。
17. 關鍵幀動畫（@keyframes）：可以定義動畫的關鍵幀和動畫效果。
18. 動畫屬性（animation）：用于指定動畫的持續時間、重複次數等屬性。
19. 彈性布局（Flexbox）：
20. 引入了彈性布局模型，使元素在容器中的布局更加靈活和自适應。
21. 響應式布局（Media Queries）：
22. 可以根據不同的媒體查詢條件應用不同的樣式，實作響應式布局。
23. 變換和變形：
24. 2D變換（transform）：可以對元素進行平移、旋轉、縮放等變換操作。
25. 3D變換（transform）：可以實作元素的三維空間變換效果。
26. 過濾器（Filter）：
27. 可以應用各種視覺效果和圖像處理效果，如模糊、亮度、對比度等。
28. 多列布局（Multicolumn Layout）：
29. 可以将内容分為多列進行布局。

以上隻是 CSS3 中的一些常見新特性，還有許多其他的新特性和子產品，使得開發者可以更加靈活和高效地進行樣式設計和布局。

418.postcss 是什麼，作用是啥？【熱度: 1,155】【CSS】

關鍵詞：postcss 作用、css 預處理、css 子產品化

概念與作用

PostCSS 是一個用 JavaScript 編寫的工具，用于對 CSS 進行轉換和處理。它可以通過插件機制對 CSS 進行各種自定義的轉換操作，進而擴充 CSS 的功能和文法。

PostCSS 的作用主要有以下幾個方面：

1. CSS 預處理器：PostCSS 可以像 Sass 或 Less 一樣用于編寫更簡潔、可維護的 CSS 代碼。通過使用類似于變量、嵌套、Mixin 等功能，可以提高 CSS 開發的效率和靈活性。
2. 自動添加浏覽器字首：PostCSS 可以根據配置自動為 CSS 屬性添加适應不同浏覽器的字首，解決浏覽器相容性問題。
3. CSS 子產品化：PostCSS 可以使用類似于 CSS Modules 的功能，将 CSS 代碼分割為獨立的子產品，避免樣式沖突，提供更好的可維護性和代碼複用性。
4. 代碼優化和壓縮：PostCSS 提供了一些插件，可以對 CSS 代碼進行優化和壓縮，減小檔案大小，提高加載性能。
5. 編寫自定義插件：PostCSS 的插件機制非常靈活，可以根據項目需求編寫自定義的插件，進行各種 CSS 轉換和處理操作，如自定義屬性、自定義函數等。

可以用于增強 CSS 的能力，并提供更好的開發體驗和效果優化。它的靈活性和可擴充性使得開發者可以根據項目需求選擇和定制相應的插件，實作對 CSS 的定制化處理。

postcss css 子產品化 和 css-loader 子產品化有什麼差別？

PostCSS 的 CSS 子產品化和 css-loader 的子產品化是兩種不同的概念和實作方式。

1. CSS 子產品化 (PostCSS): CSS 子產品化是指使用 PostCSS 插件或工具來實作将 CSS 代碼拆分為獨立的子產品，以解決樣式沖突和提供更好的可維護性和代碼複用性。通過使用類似于 CSS Modules 的功能，每個子產品都有自己的作用域，樣式定義不會影響其他子產品，同時還可以通過類似于變量、嵌套、Mixin 等功能來增強 CSS 的編寫能力。CSS 子產品化通常需要使用 PostCSS 插件，如 postcss-modules、css-modules 等。
2. CSS 子產品化 (css-loader): css-loader 是 Webpack 生态系統中的一個子產品化工具，用于處理 CSS 檔案。它的子產品化功能是通過将 CSS 檔案轉換為 JavaScript 子產品來實作的。每個 CSS 類名都被轉換為一個唯一的辨別符，以確定樣式的唯一性和隔離性。在使用 css-loader 時，需要将 CSS 檔案引入 JavaScript 子產品中，并通過 JavaScript 代碼來操作樣式。

差別：

• PostCSS 的 CSS 子產品化是在 CSS 層面上進行的，通過插件的方式對 CSS 代碼進行拆分和處理，提供更好的作用域隔離和編寫能力。
• css-loader 的子產品化是在建構工具層面上進行的，将 CSS 檔案轉換為 JavaScript 子產品，通過 JavaScript 代碼來操作樣式。
• PostCSS 的 CSS 子產品化更加靈活，可以根據項目需求選擇和定制相應的插件來實作不同的功能。
• css-loader 的子產品化是內建在 Webpack 建構流程中的一部分，與子產品化開發緊密結合，适用于前端項目的建構和打包過程。

419.css 栅格布局是什麼，如何實作【熱度: 368】【CSS】

關鍵詞：栅格布局、grid 布局

CSS 栅格布局是一種用于建立響應式網格系統的布局技術。它基于将頁面分為等寬的列，并使用行來組織内容。栅格布局提供了一種靈活的方式來建立自适應的網格布局，以便在不同螢幕尺寸和裝置上顯示良好。

實作 CSS 栅格布局的方法有多種，以下是一種常見的實作方式：

1. HTML 結構：使用 <div> 元素建立栅格布局的容器，并在容器内添加栅格列元素。

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <!-- ... -->
</div>           

1. CSS 樣式：為容器和栅格列元素定義樣式。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 建立三列，每列等寬 */
    gap: 10px; /* 列之間的間隔 */
}

.grid-item {
    background-color: #ccc;
    padding: 10px;
}           

上述示例中，通過設定 display: grid; 将容器設為栅格布局。使用 grid-template-columns 定義栅格的列數和寬度，這裡使用 repeat(3, 1fr) 表示建立三列，每列寬度相等。通過 gap 屬性設定列之間的間隔。栅格列元素則可以按需添加，根據需要進行樣式設定。

通過以上方式，可以快速實作簡單的 CSS 栅格布局。根據實際需求，還可以添加更多的樣式和調整布局參數，如自适應布局、媒體查詢等，以适應不同的螢幕尺寸和裝置。

420.詳細介紹一下 CSS Grid 布局【熱度: 370】【CSS】

關鍵詞：栅格布局、grid 布局

CSS Grid 布局是一種強大的二維網格布局系統，它允許開發者以更靈活的方式建立複雜的網頁布局。通過将頁面劃分為行和列，開發者可以精确控制元素的位置和尺寸，并在不同螢幕尺寸下實作響應式布局。

以下是 CSS Grid 布局的一些關鍵概念和特性：

1. 網格容器（Grid Container）：使用 display: grid; 将一個元素設定為網格容器。它是網格布局的父元素，内部的子元素将參與布局。
2. 網格項目（Grid Item）：網格容器中的子元素稱為網格項目。每個網格項目可以占據一個或多個網格單元，形成網格布局。
3. 網格行（Grid Row）和網格列（Grid Column）：網格布局由行和列組成。通過定義網格行和網格列，可以将網格劃分為不同的區域。
4. 網格單元（Grid Cell）：網格單元是網格中的每個交叉點，形成的矩形區域。網格項目可以跨越多個網格單元。
5. 網格線（Grid Line）：網格線是劃分網格行和網格列的線條。可以通過指定網格線的位置和名稱來控制布局。
6. 網格軌道（Grid Track）：網格軌道是相鄰網格線之間的空間，用于确定網格單元的尺寸和位置。

通過使用 CSS 屬性和值，可以對網格布局進行進一步控制，例如：

• grid-template-rows 和 grid-template-columns：用于定義網格的行和列的大小和數量。
• grid-gap：用于設定網格行和列之間的間隔。
• grid-auto-rows 和 grid-auto-columns：用于定義自動建立的行和列的大小。
• grid-template-areas：用于定義網格布局的區域和位置。
• grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：用于控制網格項目在網格中的位置。

CSS Grid 布局的優勢包括：

• 靈活的布局：通過定義網格行和列，可以實作複雜的布局需求，如等寬列、自适應布局、多列換行等。
• 響應式設計：可以使用媒體查詢和自動調整來實作在不同螢幕尺寸下的布局變化。
• 簡化的嵌套布局：與傳統的 float 和 position 布局相比，CSS Grid 布局可以更輕松地實作多層嵌套的布局。
• 對齊和對稱：通過對網

格行和列進行對齊和調整，可以實作元素的水準和垂直對齊，以及對稱布局。

總之，CSS Grid 布局為開發者提供了更強大、靈活和直覺的布局工具，使網頁布局更加簡單和可控，同時具備響應式和可擴充性。

當涉及到 CSS Grid 布局的屬性和值時，以下是一些常用的屬性和相應的作用的表格示例：

下面是CSS Grid布局中常用的屬性和值，以及它們的作用：

屬性	值	作用
display	grid	将元素設定為網格容器
grid-template-rows	value	定義網格的行的大小和數量
grid-template-columns	value	定義網格的列的大小和數量
grid-gap	length or percentage	設定網格行和列之間的間距
grid-auto-rows	value	定義自動建立的行的大小
grid-auto-columns	value	定義自動建立的列的大小
grid-template-areas	none, name, row, column, .	定義網格布局的區域和位置
grid-column-start	line, span n, auto	控制網格項目的開始列位置
grid-column-end	line, span n, auto	控制網格項目的結束列位置
grid-row-start	line, span n, auto	控制網格項目的開始行位置
grid-row-end	line, span n, auto	控制網格項目的結束行位置
justify-items	start, end, center, stretch	水準方向上設定網格項目的對齊方式
align-items	start, end, center, stretch	垂直方向上設定網格項目的對齊方式
justify-content	start, end, center, stretch, space-between, space-around	設定網格容器内網格項目在主軸上的對齊方式
align-content	start, end, center, stretch, space-between, space-around	設定網格容器内網格項目在交叉軸上的對齊方式
grid-template	none, name, row, column, .	一個簡寫屬性，可以同時設定grid-template-rows和grid-template-columns屬性
grid-auto-flow	row, column, dense	設定自動布局算法和順序

這些屬性和值可以用于建立網格布局，并控制網格項目在網格中的位置和尺寸。通過定義網格的行和列，以及對齊方式，可以實作靈活的網頁布局。可以通過設定網格的大小、間距和自動建立行列等屬性，實作不同的布局需求。同時，通過調整網格項目的起始和結束位置，以及對齊方式，可以精确控制元素在網格中的放置方式。

421.html 元素節點上， 有多個 class 名稱，這幾個class 名稱對應的樣式渲染優先級是如何的？【熱度: 769】【CSS】

關鍵詞：class 名稱樣式優先級

當一個HTML元素節點上有多個class名稱，并且這些class名稱對應的樣式存在沖突時，CSS的渲染優先級遵循以下規則：

1. 内聯樣式（Inline Styles）具有最高優先級。如果在元素節點的style屬性中定義了内聯樣式，它将覆寫所有其他樣式規則。
2. 如果多個class名稱對應的樣式規則具有相同的優先級，将根據它們在HTML文檔中出現的順序進行應用。後面出現的樣式規則将覆寫先前出現的規則。

如果不同class名稱對應的樣式規則具有不同的優先級，将根據選擇器的權重來決定應用的樣式規則。選擇器的權重由選擇器類型、選擇器的組合和使用的選擇器數量等因素确定。一般而言，ID選擇器的權重最高，然後是類選擇器和屬性選擇器，最後是元素選擇器和僞類選擇器。

總結起來，多個class名稱對應的樣式渲染優先級主要受到樣式規則的具體定義和選擇器的權重影響。如果樣式規則具有相同的優先級，則根據它們在HTML文檔中的出現順序進行應用。如果樣式規則具有不同的優先級，則根據選擇器的權重來決定應用的樣式規則。

422.如何避免全局樣式污染？【熱度: 744】【CSS】

關鍵詞：避免樣式污染、css 子產品化

要避免全局樣式污染，可以采取以下幾種方式：

1. 使用命名約定：給不同元件、子產品或頁面的樣式類名添加特定的字首，以確定它們的作用範圍隻在對應的元件、子產品或頁面内生效。例如，使用 BEM（Block Element Modifier）命名約定可以将樣式類名劃分為塊、元素和修飾符，以實作更明确的樣式隔離。
2. 使用 CSS-in-JS：使用 CSS-in-JS 技術，将樣式直接與元件綁定，可以避免全局樣式的沖突。每個元件都有自己的樣式定義，不會影響其他元件。
3. 使用 CSS Modules：CSS Modules 是一種 CSS 子產品化的解決方案，它通過将 CSS 檔案與元件綁定，在建構過程中自動生成唯一的類名，進而實作樣式的局部作用域。這樣可以避免全局樣式沖突。
4. 使用作用域限定符：使用 CSS 預處理器（如 Sass 或 Less）的作用域限定符（如父選擇器 &）來限制樣式的作用範圍。通過嵌套樣式規則，并使用作用域限定符，可以確定樣式僅應用于特定的父元素。
5. 使用樣式重置/規範：使用樣式重置或規範庫，如 Normalize.css，可以消除浏覽器預設樣式的差異，以確定在不同浏覽器下呈現一緻的樣式，并避免全局樣式污染。
6. 使用子產品化開發架構：使用諸如 React、Vue 或 Angular 等子產品化開發架構，它們提供了元件化的開發模式，每個元件具有獨立的樣式作用域，可以避免全局樣式的沖突。

有哪些工具庫可以幫助避免全局樣式污染

以下是一些常用的工具庫和技術，可以幫助避免全局樣式污染：

1. CSS Modules：CSS Modules 是一種 CSS 子產品化的解決方案，可以将樣式檔案與元件綁定，生成唯一的類名，實作樣式的局部作用域。常見的 CSS Modules 實作包括 webpack 的 css-loader 和 vue-style-loader。
2. CSS-in-JS：CSS-in-JS 是一種将 CSS 樣式直接寫在 JavaScript 代碼中的技術，通過将樣式與元件綁定，可以實作樣式的局部作用域。常見的 CSS-in-JS 工具庫有 styled-components、Emotion、Vue的 scoped CSS 等。
3. BEM（Block Element Modifier）命名約定：BEM 是一種命名約定，通過給樣式類名添加特定字首來區分不同元件或元素的樣式。使用 BEM 命名約定可以避免樣式類名沖突，實作樣式的隔離。
4. CSS Reset/Normalize：CSS Reset 或 Normalize.css 是一種重置或規範化浏覽器預設樣式的方法，通過統一浏覽器樣式差異，避免全局樣式污染。
5. PostCSS 插件：PostCSS 是一個強大的 CSS 處理工具，可以通過使用各種插件來幫助避免全局樣式污染。例如，postcss-modules 可以将樣式檔案轉換為 CSS Modules 格式，postcss-preset-env 可以根據目标浏覽器自動添加字首。
6. CSS 預處理器：CSS 預處理器如 Sass 或 Less 提供了作用域限定符和嵌套樣式規則的功能，可以幫助限制樣式的作用範圍，避免全局樣式沖突。

這些工具庫和技術可以根據項目需求選擇适合的方式來避免全局樣式污染。每種方式都有其優勢和适用場景，根據個人偏好和項目特點選擇合适的工具庫和技術進行開發。