Web前端面試真題CSS系列---帶詳解！

臨近秋招，不少小伙伴開始了求職之路，面試是十分重要的考驗，其次也離不開面試題。網上的面試題零零散散，十分混亂，正好我抽時間幫助大家總結一下。難易程度肯定是從簡到難，今天是第一篇的續集——基礎篇中的CSS部分。

面試題來源是我從網上花錢購買的真題，是有專人親自面試總結出來的精題，也是高頻問題。

是一套完整的面試題庫，如果有小伙伴需要可以下載。（面試題900題+公司實戰面試題400問）

CSS部分

1 css sprite是什么,有什么優缺點

概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點：

減少 HTTP 請求數，極大地提高頁面加載速度

增加圖片信息重復度，提高壓縮比，減少圖片大小

更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

圖片合并麻煩

維護麻煩，修改一個圖片可能需要從新布局整個圖片樣式

2 display: none; 與 visibility: hidden; 的區別

聯系：它們都能讓元素不可見

區別：

display:none ;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；

visibility: hidden ;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內

容不可見

display: none ;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示 ；visibility: hidden; 是繼承屬性，子孫節點消失由于繼承了 hidden ，通過設置 visibility: visible; 可以讓子孫節點顯式

修改常規流中元素的 display 通常會造成文檔重排。修改 visibility 屬性只會造成本元素的重繪。

讀屏器不會讀取 display: none ;元素內容；會讀取 visibility: hidden; 元素內容

3 link 與 @import 的區別

1. link 是 HTML 方式， @import 是CSS方式

2. link 最大限度支持并行下載， @import 過多嵌套導致串行下載，出現 FOUC (文檔樣式

短暫失效)

3. link 可以通過 rel="alternate stylesheet" 指定候選樣式

4. 瀏覽器對 link 支持早于 @import ，可以使用 @import 對老瀏覽器隱藏樣式

5. @import 必須在樣式規則之前，可以在css文件中引用其他文件

6. 總體來說： link 優于 @import

4 什么是FOUC?如何避免

Flash Of Unstyled Content ：用戶定義樣式表加載之前瀏覽器使用默認樣式顯示文

檔，用戶樣式加載渲染之后再從新顯示文檔，造成頁面閃爍。

解決方法：把樣式表放到文檔的

5 如何創建塊級格式化上下文(block formatting context),BFC有什么用

1.創建規則：

根元素

浮動元素（ float 不取值為 none ）

絕對定位元素（ position 取值為 absolute 或 fixed ）

display 取值為 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素

overflow 不取值為 visible 的元素

2.作用：

可以包含浮動元素

不被浮動元素覆蓋

阻止父子元素的 margin 折疊

6 display、float、position的關系

1.如果 display 取值為 none ，那么 position 和 float 都不起作用，這種情況下元素不產生框

2.否則，如果 position 取值為 absolute 或者 fixed ，框就是絕對定位的， float 的計算值為 none ， display 根據下面的表格進行調整。

3.否則，如果 float 不是 none ，框是浮動的， display 根據下表進行調整

4.否則，如果元素是根元素， display 根據下表進行調整

5.其他情況下 display 的值為指定值

6.總結起來：絕對定位、浮動、根元素都需要調整 display

7 清除浮動的幾種方式，各自的優缺點

父級 div 定義 height

結尾處加空 div 標簽 clear:both

父級 div 定義偽類 :after 和 zoom

父級 div 定義 overflow:hidden

父級 div 也浮動，需要定義寬度

結尾處加 br 標簽 clear:both

8 為什么要初始化CSS樣式?

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化

往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對 SEO 有?定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

9 css3有哪些新特性

新增各種 css 選擇器

圓角 border-radius

多列布局

陰影和反射

文字特效 text-shadow

線性漸變

旋轉 transform

10 CSS3新增偽類有那些？

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。

:after 在元素之前添加內容,也可以用來做清除浮動。

:before 在元素之后添加內容。

:enabled 已啟用的表單元素。

:disabled 已禁用的表單元素。

:checked 單選框或復選框被選中

11?display有哪些值？說明他們的作用

block 轉換成塊狀元素。

inline 轉換成行內元素。

none 設置元素不可見。

inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。

list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

table 此元素會作為塊級表格來顯示

inherit 規定應該從父元素繼承 display 屬性的值

12 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

