CSS 面試題



CSS 代表層疊樣式表,用於定義網頁的視覺外觀和佈局。CSS 由 Håkon Wium Lie 於 1996 年首次引入,目的是將內容結構與表現形式分離,以便更容易地為網頁設定樣式。

在本文中,我列出了根據多位候選人的面試經驗整理出的 CSS 常問問題。這些問題分為三個部分:初學者級別、中級級別和高階級別。根據我的經驗,面試官在面試時很少會提前計劃好要問什麼問題,問題通常從該主題的基本概念開始,然後根據你的回答繼續提問。如果你回答得很好,他們可能會問一些更高階的問題來測試你知識的深度。

本文僅關注面試相關主題,因此,要快速複習 CSS 的所有主題,請檢視 CSS 快速指南,要學習完整教程,請訪問 CSS 教程。

CSS 面試問題及解答列表

初學者 CSS 基礎問題及解答

本節涵蓋了 20 個 CSS 基礎面試問題及其答案。如果你剛接觸 CSS,請檢視本節。

1. 什麼是 CSS?

CSS 代表層疊樣式表,是一種用於為使用 HTML 編寫的網頁設定樣式和格式化佈局的語言。使用 CSS,我們可以透過更改文字顏色、字型樣式、段落之間的間距、列的大小和佈局方式、使用的背景圖片或顏色等方式來為網頁設定樣式。

2. 使用 CSS 的優點是什麼?

以下是使用 CSS 的優點。

  • 頁面載入速度更快:如果使用 CSS,則無需每次都編寫 HTML 標籤屬性。只需編寫一個標籤的 CSS 規則並將其應用於該標籤的所有出現。由於程式碼行數減少,我們的網頁載入速度會更快。
  • 易於維護:要進行全域性更改,只需更改根樣式,所有網頁中的所有元素都會自動更新。
  • 比 HTML 提供更優秀的樣式:CSS 比 HTML 具有更廣泛的屬性,因此您可以為 HTML 頁面獲得更好的外觀。
  • 多裝置相容性:對於相同的 HTML 文件,可以為不同的螢幕寬度呈現不同版本的網站
  • 全球 Web 標準:現在大多數 HTML 屬性都被棄用,建議使用 CSS。

3. CSS 的缺點是什麼?

以下是使用 CSS 的缺點。

  • 瀏覽器相容性:CSS 有不同的版本,例如 CSS、CSS 2、CSS 3,這些版本通常非常混亂。並且這些版本在不同的瀏覽器上的工作方式不同。並非所有瀏覽器都以相同的方式支援每個 CSS 屬性。
  • 大型專案複雜性:對於大型專案,管理 CSS 可能變得困難。如果組織不當,可能會導致冗餘或衝突的樣式。
  • 沒有內建安全性:CSS 不提供安全功能。如果存在漏洞,駭客可能會檢視您的 CSS 程式碼並利用這些漏洞。
  • 全域性作用域:預設情況下,CSS 規則全域性應用,這可能導致意外的樣式效果。我們需要很好地組織程式碼以避免這種情況。

4. CSS 和 CSS3 有什麼區別?

CSS3 是 CSS 的最新版本。CSS3 具有高階功能和特性。以下是 CSS 和 CSS3 特性之間的區別。

特性 CSS CSS3
選擇器 CSS 僅具有基本選擇器,例如元素、類和 ID 選擇器。 CSS3 引入了高階選擇器,如 nth-child 和屬性選擇器,以實現更精確的目標定位。
媒體查詢 CSS 中不支援媒體查詢。 CSS3 支援媒體查詢,以便根據裝置屬性(如寬度和方向)進行響應式設計。
動畫 CSS 沒有直接的動畫屬性(需要 JavaScript 應用動畫) CSS3 包括 transition 和 animation 等屬性,無需 JavaScript 即可建立動畫。
漸變 CSS 中不支援直接漸變。 CSS3 使用 `linear-gradient` 和 `radial-gradient` 屬性支援漸變。

5. CSS 樣式的語法是什麼?

CSS 的語法由選擇器和宣告組成,用於將樣式應用於 HTML 元素。

selector {
    property: value;
}
  • 選擇器指定要設定樣式的 HTML 元素/元素。
  • 宣告塊包含一個或多個用花括號 {} 括起來的宣告。
  • 每個宣告都包含一個 屬性 和一個值,用冒號 : 分隔。宣告用分號 ; 分隔。

CSS 中有幾種型別的選擇器,常用的選擇器包括類、ID 和標籤。要了解選擇器的完整列表,請訪問我們關於 CSS 選擇器 的教程。

6. 如何將 CSS 新增到 HTML 頁面?

