溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)29個CSS面試題的講解與分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
CSS是層疊樣式表（ Cascading Style Sheets ）的縮寫，是一種樣式表語言，用于描述以 HTML 之類的標記語言編寫的文檔的布局。 它是用于設(shè)計Web頁面的三劍客之一，另外兩位浩客是HTML和Javascript。
CSS 的設(shè)計目的是使樣式和內(nèi)容分離，包括布局、顏色和字體。這種分離可以提高內(nèi)容的可訪問性，在樣式特征的規(guī)范中提供更多的靈活性和控制，通過在一個單獨的. .css 文件中指定相關(guān)的 CSS，使多個 web 頁面能夠共享格式，并減少結(jié)構(gòu)內(nèi)容中的復(fù)雜性和重復(fù)。
它具有簡單的語法，并使用大量的英文關(guān)鍵字來指定各種樣式屬性的名稱。
既然我們已經(jīng)討論了CSS的基礎(chǔ)知識，讓我們來觀察一下基于CSS的重要面試問題。
CSS（層疊樣式表）是一種樣式語言，對于 HTML 元素來說足夠簡單。 它在網(wǎng)頁設(shè)計中非常流行，其應(yīng)用在XHTML中也很常見。
CSS是在1997年開發(fā)的，作為一種web開發(fā)人員設(shè)計他們正在創(chuàng)建的web頁面布局的方法。它的目的是讓開發(fā)者將網(wǎng)站代碼的內(nèi)容和結(jié)構(gòu)從視覺設(shè)計中分離出來。
這種結(jié)構(gòu)和設(shè)計的分離允許HTML執(zhí)行比原來更多的功能。
CSS的不同版本：
CSS1
CSS2
CSS2.1
CSS3
一個樣式規(guī)則由三部分組成：
選擇器–選擇器是 HTML 標記，用于選擇要設(shè)置樣式的內(nèi)容。 它根據(jù)其ID，類和名稱選擇 HTML元素。
屬性–屬性是 HTML 標簽的一種屬性。 簡而言之，所有 HTML 屬性都轉(zhuǎn)換為 CSS 屬性。
值– CSS中的值定義CSS屬性的一組有效值。
CSS 可以集成為三種方式
1、內(nèi)聯(lián)：直接在HTML元素上使用
<p style=”colour:skyblue;”>hello world</p>
2、外部:在工作空間中創(chuàng)建單獨的CSS文件，然后在創(chuàng)建的每個web頁面中鏈接它們
<head> <link rel=”text/css”href=”your_CSS_file_location”/> </head>
3、內(nèi)部: web 頁面的 head 元素在其中實現(xiàn)了內(nèi)部 CSS。
head>
<style>
P{
color : lime;
background-color:black;
}
</style>
</head>萬維網(wǎng)協(xié)會維護 CSS規(guī)范。
偽元素是添加到選擇器的關(guān)鍵字，它允許一種樣式，即所選元素的特定部分。CSS用于在HTML標記中應(yīng)用樣式，它允許在不影響實際文檔的情況下對文檔進行額外標記。它可以用來：
為第一個字母、行或元素設(shè)置樣式。
插入內(nèi)容
語法：
Selector: :pseudo-element
{Property1 :value;
Property2 :value;}CSS的優(yōu)點是:
一致性 – CSS有助于構(gòu)建一致的框架，設(shè)計人員可以使用該框架來構(gòu)建其他站點。 因此，網(wǎng)頁設(shè)計師的效率也提高了。
易于使用 – CSS 是非常容易學習和簡化網(wǎng)站開發(fā)。所有代碼都放在一個頁面上，這意味著對代碼行進行改進或編輯不需要重復(fù)修改多個頁面.
*網(wǎng)站速度 *– 通常，一個網(wǎng)站使用的代碼最多可以達到 2 頁或更多。但是對于CSS，這不是問題。它只需要2-3行代碼，因此，網(wǎng)站數(shù)據(jù)庫保持整潔，消除任何網(wǎng)站加載問題。
設(shè)備兼容性 – 由于人們使用不同類型的智能設(shè)備訪問互聯(lián)網(wǎng)，因此需要響應(yīng)式web設(shè)計。CSS 在這里的作用是使 web 頁面的響應(yīng)性更好，這樣它們就可以在所有設(shè)備中以相同的方式顯示。
多瀏覽器支持 – CSS享有多瀏覽器的支持，它與所有主要的互聯(lián)網(wǎng)瀏覽器兼容。
重新定位 – CSS允許您定義頁面上 web 元素位置的變化。通過它的實現(xiàn)，開發(fā)人員可以將 HTML 元素放置在他們喜歡的位置，以便與頁面的美學吸引力或其他考慮因素保持一致。
漸變是指我們在兩幅圖像之間創(chuàng)建中間幀，以獲得第一幅圖像的外觀，然后發(fā)展成第二幅圖像的過程，它主要用于創(chuàng)建動畫。
CSS 特定性是一個分數(shù)或等級，它決定了元素必須使用哪種樣式聲明。 CSS 中有四類可以授權(quán)選擇器的特異性級別：
內(nèi)聯(lián)樣式
ID
類，屬性和偽類
元素和偽元素
CSS的缺點有:
版本太多 – 與HTML或Javascript等其他參數(shù)相比，CSS有很多版本-CSS1，CSS2，CSS2.1，CSS3。 因此，CSS變得非?；靵y，尤其是對于初學者。
缺乏安全性 - 由于CSS是基于開放文本的系統(tǒng)，因此它沒有內(nèi)置的安全系統(tǒng)來防止其被覆蓋。 通過對其讀/寫操作的訪問，任何人都可以更改 CSS 文件并更改鏈接。
Fragmentation - 使用 CSS，可能無法在一個瀏覽器上使用另一瀏覽器。 因此，在網(wǎng)站上線之前，Web 開發(fā)人員必須通過在多個瀏覽器上運行程序來測試兼容性。
復(fù)雜性–使用 Microsoft FrontPage 等第三方軟件會使CSS變得復(fù)雜。
RWD（響應(yīng)式Web設(shè)計）技術(shù)用于在每種屏幕尺寸以及移動，平板電腦，臺式機和筆記本電腦等設(shè)備上完美顯示設(shè)計頁面，讓我們無需為每個設(shè)備創(chuàng)建不同的頁面。
CSS精靈的好處有：
通過將各種小圖像組合成一個圖像，減少了web頁面的加載時間。
減少HTTP請求，從而減少加載時間。
上下文選擇器，嚴格來講，叫后代組合式選擇器，就是一組以空格分隔的標簽名。用于選擇作為指定祖先元素后代的標簽。只要有標簽在它的層次結(jié)構(gòu)“上游”存在這么一個祖先，那么就會選中該標簽。無論從該標簽到作為祖先的上下文之間隔著多少層次都沒有關(guān)系。
漸進增強的概念是指從最基本的可用性出發(fā)，在保證站點頁面在低級瀏覽器中 的可用性和可訪問性的基礎(chǔ)上，逐步增加功能及提高用戶體驗。本質(zhì)上講，我們?nèi)粘５囊恍╅_發(fā)習慣，例如首先使用標記語言編寫頁面，然后通過樣式表來控制頁面 樣式等，都屬于漸進增強的概念；其他更為明顯的行為包括使用HTML5、CSS3等新技術(shù)，針對高級瀏覽器為頁面提高用戶體驗的豐富程度。
平穩(wěn)退化的概念是指首先使用最新的技術(shù)面向高級瀏覽器構(gòu)建最強的功能及用戶體驗，然后針對低級瀏覽器的限制，逐步衰減那些無法被支持的功能及體驗；在我們?nèi)粘５拈_ 發(fā)中，一個典型的平穩(wěn)退化的例子就是首先針對Chrome編寫頁面代碼，然后修復(fù)IE中的異?；蜥槍E去除那些無法被實現(xiàn)的功能特色.
所以， 這兩個概念方法其實早已并存在我們的日常開發(fā)工作中了，只是“漸進增強”與“平穩(wěn)退化”這樣的措辭是近些年才開始被普及。在我們眼下的HTML5與 CSS3實戰(zhàn)用，這兩個概念就尤其重要了，怎樣保證使用不斷變化的新技術(shù)來構(gòu)建在主流瀏覽器下都具有基本可用性的站點，并針對高級瀏覽器進行體驗提升，這 些是我們在開發(fā)過程中需要明確的思路。
我們可以使用諸如font-awesome或者阿里的 iconfont 之類的圖標庫將圖標添加到HTML網(wǎng)頁。 我們必須將給定圖標類的名稱添加到任何內(nèi)聯(lián)HTML元素中。 （<i>或<span>）。 圖標庫中的圖標是可縮放的矢量，可以使用CSS進行自定義。
border-width指定邊框的寬度。
物理標簽被稱為表示標記，而邏輯標簽對于外觀是無用的。物理標簽是較新的版本，而邏輯標簽是舊的并且專注于內(nèi)容。
如題，我們的標簽元素寫上后，瀏覽器就會渲染出結(jié)果，但不僅僅是這么簡單
//物理元素 <b>我想用b標簽加粗</b> //邏輯元素 <strong>我想用strong標簽加粗</strong> //兩段文字都加粗了，而且視覺效果完全一樣
確實，文字加粗了，兩者都達到了我們想要的目的，但是我們忽略了一個問題，既然b標簽可以加粗，那么strong這個標簽同樣是加粗，存在的 意義又是什么呢？既然W3C定義了兩個，它們之間的不同點是什么呢？它們之間的相同點又是什么呢？
物理元素
物理元素，又叫實體標簽，它所做的是一種物理行為，比如上面我把一段文字用b標簽加粗了，它所傳達的給瀏覽器，告訴瀏覽器 我要加粗這段文字，從單詞Bold中也可以看出來，英文中僅僅是加粗的意思，并沒有其他作用?？偨Y(jié)來說就是一句話： 物理元素就是告訴瀏覽器該怎么顯示出來。
邏輯元素
邏輯元素，從英文字面上Strong就可以看出它是強調(diào)的意思，所以我們用這個邏輯元素(如上strong)來向瀏覽器傳達 一個強調(diào)某段文字重要性的消息，說明此文字較為重要，也有利于搜索引擎收錄。
Web標準主張XHTML不涉及具體的表現(xiàn)形式，“強調(diào)”可以用加粗來強調(diào)，也可以用別的方式強調(diào)，也可以通過css來改變strong的具體表現(xiàn) ，還有就是并不是有了strong邏輯標簽，就不用b標簽來表示字體加粗了，b標簽和strong標簽?zāi)J情況下強調(diào)的效果一致，strong完全可以定義成別的樣式，用來強調(diào) 效果，但是最好符合W3C標準，它更提倡內(nèi)容與樣式分離，所以單純?yōu)榱诉_到加粗而使用b標簽不建議這樣做， 從XHTML文檔有意義性及用戶體驗角度來說，strong邏輯標簽更加合適，而SEO方面，則針對優(yōu)化情況而定。
CSS偽類是用來添加一些選擇器的特殊效果。偽類的語法
selector:pseudo-class{property:value;}CSS 和 SCSS 之間的區(qū)別如下：
CSS是一種用于設(shè)計web頁面的樣式語言，而SCSS用于為瀏覽器組合CSS樣式表。
SCSS 提供了一些變量，可以使用這些變量來縮短代碼，這是與 CSS 相比的一大優(yōu)勢。
嵌入式樣式表的優(yōu)點:
可以在一個文檔中創(chuàng)建多種標簽類型。
在復(fù)雜情況下，可以使用選擇器和分組方法來應(yīng)用樣式。
無需額外下載。
嵌入式樣式表的缺點：
無法控制多個文檔。
不同的介質(zhì)不區(qū)分大小寫，因此它們具有不同的屬性。 他們是：
aural - 用于語音和音頻合成器
print - 用于打印機
projection - 用于方案展示，比如幻燈片
handheld - 用于小的手持的設(shè)備
screen - 用于電腦顯示器
Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family
該指令告訴瀏覽器如何在HTML頁面上渲染特定元素。 它由一個選擇器和一個遵循規(guī)則集的聲明塊組成。 選擇器可以附加到其他選擇器，以通過規(guī)則集進行標識。
CSS 框架是一個庫，它允許使用CSS語言進行更輕松，更符合標準的Web設(shè)計。 這些框架中的大多數(shù)至少包含一個網(wǎng)格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，F(xiàn)oundation等。
base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串，在頁面上顯示的時候，可以用該字符串來代替圖片的
url屬性。
使用base64的優(yōu)點是：
（1）減少一個圖片的HTTP請求
使用base64的缺點是：
（1）根據(jù)base64的編碼原理，編碼后的大小會比原文件大小大1/3，如果把大圖片編碼到html/css中，不僅會造成文件體
積的增加，影響文件的加載速度，還會增加瀏覽器對html或css文件解析渲染的時間。
（2）使用base64無法直接緩存，要緩存只能緩存包含base64的文件，比如HTML或者CSS，這相比域直接緩存圖片的效果要
差很多。
（3）兼容性的問題，ie8以前的瀏覽器不支持。
一般一些網(wǎng)站的小圖標可以使用base64圖片來引入。
BFC指的是塊級格式化上下文，一個元素形成了BFC之后，那么它內(nèi)部元素產(chǎn)生的布局不會影響到外部元素，外部元素的布局也
不會影響到BFC中的內(nèi)部元素。一個BFC就像是一個隔離區(qū)域，和其他區(qū)域互不影響。
一般來說根元素是一個BFC區(qū)域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline-block、flex這些
屬性時也會創(chuàng)建BFC。還有就是元素的overflow的值不為visible時都會創(chuàng)建BFC。
IFC指的是行級格式化上下文，它有這樣的一些布局規(guī)則：
（1）行級上下文內(nèi)部的盒子會在水平方向，一個接一個地放置。
（2）當一行不夠的時候會自動切換到下一行。
（3）行級上下文的高度由內(nèi)部最高的內(nèi)聯(lián)盒子的高度決定。
加載性能：
（1）css壓縮：將寫好的css進行打包壓縮，可以減少很多的體積。
（2）css單一樣式：當需要下邊距和左邊距的時候，很多時候選擇:margin:top 0 bottom 0;但margin-bottom:bot
tom;margin-left:left;執(zhí)行的效率更高。
（3）減少使用@import,而建議使用link，因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載。
選擇器性能：
（1）關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到
左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹
配它們了）。
（3）避免使用通配規(guī)則，如*{}計算次數(shù)驚人！只對需要用到的元素進行選擇。
（4）盡量少的去對標簽進行選擇，而是用class。
（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過
三層，更多的使用類來關(guān)聯(lián)每一個標簽元素。
（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復(fù)指定規(guī)則。
渲染性能：
（1）慎重使用高性能屬性：浮動、定位。
（2）盡量減少頁面重排、重繪。
（3）去除空規(guī)則：｛｝?？找?guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則無疑能減少css文檔體積。
（4）屬性值為0時，不加單位。
（5）屬性值為浮動小數(shù)0.**，可以省略小數(shù)點之前的0。
（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。
（7）不使用@import前綴，它會影響css的加載速度。
（8）選擇器優(yōu)化嵌套，盡量避免層級過深。
（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數(shù)，但是同時圖片本身會變大，使用時，優(yōu)劣考慮清
楚，再使用。
（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。
（11）不濫用web字體。對于中文網(wǎng)站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏
覽器在下載web fonts時會阻塞頁面渲染損傷性能。
可維護性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。
（2）樣式與內(nèi)容分離：將css代碼定義到外部css中。
感謝各位的閱讀！關(guān)于“29個CSS面試題的講解與分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