91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

重要的七道CSS面試題

發布時間:2020-08-04 09:25:12 來源:億速云 閱讀:154 作者:Leah 欄目:web開發

這篇文章將為大家詳細講解有關重要的七道CSS面試題,文章內容質量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。

目錄

      • 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或網頁

格式優點缺點適用場景
gif文件小,支持動畫、透明,無兼容性問題只支持256種顏色色彩簡單的logo、icon、動圖
jpg色彩豐富,文件小有損壓縮,反復保存圖片質量下降明顯色彩豐富的圖片/漸變圖像
png無損壓縮,支持透明,簡單圖片尺寸小不支持動畫,色彩豐富的圖片尺寸大logo/icon/透明圖
webp文件小,支持有損和無損壓縮,支持動畫、透明瀏覽器兼容性不好支持webp格式的app和webview

6. CSS選擇器有哪些?優先級?

選擇器格式
標簽選擇器p
類選擇器#myclassname
id選擇器#myid
相鄰兄弟選擇器h2+p
子選擇器ul>li
后代選擇器li a
通配符選擇器*
屬性選擇器a[ref=“eee”]
偽類選擇器li:last-child

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

h2 + 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:hidden或者overflow:auto

undefined

目錄

      • 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或網頁

格式優點缺點適用場景
gif文件小,支持動畫、透明,無兼容性問題只支持256種顏色色彩簡單的logo、icon、動圖
jpg色彩豐富,文件小有損壓縮,反復保存圖片質量下降明顯色彩豐富的圖片/漸變圖像
png無損壓縮,支持透明,簡單圖片尺寸小不支持動畫,色彩豐富的圖片尺寸大logo/icon/透明圖
webp文件小,支持有損和無損壓縮,支持動畫、透明瀏覽器兼容性不好支持webp格式的app和webview

6. CSS選擇器有哪些?優先級?

選擇器格式
標簽選擇器p
類選擇器#myclassname
id選擇器#myid
相鄰兄弟選擇器h2+p
子選擇器ul>li
后代選擇器li a
通配符選擇器*
屬性選擇器a[ref=“eee”]
偽類選擇器li:last-child

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

h2 + 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:hidden或者overflow:auto

關于重要的七道CSS面試題就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

洛宁县| 望江县| 江安县| 阿瓦提县| 清涧县| 肇庆市| 镇赉县| 凉山| 宝山区| 措美县| 无锡市| 林周县| 福海县| 固原市| 大同市| 望奎县| 萍乡市| 五莲县| 连江县| 鸡东县| 井陉县| 平泉县| 基隆市| 布拖县| 郑州市| 环江| 涟源市| 金山区| 互助| 额济纳旗| 镇原县| 昌邑市| 财经| 宁阳县| 广安市| 呼和浩特市| 黑龙江省| 思南县| 呼伦贝尔市| 英山县| 西和县|