有三種方法可以將 CSS 樣式新增到 HTML 網頁中,

  • 內部 CSS:在這種情況下,CSS 程式碼直接放置在 HTML 檔案中。
  • 外部 CSS:為 CSS 建立一個單獨的檔案並將其匯入 HTML 檔案。
  • 內聯 CSS:可以使用 "style" 屬性為每個標籤單獨提供樣式。

要檢視每種方法的示例,請檢視文章 CSS - 如何新增。

7. 哪種型別的 CSS 具有最高優先順序?

在 CSS 中,特異性決定樣式的優先順序。內聯 CSS 具有最高優先順序,其次是內部 CSS,然後是外部 CSS。要了解更多資訊,請參考 CSS 特異性

8. 什麼是 CSS 選擇器?

CSS 選擇器用於選擇我們想要在網頁上設定樣式的 HTML 元素。它們可以定位特定的元素或元素組,以應用顏色、字型、邊距等樣式。以下是 CSS 中的選擇器型別。

9. 什麼是通用選擇器?

通用選擇器用星號 (*) 表示,是一種特殊的選擇器,它匹配 HTML 文件中的所有元素。通常用於為文件中的所有元素新增相同長度的邊距和內邊距。

* { 
   color: #000000; 
}

此規則將網頁中所有文字的顏色設定為黑色。

10. 什麼是類選擇器?

類選擇器定位具有特定 class 屬性 值的元素以設定其樣式。CSS 中的類用 "."(句點)符號表示。

.black {
   color: #000000; 
}

此規則將網頁中所有具有類“.black”的元素內部的文字顏色設定為黑色。

11. 什麼是 ID 選擇器?

ID 選擇器透過唯一的id 屬性來定位特定元素,以便單獨對其進行樣式設定。在 CSS 中,ID 由"#"(雜湊)符號表示。

#main-heading {
   color: #333333; 
}

此規則將 id 為“main-heading”的元素的文字顏色設定為深灰色。

12. 什麼是元素選擇器?

元素選擇器將樣式應用於網頁中特定 HTML 元素的所有例項。它直接使用標籤名稱,無需任何符號。

p {
   font-size: 16px; 
}

此規則將所有`<p>`(段落)元素的字型大小設定為 16px。

13. 什麼是屬性選擇器?

CSS 中的屬性選擇器根據特定屬性的存在或值來定位元素。它由屬性名稱周圍的方括號表示。

a[target="_blank"] {
   color: blue;
   text-decoration: underline;
}

此規則將藍色和下劃線樣式應用於所有具有屬性`target="_blank"`的`<a>`元素,表示在新標籤頁中開啟的連結。

14. 如何在 CSS 中添加註釋?

在 CSS 中,可以使用`/* */`添加註釋。`/*`和`*/`之間的任何內容都被視為註釋,瀏覽器不會呈現它們。以下是 CSS 中添加註釋的語法。

/* This is a comment */
p {
    color: red; /* Set text color to red */
}

CSS 註釋旨在供開發人員使用,瀏覽器在渲染網頁時會忽略它們。它們在文件、除錯等方面很有用。

15. 如何在 CSS 中設定顏色?

在 CSS 中,`color`屬性用於設定元素的文字顏色。您可以使用多種格式指定顏色,例如名稱、HEX、RGB、RGBA、HSL 和 HSLA 值。

/* Examples of setting color */
p {
    color: blue;           /* Named color */
    color: #ff0000;        /* HEX color */
    color: rgb(255, 0, 0); /* RGB color */
    color: rgba(255, 0, 0, 0.5); /* RGBA color with 50% opacity */
    color: hsl(0, 100%, 50%);    /* HSL color */
    color: hsla(0, 100%, 50%, 0.5); /* HSLA color with 50% opacity */
}
  • 命名顏色:使用標準顏色名稱(如`red`、`blue`等)設定顏色。
  • HEX 顏色:使用 HEX 程式碼設定顏色,例如`#ff0000`。
  • RGB 顏色:使用 RGB 值設定顏色,例如`rgb(255, 0, 0)`。
  • RGBA 顏色:類似於 RGB,但包含一個用於不透明度的 alpha 引數,例如`rgba(255, 0, 0, 0.5)`。
  • HSL 顏色:使用 HSL(色相、飽和度、亮度)設定顏色,例如`hsl(0, 100%, 50%)`。
  • HSLA 顏色:類似於 HSL,但包含一個 alpha 引數,例如`hsla(0, 100%, 50%, 0.5)`。

15. 什麼是 CSS 背景屬性?

CSS 中的背景屬性用於控制 HTML 元素的背景圖形。我們可以為所有元素的 HTML 結構設定純色、影像、漸變。

