首頁  >  文章  >  web前端  >  七題重要CSS面試題

七題重要CSS面試題

coldplay.xixi
coldplay.xixi轉載
2020-08-03 15:32:233274瀏覽

七題重要CSS面試題

      • #1. CSS3中的盒子模型
      • 2. display:none與visibility:hidden的區別
      • 3. 說一說CSS的sprite(精靈圖)
      • 4. position的屬性值有哪些?
      • 5. PNG、GIF、JPG、WEBP的差異以及如何選擇?
      • 6. CSS選擇器有哪些?優先級?
      • 7. 浮動相關
        • (1)什麼時候需要清除浮動?
        • (2)如何清除浮動?

專題推薦2020年CSS面試題彙總(最新)

#1. CSS3中的盒子模型

CSS3中的盒子模型有以下兩種:標準盒模型、IE盒模型

七題重要CSS面試題
七題重要CSS面試題

  • 標準盒模型和IE盒模型的差別就是:標準盒模型的寬高指的是內容的寬高,而IE盒模型的寬高指的是內容,內邊距,邊框的總和。

  • 在CSS3中,可以使用box-sizeing:border-box將普通盒模型轉換為IE盒模型。有時候我們已經設定了一個盒子的寬高,但是,如果想要改變border,這樣盒子的大小就會改變,我們就可以將其轉換為IE盒模型,就不用每次計算盒子內容大小了。

  • 在盒子模型中

    • box-sizeing:content-box表示標準盒子模型(預設值)
    • box-sizeing:border-box表示IE盒模型(也就是怪異盒子模型)

除此之外,還有:Flex彈性伸縮盒模型

七題重要CSS面試題

2. display:none與visibility:hidden的差異

這兩個屬性都是讓元素隱藏不可見

差異:

(1)在渲染樹中

  • ##display:none會讓元素完全中渲染樹中消失,渲染的時候不會佔據任何空間;
  • visibility:hidden不會讓元素從渲染樹中消失,渲染的元素還會佔據對應的空間,只是內容不可見
(2)繼承

  • #display:none是非繼承屬性,他的子孫節點會隨著父節點從渲染樹消失,透過修改子孫節點的屬性也無法顯示。
  • visibility:hidden是繼承屬性,子孫節點消失是由於繼承了hidden,透過設定visibility:visible可以讓子孫節點顯示。
(3)修改常規文件流中的元素的

display通常會造成文件的重排,但是修改visibility屬性只會造成本元素的重繪

(4)如果使用讀取螢幕器,設定為

display:none的內容不會被讀取,設定為visibility:hidden的內容會被讀取。 visibility:hidden

3. 說一說CSS的sprite(精靈圖)

概念:

精靈圖就是將多個小圖片拼接在一個圖片中,使用的時候透過

background-position元素尺寸調整需要顯示的背景圖案。

優點:

    減少HTTP請求數,在一定程度上提高了頁面的載入速度
  • 減少圖片的體積,因為每個圖片都有一個頭訊息,把多個圖片放在一起,會共用一個頭信息,較少了圖片的字節數
  • 更換風格方便,只需要在一張或少張圖片上修改圖片的顏色或樣式,整個網頁的風格就可以改變。
  • 減少了圖片命名的困擾,只要給一張或幾張圖片命名即可

#缺點:#

  • 維護比較麻煩,如果頁面背景有一點改變,就需要修改整個合併的圖片
  • 合併比較麻煩,需要將多張圖片有序的合理的合併為一張圖片,也要預留一定的空間,防止不必要的背景
  • 在寬螢幕或高解析度螢幕下的自適應頁面,如果圖片不夠寬,就可能出現背景斷裂的情況

#4. position的屬性值有哪些?

屬性值 概述
#absolute 生成絕對定位的元素,相對於static定位以外的一個父元素進行定位
relative 產生相對定位的元素,相對於其原來的位置進行定位
fixed 產生絕對定位的元素,相對於瀏覽器視窗進行定位
static 預設值,沒有定位,元素出現在正常的文件流中
inherit 規定從父元素繼承position屬性的值

5. PNG、GIF、JPG、WEBP的差異以及如何選擇?

(1)GIF

  • GIF圖片只儲存8位元索引,最多支援256色,
  • 採用無損壓縮,尺寸較小
  • 支援透明和簡單動畫

適用於:色彩簡單的logo,icon,線框圖,簡單的動畫

(2)JPG

  • 採用有損壓縮,可以控制壓縮的品質
  • 採用直接色,色彩豐富
  • 不支援透明

適用於:色彩豐富的圖片、漸層影像

