26 個 CSS 面試的高頻考點助力金三銀四

時間  2020-04-12
標籤 css 面試 高頻 助力 欄目 CSS 简体版
原文   原文鏈接

譯者：前端小智 來源：codersera.css

點贊再看，養成習慣前端

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。git

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

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

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

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

問題1：什麼是 CSS？

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

問題2：爲何要開發CSS？

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

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

問題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 上下文選擇器？

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

問題 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等。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：codersera.com/blog/top-cs…

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

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