16. CSS 邊框屬性有哪些?

CSS 中的邊框屬性用於控制 HTML 元素周圍邊框的外觀。使用這些屬性,我們可以設定邊框的顏色、樣式、寬度,甚至應用圓角。

  • border-width: 指定邊框的寬度,可以使用畫素、em 等單位,或`thin`、`medium`、`thick`等關鍵字。
  • border-style: 定義邊框的樣式,例如`solid`、`dashed`、`dotted`或`none`。
  • border-color: 設定邊框的顏色。可以使用顏色名稱、HEX 程式碼、RGB 或 HSL 值指定。
  • border-radius: 指定邊框角的圓角。
/* Example of border properties */
.box {
    border-width: 2px;
    border-style: solid;
    border-color: #3498db;
    border-radius: 10px;
}

17. 什麼是 CSS 過渡?

CSS 過渡用於在指定的時間段內平滑地更改 CSS 屬性。請檢視下面的示例。

無過渡
有過渡

以下程式碼模擬了當使用者將滑鼠懸停在按鈕上時,按鈕的背景顏色從淺藍色平滑過渡到深天藍色的效果。

.button {
    background-color: lightblue;
    transition: background-color 0.3s ease; /* Smooth color change on hover */
}

.button:hover {
    background-color: deepskyblue;
}

18. 如何在 CSS 中隱藏元素

我們可以透過設定`display`或`visibility`屬性來隱藏 CSS 中的元素。

  • 使用display當您將元素的 display 屬性設定為`none`時,它將從文件流中移除,它佔用的空間也將被移除。
  • 使用visibility將 visibility 屬性設定為`hidden`使元素不可見,但它仍然在佈局中佔用空間。
/* The element will not be visible and won't take up space */
.hidden {
    display: none; 
}

/* The element will not be visible but will still take up space */
.invisible {
    visibility: hidden; 
}

19. 解釋一下 margin 和 padding 的區別

margin 和 padding 都用於在元素周圍建立空間,但目的不同。Margin 是元素外部的空間,在元素和其他元素之間建立距離,而 padding 是元素內部的空間,即內容和元素邊框之間的空間。下圖顯示了盒模型結構中元素的 padding 和 margin。

Box model - Margin and padding differences

透過示例瞭解更多資訊,CSS 外邊距CSS 內邊距。

20. 解釋 CSS 盒模型

CSS 盒模型,如上圖所示,是一個佈局概念,描述了元素如何在網頁上顯示。此模型將每個元素視為一個矩形框,由內容、填充、邊框和邊距區域組成。我們有兩種型別的盒模型。

  • 標準盒模型:在此模型中,元素的內容區域僅由元素的高度和寬度定義。填充、邊框和邊距新增到內容區域之外。以下是標準盒模型的程式碼。
  • .box {
        width: 300px;
        height: 100px;
        padding: 20px;
        box-sizing: content-box; /* This is the default value */
    }
    
  • 替代盒模型:在此模型中,元素的內容區域包括元素的高度、寬度、填充、邊距和邊框。
  • .box{
        width: 300px;
        height: 150px;
        padding: 20px;
        box-sizing: border-box; /* Margin & padding included in content area */
    }
    

中級 CSS 問題及解答

本節將涵蓋 CSS 中 15 箇中級問題,涵蓋高階選擇器、佈局系統、動畫、calc() 函式、媒體查詢、內聯塊顯示、特異性以及響應式單位等關鍵主題。

21. 什麼是偽類和偽元素選擇器?

CSS 中的偽類用於根據元素的狀態或其在文件樹中的位置來選擇和設定元素的樣式,無需新增額外的類或 JavaScript。例如,當滑鼠移過或點選按鈕時為其設定樣式。

/* Example of Pseudo-class, Styling a link when mouse hovered*/
a:hover {
    color: red;
}

CSS 中的偽元素用於設定元素的特定部分的樣式,這些部分不是 DOM(文件物件模型)的一部分,並且不存在於 HTML 標記中。例如,段落的第一字母、輸入元素內的佔位符文字或文件中選定的部分。

/* Example of pseudo-element, Styling first letter of a paragraph */
p::first-letter { 
    text-transform: uppercase;
    font-size: 2em;
    color: darkred;
    font-style: italic;
}

22. 什麼是後代選擇器和子選擇器?

CSS 中的後代選擇器用於選擇巢狀在另一個元素內的元素,無論巢狀深度如何。它們由父選擇器和子選擇器之間的空格表示。例如,如果要設定所有在 div 內部的段落的樣式,則可以編寫

/* Example of Descendant Selector */
div p {
    color: blue; /* Affects all paragraphs inside any div */
}

