30道CSS 面試知識點總結

前端小智發表於2022-04-08
CSS面試
譯者：前端小智
來源：codersera.

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

CSS是層疊樣式表（ Cascading Style Sheets ）的縮寫，是一種樣式表語言，用於描述以 HTML 之類的標記語言編寫的文件的佈局。 它是用於設計Web頁面的三劍客之一，另外兩位浩客是HTML和Javascript。

CSS 的設計目的是使樣式和內容分離，包括佈局、顏色和字型。這種分離可以提高內容的可訪問性，在樣式特徵的規範中提供更多的靈活性和控制，通過在一個單獨的. .css 檔案中指定相關的 CSS，使多個 web 頁面能夠共享格式，並減少結構內容中的複雜性和重複。

它具有簡單的語法，並使用大量的英文關鍵字來指定各種樣式屬性的名稱。

既然我們已經討論了CSS的基礎知識，讓我們來觀察一下基於CSS的重要面試問題。

clipboard.png

問題1：什麼是 CSS？

CSS（層疊樣式表）是一種樣式語言，對於 HTML 元素來說足夠簡單。 它在網頁設計中非常流行，其應用在XHTML中也很常見。

問題2：為什麼要開發CSS？

CSS是在1997年開發的，作為一種web開發人員設計他們正在建立的web頁面佈局的方法。它的目的是讓開發者將網站程式碼的內容和結構從視覺設計中分離出來。

這種結構和設計的分離允許HTML執行比原來更多的功能。

問題3：CSS的主要版本有哪些？

CSS的不同版本：

  1. CSS1
  2. CSS2
  3. CSS2.1
  4. CSS3

問題4：CSS樣式的組成部分是什麼？

一個樣式規則由三部分組成：

  1. 選擇器–選擇器是 HTML 標記，用於選擇要設定樣式的內容。 它根據其ID，類和名稱選擇 HTML元素。
  2. 屬性–屬性是 HTML 標籤的一種屬性。 簡而言之，所有 HTML 屬性都轉換為 CSS 屬性。
  3. 值– CSS中的值定義CSS屬性的一組有效值。

問題 5：有多少種方法可以將 CSS 整合為 web 頁面

CSS 可以整合為三種方式

  1. 內聯：直接在HTML元素上使用
<p style=”colour:skyblue;”>hello world</p>
  1. 外部:在工作空間中建立單獨的CSS檔案，然後在建立的每個web頁面中連結它們
<head>

<link rel=”text/css”href=”your_CSS_file_location”/>

</head>
  • 內部: web 頁面的 head 元素在其中實現了內部 CSS。
head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

問題 6：誰在維護 CSS 規範？

全球資訊網協會維護 CSS規範。

問題 7：偽元素是什麼意思？

偽元素是新增到選擇器的關鍵字，它允許一種樣式，即所選元素的特定部分。CSS用於在HTML標記中應用樣式，它允許在不影響實際文件的情況下對文件進行額外標記。它可以用來：

  1. 為第一個字母、行或元素設定樣式。
  2. 插入內容

語法：

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

問題 8：CSS有什麼優勢？

CSS的優點是:

  1. 一致性 – CSS有助於構建一致的框架，設計人員可以使用該框架來構建其他站點。 因此，網頁設計師的效率也提高了。
  2. 易於使用 – CSS 是非常容易學習和簡化網站開發。所有程式碼都放在一個頁面上，這意味著對程式碼行進行改進或編輯不需要重複修改多個頁面.
  3. *網站速度 *– 通常，一個網站使用的程式碼最多可以達到 2 頁或更多。但是對於CSS，這不是問題。它只需要2-3行程式碼，因此，網站資料庫保持整潔，消除任何網站載入問題。
  4. 裝置相容性 – 由於人們使用不同型別的智慧裝置訪問網際網路，因此需要響應式web設計。CSS 在這裡的作用是使 web 頁面的響應性更好，這樣它們就可以在所有裝置中以相同的方式顯示。
  5. 多瀏覽器支援 – CSS享有多瀏覽器的支援，它與所有主要的網際網路瀏覽器相容。
  6. 重新定位 – CSS允許您定義頁面上 web 元素位置的變化。通過它的實現，開發人員可以將 HTML 元素放置在他們喜歡的位置，以便與頁面的美學吸引力或其他考慮因素保持一致。