有兩種， IE 盒子模型、 W3C 盒子模型；

盒模型： 內容(content)、填充( padding )、邊界( margin )、 邊框( border )；

區 別： IE 的c ontent 部分把 border 和 padding 計算了進去;

13?CSS優先級算法如何計算？

優先級就近原則，同權重情況下樣式定義最近者為準

載入樣式以最后載入的定位為準

優先級為: !important > id > class > tag ;

!important 比內聯優先級高

14 談談浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上。

15 position的值， relative和absolute定位原點是

absolute ：生成絕對定位的元素，相對于static 定位以外的第一個父元素進行定位

fixed ：生成絕對定位的元素，相對于瀏覽器窗口進行定位

relative ：生成相對定位的元素，相對于其正常位置進行定位

static 默認值。沒有定位，元素出現在正常的流中

inherit 規定從父元素繼承 position 屬性的值

16 display:inline-block 什么時候不會顯示間隙？(攜程)

移除空格

使用 margin 負值

使用?font-size:0

letter-spacing

word-spacing

17 PNG\GIF\JPG的區別及如何選

1.GIF

8 位像素，256色

無損壓縮

支持簡單動畫

支持 boolean 透明

適合簡單動畫

2.JPEG

顏色限于 256

有損壓縮

可控制壓縮質量

不支持透明

適合照片

3.PNG

有 PNG8 和 truecolor PNG

PNG8 類似 GIF 顏色上限為 256 ，文件小，支持 alpha 透明度，無動畫

適合圖標、背景、按鈕

18 行內元素float:left后是否變為塊級元素？

行內元素設置成浮動之后變得更加像是 inline-block （行內塊級元素，設置成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不同是它的默認寬度不是 100% ），這時候給行內元素設置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

19 在網頁中的應該使用奇數還是偶數的字體？為什么呢？

偶數字號相對更容易和 web 設計的其他部分構成比例關系

20 ::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這兩個偽元素的作用

單冒號( : )用于 CSS3 偽類，雙冒號( :: )用于 CSS3 偽元素

用于區分偽類和偽元素

21 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

多數顯示器默認頻率是 60Hz ，即 1 秒刷新 60 次，所以理論上最小間隔為1/60*1000ms ＝ 16.7ms

22 CSS合并方法

避免使用 @import 引入多個 css文件，可以使用 CSS 工具將 CSS 合并為一個 CSS 文件，例如使用 Sass\Compass 等

23 CSS不同選擇器的權重(CSS層疊的規則)

！important 規則最重要，?于其它規則行內樣式規則，加 1000

對于選擇器中給定的各個 ID 屬性值，加 100

對于選擇器中給定的各個類屬性、屬性選擇器或者偽類選擇器，加 10

對于選擇其中給定的各個元素標簽選擇器，加1

如果權值一樣，則按照樣式規則的先后順序來應用，順序靠后的覆蓋靠前的規則

24 列出你所知道可以改變頁面布局的屬性

position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right 、

25 CSS在性能優化方面的實踐

css 壓縮與合并、 Gzip 壓縮

css文件放在 head 里、不要用 @import

盡量用縮寫、避免用濾鏡、合理使用選擇器

26 CSS3動畫（簡單動畫的實現，如旋轉等）

依靠 CSS3 中提出的三個屬性： transition 、 transform 、 animation

transition ：定義了元素在變化過程中是怎么樣的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。

transform ：定義元素的變化結果，包含 rotate 、 scale 、 skew 、 translate 。

animation ：動畫定義了動作的每?幀（ @keyframes ）有什么效果，包括animationname ， animation-duration 、 animation-timing-function 、 animationdelay 、 animation-iteration-count 、 animation-direction

27 base64的原理及優缺點

優點可以加密，減少了 HTTTP 請求

缺點是需要消耗 CPU 進行編解碼

28 幾種常見的CSS布局

流體布局

.left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .main { margin-left: 120px; margin-right: 220px; height: 200px; background: green; }

圣杯布局

.container { margin-left: 120px; margin-right: 220px; } .main { float: left; width: 100%; height:300px; background: green; } .left { position: relative; left: -120px; float: left; height: 300px; width: 100px; margin-left: -100%; background: red; } .right { position: relative; right: -220px; float: right; height: 300px; width: 200px; margin-left: -200px; background: blue; } < div class="container">