子選擇器僅選擇直接巢狀在父元素內的元素,並且不考慮更深的巢狀級別。這由>符號表示。例如,要僅設定特定 div 內部的段落的樣式,則可以編寫

/* Example of Child Selector */
div > p {
    color: green; /* Affects only the direct child paragraphs of a div */
}

23. 什麼是相鄰兄弟選擇器和通用兄弟選擇器?

CSS 中的相鄰兄弟選擇器用於選擇緊挨著特定元素的元素,它們共享相同的父元素。相鄰兄弟選擇器由加號(+)表示。例如,如果要選擇緊隨 h2 元素之後的第一個 p 元素,則可以編寫

/* Example of Adjacent Sibling Selector */
h2 + p {
    color: red; /* Affects only the first paragraph immediately after an h2 */
}

通用兄弟選擇器選擇所有共享相同父元素並且位於特定元素之後的元素,不一定緊挨著它。通用兄弟選擇器由波浪號(~)表示。例如,如果要設定所有 h2 元素的兄弟元素 p 元素的樣式,則可以編寫

/* Example of General Sibling Selector */
h2 ~ p {
    color: purple; /* Affects all paragraphs that are siblings of h2 */
}

24. 什麼是 flexbox 佈局系統?如何設定 flex 佈局?

Flexbox是 CSS 中的一維佈局系統,用於水平或垂直排列容器內的專案。此係統使用多個屬性來控制專案的大小和對齊,從而確保響應式設計。該圖顯示了容器中的 flexbox 佈局。

Flexbox Example

設計 flexbox 系統非常簡單。我們只需要將容器的display屬性設定為 flex。然後,我們可以使用 flex 相關的屬性來控制容器內專案的對齊方式。以下程式碼顯示了 flex 佈局系統的示例。

.container {
    display: flex;
    justify-content: space-between; /* Ensures Evenly spaced items */
    align-items: center; /* Centering items Vertically */
}
.item {
    background-color: lightcoral;
    padding: 20px;
    border: 3px solid #ccc;
}

25. 解釋 CSS 網格佈局以及如何設定它?

CSS 網格佈局是一個用於開發響應式網頁的二維佈局系統。網格佈局非常適合建立網頁的整體結構,而 flexbox 主要用於對齊容器內的專案。下圖顯示了具有 12 列結構的網格佈局。

CSS Grid 12 Column

要使用網格佈局,請將容器的display屬性設定為`grid`。然後,我們可以使用 grid-template-rows 和 grid-template-columns 等屬性定義行和列的數量和大小。以下示例程式碼顯示了一個基本的網格佈局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns */
    grid-template-rows: auto; /* Rows adjust based on content height */
    gap: 10px; /* Space between grid items */
}
.item {
    background-color: lightblue;
    padding: 20px;
    border: 2px solid #ddd;
}

26. 如何在 CSS 中建立動畫?

我們可以使用@keyframes 規則在 CSS 中設定動畫。`@keyframes`規則透過指定動畫元素在動畫的不同階段的外觀來定義動畫。請考慮以下定義關鍵幀規則的程式碼。