問題9：CSS 漸變是什麼？

漸變是指我們在兩幅影像之間建立中間幀，以獲得第一幅影像的外觀，然後發展成第二幅影像的過程，它主要用於建立動畫。

問題10：什麼是 CSS 特異性？

CSS 特定性是一個分數或等級，它決定了元素必須使用哪種樣式宣告。 CSS 中有四類可以授權選擇器的特異性級別：

  1. 內聯樣式
  2. ID
  3. 類，屬性和偽類
  4. 元素和偽元素

問題12：CSS有什麼缺點

CSS的缺點有:

  1. 版本太多 – 與HTML或Javascript等其他引數相比，CSS有很多版本-CSS1，CSS2，CSS2.1，CSS3。 因此，CSS變得非常混亂，尤其是對於初學者。
  2. 缺乏安全性 - 由於CSS是基於開放文字的系統，因此它沒有內建的安全系統來防止其被覆蓋。 通過對其讀/寫操作的訪問，任何人都可以更改 CSS 檔案並更改連結。
  3. Fragmentation - 使用 CSS，可能無法在一個瀏覽器上使用另一瀏覽器。 因此，在網站上線之前，Web 開發人員必須通過在多個瀏覽器上執行程式來測試相容性。
  4. 複雜性–使用 Microsoft FrontPage 等第三方軟體會使CSS變得複雜。

問題13：什麼是 RWD (Responsive Web Design)?

RWD（響應式Web設計）技術用於在每種螢幕尺寸以及移動，平板電腦，桌上型電腦和膝上型電腦等裝置上完美顯示設計頁面，讓我們無需為每個裝置建立不同的頁面。

問題14：CSS 精靈有什麼好處?

CSS精靈的好處有：

  1. 通過將各種小影像組合成一個影像，減少了web頁面的載入時間。
  2. 減少HTTP請求，從而減少載入時間。

問題 15：什麼是 CSS 上下文選擇器？

上下文選擇器，嚴格來講，叫後代組合式選擇器，就是一組以空格分隔的標籤名。用於選擇作為指定祖先元素後代的標籤。只要有標籤在它的層次結構“上游”存在這麼一個祖先，那麼就會選中該標籤。無論從該標籤到作為祖先的上下文之間隔著多少層次都沒有關係。

大家都說簡歷沒專案寫，我就幫大家找了一個專案，還附贈【搭建教程】。

我和阿里雲合作伺服器，折扣價比較便宜：89/年，223/3年，比學生9.9每月還便宜，買了搭建個專案，熟悉技術棧比較香（老使用者用家人賬號買就好了，我用我媽的)推薦買三年的划算點，點選本條就可以檢視。

問題 16：什麼是漸進增強和平穩退化?

漸進增強的概念是指從最基本的可用性出發，在保證站點頁面在低階瀏覽器中 的可用性和可訪問性的基礎上，逐步增加功能及提高使用者體驗。本質上講，我們日常的一些開發習慣，例如首先使用標記語言編寫頁面，然後通過樣式表來控制頁面 樣式等，都屬於漸進增強的概念；其他更為明顯的行為包括使用HTML5、CSS3等新技術，針對高階瀏覽器為頁面提高使用者體驗的豐富程度。

平穩退化的概念是指首先使用最新的技術面向高階瀏覽器構建最強的功能及使用者體驗，然後針對低階瀏覽器的限制，逐步衰減那些無法被支援的功能及體驗；在我們日常的開 發中，一個典型的平穩退化的例子就是首先針對Chrome編寫頁面程式碼，然後修復IE中的異常或針對IE去除那些無法被實現的功能特色.

所以， 這兩個概念方法其實早已並存在我們的日常開發工作中了，只是“漸進增強”與“平穩退化”這樣的措辭是近些年才開始被普及。在我們眼下的HTML5與 CSS3實戰用，這兩個概念就尤其重要了，怎樣保證使用不斷變化的新技術來構建在主流瀏覽器下都具有基本可用性的站點，並針對高階瀏覽器進行體驗提升，這 些是我們在開發過程中需要明確的思路。