(3)PNG

  • png-8是採用無損壓縮,以8位元索引色為基礎的點陣圖格式,比gif的透明的支援更好,同等質量下大小也更小,但不支援動畫。適用於圖標,背景,按鈕。
  • png-24採用無損壓縮,是基於直接色的點陣圖格式,大小相對以上幾種更大,但是圖片品質高,適用於原始檔案或需要二次編輯的圖片格式的保存。

(4)WEBP

  • 由Google開發,體積更小
  • 支援有損壓縮和無損壓縮
  • #支援透明和動畫

適用於:支援webp的APP或網頁

##webp 檔案小,支援有損和無損壓縮,支援動畫、透明瀏覽器相容性不好支援webp格式的app和webview
格式 #優點 缺點 適用場景
gif 檔案小,支援動畫、透明,無相容性問題 只支援256種顏色 色彩簡單的logo、icon、動圖
jpg 色彩豐富,文件小 有損壓縮,重複儲存圖片品質下降明顯 顏色豐富的圖片/漸層影像
png 無損壓縮,支援透明,簡單圖片尺寸小 不支援動畫,色彩豐富的圖片尺寸大 logo/icon/透明圖
#6. CSS選擇器有哪些?優先級?

選擇器#格式類別選擇器#id選擇器相鄰兄弟選擇器#子選擇器後位選擇器#通配符選擇器
#p
#myclassname
#myid
h1 p
ul>li
li a
*######### ###屬性選擇器######a[ref=“eee”]#############偽類別選擇器######li:last-child### ##########

如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器.例如,如果要增加緊接在h1 元素後出現的段落的上邊距,可以這樣寫:

h1 + p {margin-top:50px;}

對於選擇器的優先權

  • 元素選擇器:1
  • class選擇器:10
  • id ​​選擇器:100
  • 元素標籤:1000

需要注意的是:

  • !important宣告的樣式的優先權最高
  • 如果優先權相同,則最後出現的樣式生效
  • 繼承得到的樣式的優先權最低

屬性繼承性:

  • 可以繼承的屬性:font-size、font-family、color
  • 不可以繼承的樣式:border、padding、margin、width、height

# 7. 浮動相關

元素設定為浮動之後,display會自動變成block。

(1)什麼時候需要清除浮動?

浮動造成的問題如下:

  • 父元素的高度無法撐開,影響與父級同級的元素
  • 與浮動元素同級的非浮動元素給予跟隨在它後面
  • 若一個元素浮動,則其前面的元素也需要浮動,否則會影響頁面的結構

(2)如何清除浮動?

清除浮動的方式如下:

  • 給父級p定義height屬性
  • 最後一個浮動元素之後新增一個空的p標籤,並新增clear:both樣式
  • 包含浮動元素的父級標籤新增overflow:hiddenoverflow:auto


##目錄

      • 1 . CSS3中的盒子模型
      • 2. display:none與visibility:hidden的區別
      • 3. 說一說CSS的sprite(精靈圖)
      • #4. position的屬性值有哪些?
      • 5. PNG、GIF、JPG、WEBP的差異以及如何選擇?
      • 6. CSS選擇器有哪些?優先級?
      • 7. 浮動相關
        • (1)什麼時候需要清除浮動?
        • (2)如何清除浮動?

1. CSS3中的盒子模型

CSS3中的盒子模型有以下兩種:標準盒模型、IE盒模型

七題重要CSS面試題
七題重要CSS面試題

  • 標準盒模型與IE盒模型的差別就是:標準盒模型的寬高指的是內容的寬高,而IE盒模型的寬高指的是內容,內邊距,邊框的總和。

  • 在CSS3中,可以使用box-sizeing:border-box將普通盒模型轉換為IE盒模型。有時候我們已經設定了一個盒子的寬高,但是,如果想要改變border,這樣盒子的大小就會改變,我們就可以將其轉換為IE盒模型,就不用每次計算盒子內容大小了。

  • 在盒子模型中

    • box-sizeing:content-box表示標準盒子模型(預設值)
    • box-sizeing:border-box表示IE盒模型(也就是怪異盒子模型)

除此之外,還有:Flex彈性伸縮盒模型

七題重要CSS面試題

2. display:none與visibility:hidden的差異

這兩個屬性都是讓元素隱藏不可見

差異:

(1)在渲染樹中

  • ##display:none會讓元素完全中渲染樹中消失,渲染的時候不會佔據任何空間;
  • visibility:hidden不會讓元素從渲染樹中消失,渲染的元素還會佔據對應的空間,只是內容不可見
(2)繼承

  • #display:none是非繼承屬性,他的子孫節點會隨著父節點從渲染樹消失,透過修改子孫節點的屬性也無法顯示。
  • visibility:hidden是繼承屬性,子孫節點消失是由於繼承了hidden,透過設定visibility:visible可以讓子孫節點顯示。
(3)修改常規文件流中的元素的

display通常會造成文件的重排,但是修改visibility屬性只會造成本元素的重繪