@keyframes colorChange {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

此關鍵幀規則是為名為 colorChange 的動畫定義的。

  • 在動畫總持續時間的 0%(即 0 秒)時,背景顏色將為紅色。
  • 在總時間的 50%(即 2.5 秒)時,背景顏色更改為綠色
  • 在總持續時間的 100%(即 5 秒)時,顏色更改為藍色。

現在,關鍵幀規則已定義。我們可以將其應用於網頁中的任何元素。以下程式碼將動畫應用於類“.box”。

.box{
    animation: colorChange 5s infinite;
}

此程式碼將為具有類`.box`的元素定義動畫,動畫名稱為`colorChange`,執行 5 秒,並且無限次重複。

27. 如何在 CSS 中使用 calc() 函式?

CSS 中的`calc()`函式用於在 CSS 屬性中直接執行計算。此函式可以對值進行加、減、乘或除運算,使其在需要元素具有靈活尺寸的響應式設計中特別有用。

/* Example using calc() to set width */
div {
   width: calc(100% - 20px); /*Sets width as total width minus 20px*/
}

使用`calc()`,您可以在單個計算中混合不同的單位(如`px`、`%`和`em`),這對於需要適應各種螢幕尺寸的佈局非常有用。

28. 解釋如何在 CSS 中使用 nth-child() 選擇器

:nth-child(n) 是一個偽類,它將樣式應用於元素的任何指定的直接子元素。

/* Syntax */
tag:nth-child(number / expression / odd / even) {
    property: value;
} 

偽類 nth-child 可以將數字、數學表示式或奇數、偶數等值作為引數。

  • 數字:我們可以為此函式指定任何數字,表示子元素的順序,例如 nth-child(4) 將選擇父元素的第 4 個子元素。
  • 奇數/偶數:我們還可以使用此函式選擇子元素的所有奇數/偶數出現。
  • 表示式:我們可以為此函式提供任何有意義的數學表示式,以變數'n'表示。例如,nth-child(3n) 將選擇所有在 3 的倍數處出現的子元素。
/* Examples */
/* Apply Style to 2nd child of div */
div:nth-child(2){
   background-color:red;
}

/* Apply Style to all odd children of li */
li:nth-child(odd) {
   background-color: lightgray;
}

/* Apply Style to 2n+1 th children, where n is 1, 2 ,3..., */
li:nth-child(2n+1) {
   background-color: lightblue;
}

29. 如何將元素居中於容器內?

將元素居中於容器內可以透過多種方式完成,具體取決於佈局和所需的居中型別。以下是一些常見的方法

  • 使用 Flexbox:在容器上應用`display: flex;`和`justify-content: center;`以及`align-items: center;`以水平和垂直居中元素。
.container {
    display: flex;
    justify-content: center; /* Horizontal Centering */
    align-items: center; /* Vertical Centering */
    height: 200px;
}

透過為容器設定上述程式碼,容器內的元素將居中。但是,如果容器中有多個元素,則可以使用`justify-content: space-around`在所有元素周圍提供均勻的間距。

  • 使用 Margin Auto(水平居中):對於塊級元素,您可以使用`margin: auto;`將元素水平居中。
/* Horizontal centering with margin auto */
.element {
    width: 100px;
    height: 50px;
    background-color: lightgreen;
    margin: auto;
}

30. 什麼是 CSS 媒體查詢?它是如何工作的?

CSS 中的媒體查詢用於根據螢幕尺寸、解析度和使用者裝置的其他特徵應用不同的 CSS 樣式。媒體查詢使用@media規則,在滿足特定條件時包含額外的 CSS 屬性塊。媒體查詢還可以用於單獨設定頁面的可列印版本的樣式。

@media not|only mediatype and (media feature) and (media feature) {
    CSS-Code;
}

這裡,媒體型別可以是螢幕、列印、語音等,媒體特徵可以是寬度、高度、縱橫比、方向等特性。

/* Example */

/* Style for screen size less than 500px */
@media screen and (max-width: 500px) {
    .container {
        flex-direction: column; /* Column layout on small screen */
    }
}

/* Styles for landscape orientation screen */
@media (orientation: landscape) {
    body {
        color: blue;
    }
}

31. 如何為列印設定網頁樣式?

要明確為列印設定頁面樣式,我們有兩種方法

  • 使用外部樣式表:我們可以為列印需求專門使用外部樣式表。為此,我們需要為連結標籤的media屬性設定為“print”。將以下標籤新增到 HTML 文件的頭部部分。
<link href="/path/to/print.css" media="print" rel="stylesheet" />

print.css 將如下所示

body{
    background-color: white;
    color: black;
}
.navbar{
    display: none;
}
  • 使用媒體查詢和 @page:CSS 媒體查詢可用於在內部樣式表本身中設定可列印版本的樣式。@page規則用於控制列印內容的大小、方向和邊距等方面。
@media print {
    body{
        background-color: white;
        color: black;
    }
    .navbar{
        display: none;
    }
}  
@page {
    size: A4 portrait; /* A4 size, portrait orientation */
    margin: 2cm; /* 2cm margins on all sides */
}

32. 什麼是 CSS 特異性?如何覆蓋特異性?

CSS 中選擇器的特異性順序是確定哪個選擇器對元素具有最高優先順序,當多個選擇器指定相同的屬性時。

specificity-order

例如,如果使用類選擇器和 ID 選擇器在 HTML 元素上指定了 CSS 屬性,則將在該元素上應用特異性值最高的選擇器(在本例中為 Id 選擇器)中宣告的屬性。以下是 CSS 中特異性的一些規則。

  • 特異性值最高的選擇器將生效。
  • 對於特異性值相等的情況,最新的規則優先。
  • 內部 CSS 樣式始終優先於外部樣式表

但是,如果任何屬性標記為!important,則特異性順序變得無關緊要。這意味著,如果任何選擇器中的任何屬性標記為 important,則無論使用哪個選擇器,該屬性都具有最高優先順序。以下程式碼顯示瞭如何覆蓋特異性。

#unique {
    color: darkgreen; /* This is ignored */
}

.special {
    color: blue !important; /* This will take effect */
}

<p id="unique" class="special"> This is paragraph </p>