問題 17：我們如何在網頁上新增圖示？

我們可以使用諸如font-awesome或者阿里的 iconfont 之類的圖示庫將圖示新增到HTML網頁。 我們必須將給定圖示類的名稱新增到任何內聯HTML元素中。 （<i>或<span>）。 圖示庫中的圖示是可縮放的向量，可以使用CSS進行自定義。

問題 18：哪個屬性指定邊框的寬度？

border-width指定邊框的寬度。

問題 19：如何區分物理標籤和邏輯標籤?

物理標籤被稱為表示標記，而邏輯標籤對於外觀是無用的。物理標籤是較新的版本，而邏輯標籤是舊的並且專注於內容。

如題，我們的標籤元素寫上後，瀏覽器就會渲染出結果，但不僅僅是這麼簡單

//物理元素
<b>我想用b標籤加粗</b>
 
//邏輯元素
<strong>我想用strong標籤加粗</strong>
 
//兩段文字都加粗了，而且視覺效果完全一樣

確實，文字加粗了，兩者都達到了我們想要的目的，但是我們忽略了一個問題，既然b標籤可以加粗，那麼strong這個標籤同樣是加粗，存在的 意義又是什麼呢？既然W3C定義了兩個，它們之間的不同點是什麼呢？它們之間的相同點又是什麼呢？

物理元素

物理元素，又叫實體標籤，它所做的是一種物理行為，比如上面我把一段文字用b標籤加粗了，它所傳達的給瀏覽器，告訴瀏覽器 我要加粗這段文字，從單詞Bold中也可以看出來，英文中僅僅是加粗的意思，並沒有其他作用。總結來說就是一句話： 物理元素就是告訴瀏覽器該怎麼顯示出來。

邏輯元素

邏輯元素，從英文字面上Strong就可以看出它是強調的意思，所以我們用這個邏輯元素(如上strong)來向瀏覽器傳達 一個強調某段文字重要性的訊息，說明此文字較為重要，也有利於搜尋引擎收錄。

Web標準主張XHTML不涉及具體的表現形式，“強調”可以用加粗來強調，也可以用別的方式強調，也可以通過css來改變strong的具體表現 ，還有就是並不是有了strong邏輯標籤，就不用b標籤來表示字型加粗了，b標籤和strong標籤預設情況下強調的效果一致，strong完全可以定義成別的樣式，用來強調 效果，但是最好符合W3C標準，它更提倡內容與樣式分離，所以單純為了達到加粗而使用b標籤不建議這樣做， 從XHTML文件有意義性及使用者體驗角度來說，strong邏輯標籤更加合適，而SEO方面，則針對優化情況而定。

問題 20：如何在CSS中定義一個偽類?它們是用來幹什麼的

CSS偽類是用來新增一些選擇器的特殊效果。偽類的語法

selector:pseudo-class{property:value;}

問題 21：CSS和SCSS有什麼區別？

CSS 和 SCSS 之間的區別如下：

  1. CSS是一種用於設計web頁面的樣式語言，而SCSS用於為瀏覽器組合CSS樣式表。
  2. SCSS 提供了一些變數，可以使用這些變數來縮短程式碼，這是與 CSS 相比的一大優勢。

問題 22：嵌入式樣式表的優缺點是什麼？

嵌入式樣式表的優點:

  1. 可以在一個文件中建立多種標籤型別。
  2. 在複雜情況下，可以使用選擇器和分組方法來應用樣式。
  3. 無需額外下載。

嵌入式樣式表的缺點：

無法控制多個文件。

問題 23：列出使用的各種媒體型別。

不同的介質不區分大小寫，因此它們具有不同的屬性。 他們是：

  1. aural - 用於語音和音訊合成器
  2. print - 用於印表機
  3. projection - 用於方案展示，比如幻燈片
  4. handheld - 用於小的手持的裝置
  5. screen - 用於電腦顯示器

問題 24：font 的屬性有哪些？

  1. Font-style
  2. Font-variant
  3. Font-weight
  4. Font-size/line-weight
  5. Font-family

問題 25：“規則集”是什麼意思？

