29個CSS面試題總結（知識點解析）

本篇文章給大家分享29個CSS 面試知識點。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

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

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

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

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

問題1：什麼是 CSS？

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

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

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

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

【推薦教學：CSS影片教學】

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

CSS的不同版本：

• CSS1

• CSS2

• CSS2.1

• CSS3

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

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

• #選擇器–選擇器是HTML 標記，用於選擇要設定樣式的內容。它根據其ID，類別和名稱選擇 HTML元素。

• 屬性–屬性是 HTML 標籤的屬性。簡而言之，所有 HTML 屬性都會轉換為 CSS 屬性。

• 值– CSS中的值定義CSS屬性的一組有效值。

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

CSS 可以集成為三種方式

1、內聯：直接在HTML元素上使用

<p>hello world</p>

2、外部:在工作空間中建立單獨的CSS文件，然後在建立的每個web頁面中連結它們

<link>

3、內部: web 頁面的head 元素在其中實作了內部CSS。

     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>

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

萬維網協會維護 CSS規格。

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

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

• 為第一個字母、行或元素設定樣式。

• 插入內容

語法：

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

問題 8：CSS有什麼優點？

CSS的優點是:

• 一致性 – CSS有助於建立一致的框架，設計人員可以使用該框架來建立其他站點。因此，網頁設計師的效率也提高了。

• 容易使用 – CSS 是非常容易學習和簡化網站開發。所有程式碼都放在一個頁面上，這意味著對程式碼行進行改進或編輯不需要重複修改多個頁面.

• *網站速度 *–通常，一個網站使用的程式碼最多可以達到2 頁或更多。但是對於CSS，這不是問題。它只需要2-3行程式碼，因此，網站資料庫保持整潔，消除任何網站載入問題。

• 裝置相容性 – 由於人們使用不同類型的智慧型裝置存取互聯網，因此需要響應式web設計。 CSS 在這裡的作用是使 web 頁面的響應性更好，這樣它們就可以在所有裝置中以相同的方式顯示。

• 多重瀏覽器支援 – CSS享有多瀏覽器的支持，它與所有主要的網路瀏覽器相容。

• 重新定位 –  CSS可讓您定義頁面上 web 元素位置的變更。透過它的實現，開發人員可以將 HTML 元素放置在他們喜歡的位置，以便與頁面的美學吸引力或其他考慮因素保持一致。

問題9：CSS 漸層是什麼？

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

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

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

• 內嵌樣式

• ID

• 類，屬性與偽類

• 元素與偽元素

#問題11：CSS有什麼缺點

CSS的缺點有:

• 版本太多 – 與HTML或Javascript等其他參數相比，CSS有許多版本-CSS1 ，CSS2，CSS2.1，CSS3。因此，CSS變得非常混亂，尤其是對於初學者。

• 缺乏安全性 - 由於CSS是基於開放文字的系統，因此它沒有內建的安全系統來防止其被覆蓋。透過對其讀取/寫入操作的訪問，任何人都可以更改 CSS 文件並更改連結。

• Fragmentation - 使用 CSS，可能無法在一個瀏覽器上使用另一個瀏覽器。因此，在網站上線之前，Web 開發人員必須透過在多個瀏覽器上執行程式來測試相容性。

• 複雜性–使用 Microsoft FrontPage 等第三方軟體會使CSS變得複雜。

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

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

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

CSS精靈的好處有：

• 透過將各種小圖像組合成一個圖像，減少了web頁面的載入時間。

• 減少HTTP請求，進而減少載入時間。

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

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

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

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

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

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

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

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

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

border-width指定邊框的寬度。

问题 18：如何区分物理标签和逻辑标签?

物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。

如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单

//物理元素
<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方面，则针对优化情况而定。

问题19：如何在CSS中定义一个伪类?它们是用来干什么的

CSS伪类是用来添加一些选择器的特殊效果。伪类的语法

selector:pseudo-class{property:value;}

问题 20：CSS和SCSS有什么区别？

CSS 和 SCSS 之间的区别如下：

• CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。

• SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。

问题 21：嵌入式样式表的优缺点是什么？

嵌入式样式表的优点:

• 可以在一个文档中创建多种标签类型。

• 在复杂情况下，可以使用选择器和分组方法来应用样式。

• 无需额外下载。

嵌入式样式表的缺点：

无法控制多个文档。

问题 22：列出使用的各种媒体类型。

不同的介质不区分大小写，因此它们具有不同的属性。 他们是：

• aural - 用于语音和音频合成器

• print - 用于打印机

• projection - 用于方案展示，比如幻灯片

• handheld -     用于小的手持的设备

• screen -  用于电脑显示器

问题 23：font 的属性有哪些？

• Font-style

• Font-variant

• Font-weight

• Font-size/line-weight

• Font-family

问题 24：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器，以通过规则集进行标识。

问题 25：什么是 CSS 框架？

CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

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

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

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

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

問題 28: IFC 是什麼？

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

問題 29: 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。

原文網址：https://codersera.com/blog/top-css-interview-questions-and-answers/

更多程式相關知識，請訪問：編程視頻！ ！

以上是29個CSS面試題總結（知識點解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！