檢視有關!important 規則的章節以瞭解更多資訊。

33. 解釋內聯、塊和內聯塊元素之間的區別。

內聯、塊和內聯塊是 CSS display屬性的值。下表顯示了“display: inline”、“display: block”和“display: inline-block”屬性之間的區別。

內聯 內聯塊
元素顯示在同一行。 元素顯示在新的一行。 元素顯示在同一行。
它不佔用容器的全部寬度。 它佔用容器的全部寬度。 它不佔用容器的全部寬度。
預設情況下它沒有邊距或填充。 預設情況下它有邊距和填充。 預設情況下它有邊距和填充。

下面的互動部分顯示了這些值之間的視覺差異。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesti bulum conseq. uat scel eris que elit sit amet consequat. Nullam cursus fermentum velit sed laoreet.

34. CSS 中邊框和輪廓有什麼區別?

在 CSS 中,輪廓用於在元素邊框的外部建立線條,而不會影響其大小或佈局。但是,邊框用於在元素之間建立可見的分隔。這意味著邊框將在佈局中佔用空間,但輪廓不會在佈局中佔用空間。下圖顯示了元素的輪廓和邊框。

CSS Outlines and border
  • 輪廓不佔用空間,這意味著如果邊距不足,輪廓可能會與相鄰元素重疊。另一方面,邊框永遠不會與相鄰元素重疊。
  • 輪廓在所有側面的外觀始終相同。但邊框可以在每一側有所不同。
  • 輪廓不必是矩形,因為它們遵循其應用到的元素的形狀。
  • 輪廓通常用於在元素獲得焦點(透過按 Tab 鍵或單擊)時突出顯示元素。而邊框用於在元素之間進行視覺分隔。

訪問CSS 輪廓CSS 邊框,以檢視示例並瞭解更多資訊。

35. 如何在 CSS 中設定已訪問連結的樣式?

要在 CSS 中設定已訪問連結的樣式,我們可以使用:visited 偽類,它以使用者已點選的連結為目標。這是一個示例。

 
a:visited {
  color: purple;     /* Change the text color */
  font-weight: bold; /* Make the link bold */
}
  • 出於安全原因,已訪問連結的樣式選項有限。這意味著我們不能將顯示、位置等揭示佈局更改的屬性應用於已訪問連結。
  • 通常允許的屬性包括顏色、背景顏色、文字裝飾和輪廓。

36. 什麼是響應式單位?為什麼要使用它們?

響應式單位是在 CSS 中使用的一組特殊單位,用於描述可以根據視口寬度或高度由瀏覽器縮放的測量值。最常見的響應式單位是

  • vw(視口寬度):此單位基於視口寬度的 1%。例如,10vw 等於視口總寬度的 10%。
  • vh(視口高度):此單位基於視口高度的 1%。例如,50vh 將是視口高度的一半。
  • vmin:此單位採用視口寬度和高度之間的較小值。當您希望大小適應縱向和橫向方向時,它很有用。
  • vmax:此單位採用視口寬度和高度之間的較大值,對於需要在較大視口中最大化空間的設計很有用。

高階 CSS 面試問題及解答

本節將涵蓋 CSS 中的 10 個高階問題,其中包括剪輯路徑、匯入規則、自定義屬性、CSS 級聯規則、計數器、Houdini API、容器查詢和關鍵 CSS 等主題。

37. 解釋 clip-path 屬性及其用例

CSS 中的clip-path屬性用於定義元素的可見區域。這可以用於掩蓋元素形狀的某些部分以建立視覺效果。以下是 clip-path 屬性的語法。

clip-path: shape-function | URL | none;
  • 形狀函式:定義基本形狀,例如 circle()、ellipse()、polygon() 或 inset()
  • URL:連結到 SVG <clipPath> 元素以進行更復雜的剪輯。
  • 無:刪除所有剪輯,並使元素完全可見。

我們可以將 clip-path 應用於影像以賦予它們自定義形狀,例如圓形、三角形或多邊形。這樣,我們就可以將個人資料圖片顯示為圓形,而無需使用實際的圓形影像。

/* Clips an element to circular path */
clip-path: circle(50%);

/*  Clips the element into an elliptical shape */
clip-path: ellipse(50% 40%);

/* Clips the element into a custom polygonal shape */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* Clips the element by an inset rectangle */
clip-path: inset(10% 20%);

38. 什麼是 CSS 中的 @import 規則,它是如何使用的?

CSS 中的 @import 規則用於將外部 CSS 檔案匯入樣式表。這有助於我們將 CSS 程式碼分離到多個檔案中,然後將它們組合到單個樣式表中。以下是 @import 規則的語法。

