30道CSS 面試知識點總結

時間  2021-02-26
標籤 css html 前端 git github web 面試 算法 數據庫 瀏覽器 欄目 CSS 简体版
原文   原文鏈接
譯者：前端小智
來源：codersera.
點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

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

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

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

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

clipboard.png

問題1：什麼是 CSS？

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

問題2：爲何要開發CSS？

CSS是在1997年開發的，做爲一種web開發人員設計他們正在建立的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：什麼是漸進加強和平穩退化?

漸進加強的概念是指從最基本的可用性出發，在保證站點頁面在低級瀏覽器中 的可用性和可訪問性的基礎上，逐步增長功能及提升用戶體驗。本質上講，咱們平常的一些開發習慣，例如首先使用標記語言編寫頁面，而後經過樣式表來控制頁面 樣式等，都屬於漸進加強的概念；其餘更爲明顯的行爲包括使用HTML五、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 已經收錄，歡迎Star。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程