面试题整理｜45个CSS面试题
面試題整理｜45個CSS面試題
- 一、初級CSS面試題
- 二、中級CSS面試題
- 三、進階CSS面試題
- 四《HTML5&CSS3還原美團外賣》移動端布局實戰
CSS已成為Web設計不可或缺的一部分，它讓web頁面變得更加美觀，更具設計感。在前端面試中，CSS面試題也占有一定比重。
本篇文章，將為大家分享45個和CSS相關的面試題及其解析，難度分為：初級、中級、高級三個部分，由易到難，循序漸進。
一、初級CSS面試題
Q1、CSS全稱是什么？
CSS英文全稱：Cascading Style Sheets，也就是層疊樣式表。是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
Q2、為什么需要CSS？
CSS最早是在1997年開發的，它是Web開發人員定義其創建的網頁外觀的一種方式。它旨在允許開發人員將 網站代碼的內容和結構與視覺設計分開，這在此之前是不可能實現的。
結構和樣式的分離使HTML可以執行其最初基于的更多功能-內容標記，而不必擔心頁面本身的設計和布局，這通常稱為“外觀”頁面。
Q3、CSS的主要版本有哪些？
主要有：CSS 1，CSS 2，CSS 2.1，CSS 3，CSS 4幾個版本
Q4、CSS集成到HTML頁面的方式有哪些？
- 使用HTML頁面在header的
Q5、什么是層疊？
簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最后面設置的樣式效果。
Q6、使用CSS的優勢？
1、多個文檔的樣式可以通過使用一個站點來控制。
2、多個HTML元素可以包含許多文檔，可以在其中創建類。
3、要在復雜情況下對樣式進行分組，請使用選擇器和分組方法。
Q7、使用CSS的缺點？
1、無法通過選擇器升序
2、垂直控制的局限性
3、沒有表情
4、沒有列聲明
5、偽類不受動態行為的控制
6、規則，樣式，無法定位特定文本
Q8、列舉一些CSS框架？
Bootstrap：是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。
Layui：是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，體積輕盈，組件豐盈，非常適合界面的快速開發。
ElementUI：一套為開發者、設計師和產品經理準備的基于 Vue 2.0的桌面端組件庫。
antd：是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。開箱即用的高質量 React 組件，全鏈路開發和設計工具體系，數十個國際化語言支持。
Q9、CSS中使用ID和Class的區別？
1）ID：ID屬性的操作類似于CLASS屬性，但有一點重要的不同之處：ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設置單個元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。ID選擇器的標志符是散列符號（#）
2） Class：CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內的所有元素都有CLASS屬性。類選擇器以標志符（句點）開頭。
Q10、什么是RGB？
RGB色彩模式是工業界的一種顏色標準，是通過對紅?、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色。
Q11、在CSS中為元素分配某種顏色的方法有哪些
1、十六進制顏色碼：
十六進制顏色碼就是在軟件中設定顏色值的代碼。通過一個以“#”開頭的6位十六進制數值表示一種顏色。6位數字分為3組，每組兩位，依次表示紅、綠、藍三種顏色的強度。
2、RGB顏色模式：顏色由表明紅色，綠色，和藍色各成分強度的三個數值表示。從極小值0到最大值255，當所有顏色,都在最低值被顯示的顏色將是黑色，當所有顏色都在他們的最大值被顯示的顏色將是白色。
3、HSL標記：設計師和美術師通常更喜歡使用HSL（色相/飽和度/亮度）顏色方法進行工作。在Web上，使用HSL功能符號表示HSL顏色。HSL（）CSS函數在用法上與RGB（）函數非常相似。
Q12、CSS盒模型
所有 HTML 元素都可以視為方框。在 CSS 中，在談論設計和布局時，會使用術語“盒模型”或“框模型”。
CSS 框模型實質上是一個包圍每個 HTML 元素的框。它包括：外邊距、邊框、內邊距以及實際的內容。
對不同部分的說明：
內容區（content）：它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型；
內邊距（padding）：內邊距是內容區和邊框之間的空間；
邊框（border）：邊框是環繞內容區和填充的邊界；
外邊距（margin）：外邊距位于盒子的最外圍，是添加在邊框外周圍的空間。
Q13、什么是z-index？
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：z-index 僅能在定位元素上奏效！
可能到值：
auto——默認。堆疊順序與父元素相等。
number——設置元素的堆疊順序。
inherit——規定應該從父元素繼承 z-index 屬性的值。
Q14、什么是CSS Sprite（“精靈圖”）
CSS Sprites叫 CSS精靈或者雪碧圖，是一種網頁圖片應用處理方式。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中。
再利用CSS的"background-image"，“background-repeat”，"background-position"的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
Q15、使用CSS Sprites的好處
利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
二、中級CSS面試題
Q16、CSS中的偽元素是什么？
CSS偽元素是添加到選擇器的關鍵字，可用于設置所選元素的特定部分的樣式。
“first-line” 偽元素用于向文本的首行設置特殊樣式，只能用于塊級元素！下面的屬性可應用于 “first-line” 偽元素：font，color，background，word-space，letter-space，text-decoration，text-transform，line-height，clear。
“first-letter” 偽元素用于向文本的首字母設置特殊樣式，只能用于塊級元素！下面的屬性可應用于 “first-letter” 偽元素：font，color，background，margin，padding，border，text-decoration，line-height，clear，text-transform。
Q17、如何設置h2和h3標簽的相同樣式？
通過用逗號（，）分隔符來定位多個元素
Q18、CSS中的float屬性如何使用？
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
可能到值：
float: none;
float: left;
float: right;
Q19、當前版本的CSS中使用了哪些不同的模塊？
CSS中有幾個模塊，部分如下：
選擇器
盒模型
背景和邊框
文字效果
2D / 3D轉換
動畫制作
多列布局
用戶界面
Q20、CSS允許使用哪些不同的媒介類型？
@media屬性主要有四種類型（包括screen）：
all—適用于所有設備。
print—打印預覽模式/打印頁面。
speech——適用于“朗讀”頁面的屏幕閱讀器
screen——計算機屏幕（默認）
Q21. CSS有哪些單位?
CSS 有兩種類型的長度單位：相對和絕對。設置 CSS 長度的屬性有 width, margin, padding, font-size, border-width, 等。
相對長度：
| em | 它是描述相對于應用在當前元素的字體尺寸，所以它也是相對長度單位。一般瀏覽器字體大小默認為16px，則2em == 32px； |
| rem | 是根 em（root em）的縮寫，rem作用于非根元素時，相對于根元素字體大小；rem作用于根元素字體大小時，相對于其出初始字體大小。 |
| vh | viewpoint height，視窗高度，1vh=視窗高度的1% |
| vw | viewpoint width，視窗寬度，1vw=視窗寬度的1% |
| vmin | vw和vh中較小的那個。 |
| vmax | vw和vh中較大的那個。 |
| % | 相對父元素 |
*提示: rem與em有什么區別呢？區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
絕對長度
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px * | 像素 (1px = 1/96th of 1in) |
| pt | point，大約1/72英寸；(1pt = 1/72in) |
*像素或許被認為是最好的"設備像素"，而這種像素長度和你在顯示器上看到的文字屏幕像素無關。px實際上是一個按角度度量的單位。
Q22. 如何控制插入的圖片不重復?
.logo { ? background-repeat: none; ?}Q23. 下面這段代碼將對元素做些什么？
.container { margin：0 auto; }在要應用的對象上指定margin：0 auto時候，該對象將位于其父容器的中央。第二個參數上會告訴瀏覽器自動確定左右邊距，方法是將它們均等設置。它保證左右邊距將設置為相同的大小。第一個參數0表示頂部和底部邊距都將設置0。
Q24. overflow屬性在CSS中被用于什么？
overflow 屬性規定當內容溢出元素框時發生的事情。
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
可能的值：
overflow: auto;如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
overflow: hidden;內容會被修剪，并且其余內容是不可見的。
overflow: scroll;內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
overflow: visible;默認值。內容不會被修剪，會呈現在元素框之外。
Q25. 用于控制圖像滾動的屬性是什么？
background-attachment：該屬性設置背景圖像是隨頁面其余部分滾動還是固定滾動。
Q26. 什么是響應式網頁設計？
響應式網站設計是一種網絡頁面設計布局，其理念是：集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。
Q27.{visibility：hidden}和{display：none}有什么區別？
display:none 表示標簽根本不會出現在頁面上（盡管您仍然可以通過DOM與之交互）。與其他標簽之間將沒有分配空間。
visibility:hidden 表示該標簽不可見，但在頁面上為其分配了空間。標簽已呈現，只是在頁面上看不到。
Q28.CSS的特異性是什么意思？
如果有兩條或兩條以上指向同一元素的沖突 CSS 規則，則瀏覽器將遵循一些原則來確定哪一條是最具體的，并因此勝出。
將特異性（specificity）視為得分/等級，能夠確定最終將哪些樣式聲明應用于元素。
每個選擇器在特異性層次結構中都有其位置。以下四種類別定義了選擇器的特異性級別：
1、行內樣式 - 行內（內聯）樣式直接附加到要設置樣式的元素。
2、ID - ID 是頁面元素的唯一標識符，例如 #navbar。
3、類、屬性和偽類 - 此類別包括 .classes、[attributes] 和偽類，例如：:hover、:focus 等。
4、元素和偽元素 - 此類別包括元素名稱和偽元素，比如 h1、div、:before 和 :after。
Q29.CSS中字體相關的屬性有哪些？
Font-style
Font-variant
Font-weight
Font-size/line-height
Font-family
Caption
Icon
Q30.如何在CSS中使用box-shadow？
box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
Q31.什么是派生選擇器（上下文選擇器）？
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。
三、進階CSS面試題
Q32、什么是彈性布局？
flexbox布局正式稱為CSS flexible box布局模塊，是CSS3中的新布局模塊。它可以改善容器中物品的對齊，方向和順序，即使它們的尺寸是動態的，甚至是未知的。flex容器的主要特征是能夠修改其子項的寬度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空間。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
Q33、瀏覽器如何確定哪些元素與CSS選擇器匹配？
瀏覽器從最右邊（key 選擇器）到左邊匹配選擇器。瀏覽器根據key選擇器篩選出DOM中的元素，并遍歷其父元素以確定匹配項。選擇器鏈的長度越短，瀏覽器就可以更快地確定該元素是否與選擇器匹配。
例如，使用選擇器p span，瀏覽器首先找到所有元素，然后向上遍歷其父元素直到根，以找到
元素。對于特定的，只要找到
，它就會知道匹配并且可以停止其匹配。
Q34、解釋為什么選擇有時候使用translate（）而不是絕對定位？
translate是CSS transform的值。更改變換或不透明度不會觸發瀏覽器重排或重新繪制，但會觸發合成。而更改絕對定位會觸發回流。變換使瀏覽器為該元素創建一個GPU層，但是更改絕對定位屬性將使用CPU。因此，translate（）效率更高，并且可以縮短繪制時間，從而使動畫更流暢。
Q35、解釋通過移動優先策略和自適應設計兩種方法的差異？
這兩種方法不是唯一的。使網站具有響應能力意味著某些元素將通過CSS媒體查詢根據設備的屏幕尺寸（通常是視口寬度）來調整其大小或其他功能，從而做出響應。
例如，在較小的設備上減小字體大小。
移動優先策略也具有響應能力，但是，它同意我們應該默認并定義移動設備的所有樣式，并且僅在以后向其他設備添加特定的響應規則。遵循前面的示例：
.my-class { ? font-size: 12px; ? } ? @media (min-width: 600px) { ? .my-class { ? font-size: 24px; ? } ? }移動優先策略具有兩個主要優點：
1、由于不必針對任何媒體查詢驗證適用于它們的所有規則，因此在移動設備上的性能更高
2、它會強制針對響應式CSS規則編寫更簡潔的代碼。
Q36、CSS如何實現元素的定位？
position屬性指定用于元素的定位方法的類型。
有五個不同的位置值：
position: fixed;
position: static;
position: absolute;
position: sticky;
position: relative;
然后使用top，bottom，left和right屬性定位元素。但是，除非首先設置position屬性，否則這些屬性將不起作用。根據位置值，它們的工作方式也不同。
Q37、什么是塊級格式化上下文（BFC），如何工作？
1.規范解釋
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。
2.通俗解釋：
BFC 是一個獨立的布局環境,可以理解為一個容器,在這個容器中按照一定規則進行物品擺放,并且不會影響其它環境中的物品。
如果一個元素符合觸發BFC的條件，則該元素中的布局不受外部影響。
浮動元素會創建BFC，所以浮動元素內部子元素主要受浮動元素影響，兩個浮動元素之間是互不影響的。
3.創建方式：
根元素或包含根元素的元素
浮動元素 float ＝ left | right 或 inherit（≠ none）
絕對定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
Q38、這段CSS代碼會產生什么影響？{box-sizing：border-box;}
默認情況下，元素具有box-sizing：應用了content-box，并且僅考慮了內容大小。
box-sizing：邊框更改了元素的寬度和高度的計算方式，邊框和填充也包括在計算中。
元素的高度由內容的高度+垂直填充+垂直邊框寬度計算得出。
元素的寬度是通過內容的寬度+水平填充+水平邊框寬度來計算的。
在我們的盒子模型中，考慮到填充物和邊框，與設計人員實際如何想象網格中的內容產生了更好的共鳴。
Q39、什么是CSS預處理器？何時建議在項目中使用預處理器？
?CSS預處理器是用一種專門的編程語言，進行Web頁面樣式設計，然后再編譯成正常的CSS文件，以供項目使用。
?SCSS其語法完全兼容CSS3，并且繼承了SCSS的強大功能。由于SCSS是CSS的擴展，因此所有在CSS中正常工作的代碼也能在SCSS中正常工作。比CSS多出好多功能如變量、嵌套、混合(Mixin)、繼承等。
什么時候用取決于項目的類型，但是預處理器具有以下優點/缺點。
優點：
1、CSS變得更易于維護。
2、易于編寫嵌套選擇器。
3、用于一致主題的變量。可以跨不同項目共享主題文件。
4、Mixins生成重復的CSS。
5、諸如循環，列表和映射之類的Sass功能可以使配置更容易且更省力。
6、將您的代碼分成多個文件。CSS文件也可以拆分，但是這樣做需要HTTP請求才能下載每個CSS文件。
缺點：
1、需要進行預處理的工具。重新編譯時間可能很慢。
2、不編寫當前和潛在可用的CSS。例如，通過將諸如 postcss-loader之類的內容 與 webpack一起使用，您可以編寫可能與將來兼容的CSS，從而使您可以使用CSS變量（而不是Sass變量）之類的東西
Q40、相對，固定，絕對和靜態定位的元素有什么區別？
定位元素是計算的位置屬性是relative, fixed, absolute and static。
靜態static
默認位置；默認為0。元素將像往常一樣流入頁面。top，right，bottom，left和z-index屬性不適用。
相對relative
元素的位置相對于自身進行了調整，而沒有更改布局（因此，如果沒有放置元素，將為元素留出一定的空隙）。
絕對absolute
元素從頁面流中刪除，并且相對于其最接近的祖先（如果有）或相對于初始包含塊而定位在指定的位置。絕對定位的盒子可以有邊距，并且不會與其他任何邊距一起折疊。這些元素不會影響其他元素的位置。
固定 fixed
將元素從頁面流中移除，并將其放置在相對于視口的指定位置，并且在滾動時不會移動。
粘性sticky
粘性定位是相對定位和固定定位的混合。將該元素視為相對位置，直到它超過指定的閾值為止，此時將其視為固定位置。
Q41、什么是供應商前綴？
瀏覽器供應商有時會在實驗性或非標準CSS屬性和JavaScript API中添加前綴，因此，從理論上講，開發人員可以嘗試新的想法，同時從理論上防止在標準化過程中依賴他們的實驗，然后破壞Web開發人員的代碼。開發人員應等待包括未添加前綴的屬性，直到瀏覽器行為標準化為止。
主流瀏覽器使用以下前綴：
-webkit- （Chrome，Safari，Opera的較新版本，幾乎所有的iOS瀏覽器（包括Firefox for iOS）；基本上是任何基于WebKit的瀏覽器）
-moz- （Firefox）
-o- （舊的，WebKit之前的Opera版本）
-ms- （Internet Explorer和Microsoft Edge）
Q42、什么是文件分割，何時使用？
良好的CSS架構的應該有合理的文件組織。整體文件適合單獨的開發人員或非常小的項目。對于大型項目（具有多種布局和內容類型的站點，或在同一設計框架下具有多個品牌的站點），使用模塊化方法并將CSS拆分為多個文件更為明智。
跨文件拆分CSS可以更輕松地將任務打包給團隊。一個開發人員可以處理與排版相關的樣式，而另一個開發人員可以專注于開發網格組件。團隊可以合理地分工并提高整體生產率。
這是一個虛擬的CSS結構：
reset.css：重置和規范化樣式；顏色，邊框或字體相關的聲明
typography.css：標題和正文文本的字體，粗細，行高，大小和樣式
layouts.css：管理頁面布局和分段（包括網格）的樣式
forms.css：表單控件和標簽的樣式
list.css：特定于列表的樣式
table.css：表格專用樣式
carousel.css：輪播組件所需的樣式
accordion.css：手風琴組件的樣式
Q43、什么是function/mixins？
函數是返回任何Sass數據類型的單個值的代碼塊。 mixins非常類似的函數。兩者之間的主要區別在于，Sass代碼的mixins輸出行將直接編譯為CSS樣式，而函數返回的值隨后可以成為CSS屬性的值，或者變為可以傳遞給另一個函數或mixin的值。
Q44、CSS在后臺如何運行
瀏覽器顯示文檔時，必須將文檔的內容與其樣式信息結合在一起。它分兩個階段處理文檔：
瀏覽器將HTML和CSS轉換為DOM（文檔對象模型）。DOM表示計算機內存中的文檔。它結合了文檔的內容和樣式。
瀏覽器顯示DOM的內容。
Q45、推薦一種優化打印頁面的方法？
創建可打印頁面的秘訣是能夠識別和控制您網站的“內容區域”。大多數網站由頁眉，頁腳，側邊欄/子導航和一個主要內容區域組成。控制內容區域，您的大部分工作就完成了。以下是在不改變網站完整性的情況下征服印刷媒體的提示。
1、創建用于打印的樣式表
2、避免不必要的HTML表格
3、知道頁面的哪些部分沒有任何打印價值
4、使用分頁符
5、調整頁面大小以進行打印–最大高度等
————————————————————————————————————————
關于CSS面試題就先簡單給大家分享到這里！
掌握了這些面試題型和CSS概念后，還需要結合真實項目才能夠融會貫通 ！
下面課程將帶你進入真實項目的應用！帶大家掌握移動端布局的要點.
四《HTML5&CSS3還原美團外賣》移動端布局實戰
掃碼立即購買
更多詳情
掃碼咨詢
微信號｜mixiu1573
騰訊課堂｜網易云課堂
總結
以上是生活随笔為你收集整理的面试题整理｜45个CSS面试题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux关掉终端快捷键,linux终端
- 下一篇： oracle临时表空间地址,Oracle