/* Syntax */
@import url("styles.css");
  • 為了避免潛在的渲染問題,請在樣式表的開頭使用 @import。
  • 每個 @import 規則都會建立一個額外的 HTTP 請求,這可能會減慢頁面載入時間。因此,HTML 中的內聯 <link> 元素通常更受青睞,以獲得更好的效能。
  • 在 SASS 等預處理器中不會出現效能問題,因為檔案在交付之前會合併成一個。

假設您有一個主樣式表 main.css,並且想要匯入一個重置檔案和一個主題檔案。您可以像這樣組織它

@import url("reset.css");
@import url("theme.css");

/* Additional styles */
body {
    font-family: Arial, sans-serif;
}

39. 什麼是 CSS 中的自定義屬性?什麼是 :root?

自定義屬性是 CSS 中的變數,用於儲存和在樣式表中重用值。這與其他程式語言中的變數相同。:root偽類用於在 CSS 中宣告自定義屬性。我們也可以使用任何其他選擇器來宣告變數,但在 root: 選擇器中宣告變數將提供對變數的全域性訪問許可權。以下程式碼顯示瞭如何在 CSS 中宣告和使用自定義屬性。

/* Declare custom properties */
:root {
    --primary-color: #3498db;
    --font-size-large: 1.5rem;
}

/* Use custom properties */
body{
    background-color: var(--primary-color);
    font-size: var(--font-size-large)
}

40. 解釋 CSS 級聯以及樣式是如何應用的。

CSS 級聯是瀏覽器在多個規則可能應用於同一元素時確定應用哪個樣式的過程。CSS 遵循特定的順序來解決衝突並決定應用哪個樣式。此順序包括

  • !important 標籤: 使用 `!important` 標記的樣式具有最高優先順序,並覆蓋其他樣式。
  • 特異性: 瀏覽器會檢查每個選擇器的特異性。ID 選擇器(`#id`)比類選擇器(`.class`)更具特異性,類選擇器又比標籤選擇器(`p`、`div`)更具特異性。
  • 源順序: 如果兩個規則具有相同的權重和特異性,則 CSS 中最後定義的規則將被應用。

CSS 中的每個選擇器 都有一個特異性級別,級聯順序由此特異性順序決定。以下是 CSS 選擇器的特異性順序。

  • 內聯樣式: 使用 style 屬性為元素定義的樣式具有最高優先順序。
  • ID 選擇器: 在選擇器中,ID 選擇器具有最高優先順序。
  • 類、屬性和偽類: 這些是下一個優先順序。類選擇器以 . 為字首,屬性選擇器使用方括號 [],偽類以
  • 元素和偽元素: 這些具有最低的特異性。元素選擇器直接使用元素名稱,偽元素以 :: 為字首。

使用 CSS 級聯,樣式根據權重、特異性和源順序的組合應用,允許開發人員控制元素在各種條件下的樣式。

41. 什麼是 CSS 計數器,如何實現它們?

CSS 計數器 是一種由 CSS 維護的變數,可以在文件的不同位置遞增、遞減或重置。例如,我們可以使用計數器自動為段落、標題和列表分配編號。請按照以下步驟在網頁中為列表項實現自動計數器

  • 初始化計數器: 要開始使用計數器,首先需要使用 counter-reset 屬性對其進行初始化。
body {
    counter-reset: section;
} 

此程式碼初始化一個名為 section 的計數器,其初始值為 0。每次 body 元素出現時,計數器都會重置為 0。

li::before {
    counter-increment: section;
}

此程式碼每次 <li> 元素出現時都會遞增 section 計數器,並在文字前顯示計數。

  • 顯示計數器: 要顯示計數器的值,請使用 counters() 函式。
li::before {
    content: counters(section, ".") " ";
}

此程式碼在 li 元素內容之前顯示 section 計數器的值,後跟一個句點和一個空格。

42. 什麼是 CSS Houdini 及其 API?

CSS Houdini 是一組用於建立自定義樣式、佈局和動畫效果的低階 API。使用 Houdini,開發人員可以訪問瀏覽器的 CSS 引擎來定義新的屬性並實現自定義繪製函式。以下是 CSS Houdini 中的 API。

  • CSS 屬性和值 API: 這些 API 用於定義具有特定型別和預設值的自定義屬性。此外,這些對於建立可以響應應用程式中變數更改的自定義樣式非常有用。
  • 繪製 API (繪製工作執行緒): 用於建立可作為背景影像或邊框使用的自定義繪製函式。它可以在 CSS 中直接生成複雜的圖案、漸變或形狀,而無需外部影像。
  • 動畫工作執行緒: 用於建立對滾動、使用者互動或基於時間事件做出響應的自定義動畫。透過它我們可以建立複雜的動畫。
  • 佈局 API: 用於建立自定義佈局演算法,如砌體或網格佈局。
  • 型別化 OM: 它提供了一種方法來處理 CSS 值作為結構化資料而不是純字串。