(4)如果使用讀取螢幕器,設定為

display:none的內容不會被讀取,設定為visibility:hidden的內容會被讀取。 visibility:hidden

3. 說一說CSS的sprite(精靈圖)

概念:

精灵图就是将多个小图片拼接在一个图片中,使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点:

  • 减少HTTP请求数,在一定程度上提高了页面的加载速度
  • 减少图片的体积,因为每个图片都有一个头信息,把多个图片放在一起,会共用一个头信息,较少了图片的字节数
  • 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。
  • 减少了图片命名的困扰,只要给一张或几张图片命名即可

缺点:

  • 維護比較麻煩,如果頁面背景有一點改變,就需要修改整個合併的圖片
  • 合併比較麻煩,需要將多張圖片有序的合理的合併為一張圖片,也要預留一定的空間,防止不必要的背景
  • 在寬螢幕或高解析度螢幕下的自適應頁面,如果圖片不夠寬,就可能出現背景斷裂的情況

#4. position的屬性值有哪些?

屬性值 概述
#absolute 生成絕對定位的元素,相對於static定位以外的一個父元素進行定位
relative 產生相對定位的元素,相對於其原來的位置進行定位
fixed 產生絕對定位的元素,相對於瀏覽器視窗進行定位
static 預設值,沒有定位,元素出現在正常的文件流中
inherit 規定從父元素繼承position屬性的值

5. PNG、GIF、JPG、WEBP的差異以及如何選擇?

(1)GIF

  • GIF圖片只儲存8位元索引,最多支援256色,
  • 採用無損壓縮,尺寸較小
  • 支援透明和簡單動畫

適用於:色彩簡單的logo,icon,線框圖,簡單的動畫

(2)JPG

  • 採用有損壓縮,可以控制壓縮的品質
  • 採用直接色,色彩豐富
  • 不支援透明

適用於:色彩豐富的圖片、漸層影像

(3)PNG

  • png-8是採用無損壓縮,以8位元索引色為基礎的點陣圖格式,比gif的透明的支援更好,同等質量下大小也更小,但不支援動畫。適用於圖標,背景,按鈕。
  • png-24採用無損壓縮,是基於直接色的點陣圖格式,大小相對以上幾種更大,但是圖片品質高,適用於原始檔案或需要二次編輯的圖片格式的保存。

(4)WEBP

  • 由Google開發,體積更小
  • 支援有損壓縮和無損壓縮
  • #支援透明和動畫

適用於:支援webp的APP或網頁

##webp 檔案小,支援有損和無損壓縮,支援動畫、透明瀏覽器相容性不好支援webp格式的app和webview
格式 #優點 缺點 適用場景
gif 檔案小,支援動畫、透明,無相容性問題 只支援256種顏色 色彩簡單的logo、icon、動圖
jpg 色彩豐富,文件小 有損壓縮,重複儲存圖片品質下降明顯 顏色豐富的圖片/漸層影像
png 無損壓縮,支援透明,簡單圖片尺寸小 不支援動畫,色彩豐富的圖片尺寸大 logo/icon/透明圖
#6. CSS選擇器有哪些?優先級?

選擇器#格式類別選擇器#id選擇器相鄰兄弟選擇器#子選擇器後位選擇器#通配符選擇器
#p
#myclassname
#myid
h1 p
ul>li
li a
*######### ###屬性選擇器######a[ref=“eee”]#############偽類別選擇器######li:last-child### ##########

如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器.例如,如果要增加緊接在h1 元素後出現的段落的上邊距,可以這樣寫:

h1 + p {margin-top:50px;}

對於選擇器的優先權

  • 元素選擇器:1
  • class選擇器:10
  • id ​​選擇器:100
  • 元素標籤:1000

需要注意的是:

  • !important宣告的樣式的優先權最高
  • 如果優先權相同,則最後出現的樣式生效
  • 繼承得到的樣式的優先權最低

屬性繼承性:

  • 可以繼承的屬性:font-size、font-family、color
  • 不可以繼承的樣式:border、padding、margin、width、height

# 7. 浮動相關

元素設定為浮動之後,display會自動變成block。

(1)什麼時候需要清除浮動?

浮動造成的問題如下:

  • 父元素的高度無法撐開,影響與父級同級的元素
  • 與浮動元素同級的非浮動元素給予跟隨在它後面
  • 若一個元素浮動,則其前面的元素也需要浮動,否則會影響頁面的結構

(2)如何清除浮動?

清除浮動的方式如下:

  • 給父級p定義height屬性
  • 最後一個浮動元素之後新增一個空的p標籤,並新增clear:both樣式
  • 包含浮動元素的父級標籤新增overflow:hiddenoverflow:auto

#相關教學推薦:CSS影片教學

以上是七題重要CSS面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除