26 個 CSS 面試題目加強你的 CSS 基礎

時間 2020-12-02

標籤 css 前端 vue git github web 面試數據庫瀏覽器安全欄目 CSS 简体版

原文原文鏈接

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

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。**

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。css

github 地址：https://github.com/qq44924588...前端

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

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

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

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

問題1：什麼是 CSS？

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

問題2：爲何要開發CSS？

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

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

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

CSS的不一樣版本：安全

CSS1
CSS2
CSS2.1
CSS3

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

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

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

問題 5：有多少種方法能夠將 CSS 集成爲 web 頁面

CSS 能夠集成爲三種方式

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

<p style=」colour:skyblue;」>hello world</p>

外部:在工做空間中建立單獨的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標記中應用樣式，它容許在不影響實際文檔的狀況下對文檔進行額外標記。它能夠用來：

爲第一個字母、行或元素設置樣式。
插入內容

語法：

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
類，屬性和僞類
元素和僞元素

問題12：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請求，從而減小加載時間。

問題 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方面，則針對優化狀況而定。