43. 解釋 `CSS 繪製 API` 和 `CSS 動畫 API`。

CSS 繪製 API 和 CSS 動畫 API 是 CSS Houdini 套件的兩個關鍵元件。它們為開發人員提供了低階訪問許可權,以擴充套件和自定義 CSS 如何繪製和動畫化元素。

CSS 繪製 API(也稱為繪製工作執行緒)用於開發人員使用 JavaScript 以程式設計方式建立自定義圖形、圖案和影像,然後可以將其用作 CSS 背景、邊框或其他視覺效果。繪製 API 使用一個特殊的 JavaScript 檔案來定義如何繪製自定義圖形。工作執行緒註冊一個繪製函式,瀏覽器在需要渲染圖形時呼叫該函式。以下程式碼使用 CSS 和 JavaScript 定義了繪製 API。

<!--Example: Creating a Striped Background with the Paint API-->

<!--JavaScript Code-->
<script>
    // Register a new paint worklet
    registerPaint('stripes', class {
    paint(ctx, size) {
        // Draw stripes pattern
        ctx.fillStyle = '#f06';
        for (let i = 0; i < size.width; i += 20) {
        ctx.fillRect(i, 0, 10, size.height);
        }
    }
    });
</script>

<!--CSS Implementation-->
<style>
    .element {
        background-image: paint(stripes);
    }
</style>

CSS 動畫 API 用於開發人員建立複雜且高度可定製的動畫,這些動畫可以響應使用者互動、滾動事件或任何其他動態條件。此方法允許在執行時精確控制動畫,從而可以建立即時響應輸入的動畫。動畫 API 使用動畫工作執行緒,開發人員在其中定義動畫邏輯。

<!--Example: Creating a Scroll-Based Animation -->

<!--JavaScript Code-->
<script>
// Register a new animator
registerAnimator('scrollAnimator', class {
  animate(currentTime, effect) {
    effect.localTime = currentTime * 100; // Speed up the animation
  }
});
</script>


<!--CSS Implementation-->
<style>
    .element {
        animation-timeline: paint(scrollAnimator);
        animation-name: scrollAnimation;
    }
  
    @keyframes scrollAnimation {
        from { transform: translateY(0); }
        to { transform: translateY(100px); }
    }  
</style>

44. 解釋容器查詢以及它們與媒體查詢有何不同。

容器查詢和媒體查詢是 CSS 中用於根據某些條件應用樣式的兩種技術。CSS 中的容器查詢用於根據包含元素的大小應用樣式。而媒體查詢用於根據視口的大小應用樣式。

  • 可以使用 @container 規則定義容器查詢。
  • 我們需要設定屬性 `container-type: inline-size;` 以使元素成為觸發容器查詢的容器。
  • 就像媒體查詢一樣,容器查詢偵聽容器寬度、高度或其他特徵的變化。

以下是容器查詢的 CSS 程式碼。

/* Make a container */
.container {
  container-type: inline-size; /* Defines the container */
  width: 100%;
}

/* Apply styles based on container size */
@container (min-width: 500px) {
  .box {
    background-color: lightblue;
  }
}

@container (min-width: 800px) {
  .box {
    background-color: lightgreen;
  }
}

45. 什麼是關鍵 CSS 及其重要性。

關鍵 CSS 是一種用於最佳化網站載入效能的技術,它將渲染視口以上內容(無需滾動即可看到的頁面部分)所需的 CSS 與其餘 CSS 分離並優先處理。

以下是關鍵 CSS 的工作原理。

  • 識別關鍵 CSS: 確定哪些 CSS 規則對於設定視口以上內容的樣式是必要的。
  • 內聯關鍵 CSS: 將關鍵 CSS 直接插入 HTML 文件的 <head> 部分,以便它與頁面一起立即載入。
  • 延遲非關鍵 CSS: 透過連結到非同步載入的外部 CSS 檔案,在主要內容顯示後加載其餘 CSS(非關鍵 CSS)。

以下是在 HTML 文件中使用關鍵 CSS 的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Website</title>
    <style>
        /* Critical CSS inlined directly for faster rendering */
        body { 
            font-family: Arial, sans-serif; 
        }
        .header { 
            background-color: #333; 
            color: #fff; 
            padding: 10px; }
    </style>
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <div class="header">Welcome to My Website</div>
  <div class="main-content">This is the main content area.</div>
</body>
</html>
廣告