該指令告訴瀏覽器如何在HTML頁面上渲染特定元素。 它由一個選擇器和一個遵循規則集的宣告塊組成。 選擇器可以附加到其他選擇器，以通過規則集進行標識。

問題 26：什麼是 CSS 框架？

CSS 框架是一個庫，它允許使用CSS語言進行更輕鬆，更符合標準的Web設計。 這些框架中的大多數至少包含一個網格以及更多功能和其他基於Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

問題 27：簡單介紹使用圖片 base64 編碼的優點和缺點。

base64編碼是一種圖片處理格式，通過特定的演算法將圖片編碼成一長串字串，在頁面上顯示的時候，可以用該字串來代替圖片的
url屬性。
使用base64的優點是：
（1）減少一個圖片的HTTP請求
使用base64的缺點是：
（1）根據base64的編碼原理，編碼後的大小會比原檔案大小大1/3，如果把大圖片編碼到html/css中，不僅會造成檔案體
積的增加，影響檔案的載入速度，還會增加瀏覽器對html或css檔案解析渲染的時間。
（2）使用base64無法直接快取，要快取只能快取包含base64的檔案，比如HTML或者CSS，這相比域直接快取圖片的效果要
差很多。
（3）相容性的問題，ie8以前的瀏覽器不支援。
一般一些網站的小圖示可以使用base64圖片來引入。

問題 28: 對 BFC 規範（塊級格式化上下文：block formatting context）的理解？

BFC指的是塊級格式化上下文，一個元素形成了BFC之後，那麼它內部元素產生的佈局不會影響到外部元素，外部元素的佈局也
不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域，和其他區域互不影響。
一般來說根元素是一個BFC區域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline-block、flex這些
屬性時也會建立BFC。還有就是元素的overflow的值不為visible時都會建立BFC。

問題 29: IFC 是什麼？

IFC指的是行級格式化上下文，它有這樣的一些佈局規則：
（1）行級上下文內部的盒子會在水平方向，一個接一個地放置。
（2）當一行不夠的時候會自動切換到下一行。
（3）行級上下文的高度由內部最高的內聯盒子的高度決定。

問題 30: CSS 優化、提高效能的方法有哪些？

載入效能：
（1）css壓縮：將寫好的css進行打包壓縮，可以減少很多的體積。
（2）css單一樣式：當需要下邊距和左邊距的時候，很多時候選擇:margin:top 0 bottom 0;但margin-bottom:bot
tom;margin-left:left;執行的效率更高。
（3）減少使用@import,而建議使用link，因為後者在頁面載入時一起載入，前者是等待頁面載入完成之後再進行載入。
選擇器效能：
（1）關鍵選擇器（key selector）。選擇器的最後面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到
左進行匹配的。當使用後代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
（2）如果規則擁有ID選擇器作為其關鍵選擇器，則不要為規則增加標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹
配它們了）。
（3）避免使用通配規則，如*{}計算次數驚人！只對需要用到的元素進行選擇。
（4）儘量少的去對標籤進行選擇，而是用class。
（5）儘量少的去使用後代選擇器，降低選擇器的權重值。後代選擇器的開銷是最高的，儘量將選擇器的深度降到最低，最高不要超過
三層，更多的使用類來關聯每一個標籤元素。
（6）瞭解哪些屬性是可以通過繼承而來的，然後避免對這些屬性重複指定規則。
渲染效能：
（1）慎重使用高效能屬性：浮動、定位。
（2）儘量減少頁面重排、重繪。
（3）去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文件體積。
（4）屬性值為0時，不加單位。
（5）屬性值為浮動小數0.**，可以省略小數點之前的0。
（6）標準化各種瀏覽器字首：帶瀏覽器字首的在前。標準屬性在後。
（7）不使用@import字首，它會影響css的載入速度。
（8）選擇器優化巢狀，儘量避免層級過深。
（9）css雪碧圖，同一頁面相近部分的小圖示，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清
楚，再使用。
（10）正確使用display的屬性，由於display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析效能。
（11）不濫用web字型。對於中文網站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏
覽器在下載web fonts時會阻塞頁面渲染損傷效能。
可維護性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合並通過class在頁面中進行使用，提高css的可維護性。
（2）樣式與內容分離：將css程式碼定義到外部css中。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://codersera.com/blog/to...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章