面試整理(三)CSS部分

2021-02-23 web前端開發指南

css挺有趣的一門學問，但是好些個自認為「 邏輯清晰，能言善辯 」的後端程式設計師，他就是學不會~

hhh……狂笑。

web前端面試 —— CSS部分

1. css sprite 是什麼,有什麼優缺點


概念：將多個⼩圖⽚拼接到⼀個圖⽚中。通過 background-position 和 元素尺⼨ 調節需要顯示的背景圖案。

優點：

a- 減少 HTTP 請求數，極⼤地提⾼⻚⾯加載速度

b- 增加圖⽚信息重複度，提⾼壓縮⽐，減少圖⽚⼤⼩

c- 更換⻛格⽅便，只需在⼀張或⼏張圖⽚上修改顏⾊或樣式即可實現

 

缺點：

a- 圖⽚合併麻煩

b- 維護麻煩，修改⼀個圖⽚可能需要從新布局整個圖⽚，樣式

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 的區別

① link 是 HTML ⽅式， @import 是CSS⽅式

② link 最⼤限度⽀持並⾏下載， @import 過多嵌套導致串⾏下載，出現 FOUC (⽂檔樣式短暫失效)

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

④ 瀏覽器對 link ⽀持早於 @import ，可以使⽤ @import 對⽼瀏覽器隱藏樣式

⑤ @import 必須在樣式規則之前，可以在css⽂件中引⽤其他⽂件

⑥ 總體來說：link 優於 @import

 

4. 什麼是FOUC?如何避免

a- Flash Of Unstyled Content ：⽤戶定義樣式表加載之前瀏覽器使⽤默認樣式顯示⽂檔，⽤戶樣式加載渲染之後再從新顯示⽂檔，造成⻚⾯閃爍。

b- 解決⽅法：把樣式表放到⽂檔的 <head>


 

5. 如何創建塊級格式化上下⽂(block formatting context),BFC有什麼用？

創建規則：絕對定位元素（ position 取值為 absolute 或 fixed ）display 取值為 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之⼀的元素overflow 不取值為 visible 的元素

 

作⽤：

可以包含浮動元素不被浮動元素覆蓋

 

6. display、float、position的關係

a- 如果 display 取值為 none ，那麼 position 和  float 都不起作⽤，這種情況下元素不產⽣框

b- 如果 position 取值為 absolute 或者 fixed ，框就是絕對定位的，  float 的計算值為 none ， display 根據下⾯的表格進⾏調整

c- 如果 float 不是 none ，框是浮動的， display 根據下表進⾏調整否則，

d- 如果元素是根元素， display 根據下表進⾏調整

e- 其他情況下 display 的值為指定值

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

 



7. 清除浮動的⼏種⽅式，各⾃的優缺點

① ⽗級 div 定義 height

② 結尾處加空 div 標籤 clear:both

③ ⽗級 div 定義偽類 :after 和 zoom

④ ⽗級 div 定義 overflow:hidden

⑤ ⽗級 div 也浮動，需要定義寬度結尾處加 br 標籤 clear:both


⽐較好的是第3種⽅式，好多⽹站都這麼⽤

 

8. 為什麼要初始化CSS樣式?

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的⻚⾯顯示差異。

當然，初始化樣式會對 SEO 有⼀定的影響，但⻥和熊掌不可兼得，但⼒求影響最⼩的情況下初始化

 

9 css3有哪些新特性

新增各種 css 選擇器圓⻆ border-radius 多列布局陰影和反射線性漸變

CSS3新增偽類有那些？

p:first-of-type 選擇屬於其⽗元素的⾸個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其⽗元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其⽗元素唯⼀的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其⽗元素的唯⼀⼦元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其⽗元素的第⼆個⼦元素的每個 <p> 元素。:after 在元素之前添加內容,也可以⽤來做清除浮動。

 

10 display有哪些值？說明他們的作⽤ 

inline-block 象⾏內元素⼀樣顯示，但其內容象塊類型元素⼀樣顯示。list-item 象塊類型元素⼀樣顯示，並添加樣式列表標記。
inherit 規定應該從⽗元素繼承 display 屬性的值

 

11. 介紹⼀下標準的CSS的盒⼦模型？低版本IE的盒⼦模型有什麼不同的？

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

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

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

 

12. CSS優先級算法如何計算？

優先級就近原則，同權重情況下樣式定義最近者為準載⼊樣式以最後載⼊的定位為準

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

!important ⽐ 內聯優先級⾼

 

13. 對BFC規範的理解？(配合本篇第5題)

它決定了元素如何對其內容進⾏定位,以及與其他元素的關係和相互作⽤

 

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的區別及如何選

GIF

8 位像素，  256 ⾊

⽆損壓縮

⽀持簡單動畫

⽀持 boolean 透明

適合簡單動畫

JPEG

有損壓縮適合照⽚

 

PNG

PNG8 類似 GIF 顏⾊上限為 256 ，⽂件⼩，⽀持 alpha 透明度，⽆動畫
適合圖標、背景、按鈕

 

18. ⾏內元素 float:left 後是否變為塊級元素？

⾏內元素設置成浮動之後變得更加像是 inline-block

既：⾏內塊級元素，設置成這個屬性的元素會同時擁有⾏內和塊級的特性，最明顯的不同是它的默認寬度不是 100% ，

這時候給⾏內元素設置 padding-top 和 padding-bottom 或者 width 、 height 都是有效果的

 

 

19. 在⽹⻚中的應該使⽤奇數還是偶數的字體？為什麼呢？偶數字號相對更容易和 web 設計的其他部分構成⽐例關係


20. ::before 和 :after中雙冒號和單冒號有什麼區別？解釋⼀下這2個偽元素的作⽤。

單冒號( : )⽤於 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 、

bottom、

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 ）有什麼效果，包括 animation-name ，animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction

 

 

27 base64的原理及優缺點

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

缺點：需要消耗 CPU 進⾏編解碼

--請叫我分割線

css這東西搞起來還挺有趣的~

希望面試的時候不要再css上被坑到吧。

相關焦點

  • 【面試題】CSS知識點整理(附答案)
    css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。偽類和偽元素是用來修飾不在文檔樹中的部分。偽類偽類 用於當元素處於某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。css實現寬高比[2]3.
  • HTML+CSS 面試題整理(一)
    增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸）7.css引入樣式表的方式有：①外部樣式表 <head><link rel="stylesheet" type="text/css" src="style.css"></head>②內部樣式表 <head><style type="
  • 關於CSS不得不知的9條面試經驗
    hack：給<img>添加display：block；二、默認高度，IE6以下版本中，部分塊元素，擁有默認高度（低於18px）hack1：給元素添加：font-size：0；hack2：聲明：overflow：hidden；三、表單行高不一致hack1：給表單添加聲明：float：left；height：；border
  • 好程式設計師web前端培訓分享HTML/CSS部分面試題
    好程式設計師web前端培訓分享HTML/CSS部分面試題。準備參加web前端面試的小夥伴們一起看一看吧，希望能夠對大家有所幫助！ 在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容(content)，元素的內邊距(padding)，元素的邊框(border)，元素的外邊距(margin)四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
  • 10個關於css高頻面試題
    用純CSS創建一個三角形的原理是什麼之前寫三角形, 都是直接記住代碼,沒有探究原因,我也是直到有一次面試時,面試大哥讓我說說css創建三角形的原理,我就.回來就趕緊翻資料.接下來我就將當時我理解的過程列舉出來:1.
  • 面試必備 css面試必考點
    設置元素的height/width屬性指的是border + padding + content部分的高/寬3 CSS選擇器有哪些？哪些屬性可以繼承？之前寫三角形, 都是直接記住代碼,沒有探究原因,我也是直到有一次面試時,面試大哥讓我說說css創建三角形的原理,我就.回來就趕緊翻資料.接下來我就將當時我理解的過程列舉出來:（1） 寫一個我們最熟悉的 border應用.box{ width:100px; height
  • 10 個 CSS 高頻面試題,你都會嗎?
    用純CSS創建一個三角形的原理是什麼之前寫三角形, 都是直接記住代碼,沒有探究原因,我也是直到有一次面試時,面試大哥讓我說說css創建三角形的原理,我就.回來就趕緊翻資料.接下來我就將當時我理解的過程列舉出來:1.
  • 17個CSS知識點整理
    來自：編程小技巧整理自網絡連結：
  • 挑戰一輪大廠後的面試總結 - css 篇
    在去年底開始換工作，直到現在算是告了一個段落，斷斷續續的也面試了不少公司，現在回想起來，那段時間經歷了被面試官手撕，被筆試題狂懟，悲傷的時候差點留下沒技術的淚水。這篇文章我打算把我找工作遇到的各種面試題（每次面試完我都會總結）和我自己複習遇到比較有意思的題目，做一份匯總，年後是跳槽高峰期，也許能幫到一些小夥伴。
  • 超全整理前端開發面試題——CSS篇(2016年)
    （1）有兩種，IE 盒子模型、W3C 盒子模型；（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；（3）區別：IE的content部分把 border 和 padding計算了進去;CSS選擇符有哪些？哪些屬性可以繼承？
  • 工作中常用的css整理
    文字超出部分顯示省略號單行文本的溢出顯示省略號（一定要有寬度） p{    width:200rpx;    overflow: hidden;    text-overflow:ellipsis;    white-space: nowrap; }多行文本溢出顯示省略號
  • HTML CSS整理筆記
    ： (1)行內樣式：直接在標籤中用style屬性設置CSS 如<p style="font-size:10px;">字體大小</p> (2)內部樣式表：把css寫在head的<style>中，規範化應為<style type="text/css"> (3)外部樣式表：文件擴展名為.css，在外部樣式表中不需要&
  • DIV+CSS教程_DIV+CSS布局_DIV+CSS實例教程手冊
    風格5. css優先權6.2，一列固定寬度居中3，一列自適應寬度4，一列自適應寬度居中5，兩對多的布局第3天：兩列和三列布局7，三列固定寬度8，三列固定寬度居中9，IE6的3像素bug第4天：垂直導航菜單和輔助彈出菜單
  • 金三銀四跳槽面試季,我整理前端知識做了個網站
    每年的金三銀四，都將迎來求職面試的一個高峰期，為什麼會有那麼多的求職需求？把前端知識做一個整體的回顧，疑難困惑點及時查漏補缺，這樣才能從容面對接下來的面試。根據以往面試的經歷，結合網友的分享，常見的面試題經常覆蓋這樣幾個方面：JavaScript、CSS、React / Vue、Node等基礎知識前端工具篇（常用Git命令或者自動化工具的使用等）於是我將網站進行了以下的設計：根據分類對應到
  • DIV+CSS網頁布局常用的一些基礎知識整理
    CSS命名規範一．文件命名規範全局樣式：global.css；框架布局：layout.css；字體樣式：font.css；連結樣式：link.css；列印樣式：print.css；二．常用類/ID命名規範
  • CSS面試須知,哪些需要掌握得CSS技巧
    設置元素的height/width屬性指的是border + padding + content部分的高/寬3 CSS選擇器有哪些？哪些屬性可以繼承？width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0;還有更加優雅的居中方式就是用flexbox，我以後會做整理
  • 面試題聯盟之CSS篇
    Firefox 曾經支持過，現在也不支持了，margin box更慘從未支持過計算方式：content box：盒模型的寬高 = content的寬高border box：盒模型的寬高 = content的寬高 + padding + bordercss
  • 【乾貨】各大網際網路公司前端筆試面試題–HTML,CSS篇
    很多面試題是我自己面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進步吧，不僅適用於求職者，對於鞏固複習前端基礎更是大有裨益。而更多的題目是我一路以來收集的，也有往年的，答案不確保一定正確，如有錯誤或有更好的解法，還請斧正。前面幾題是會很基礎，越下越有深度。1.你做的頁面在哪些流覽器測試過？
  • CSS 布局經典問題初步整理
    這兩種方法實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，它們實現的效果是一樣的，差別在於其實現的思想。-- 中間的 div 必須寫在最後面 -->    <div class="middle">中間彈性區</div></div>三欄式布局參考下面幾個連結:CSS三欄布局——中間固定兩邊自適應寬度： w3cplus 的文章，使用了雙飛翼和浮動實現兩側定寬、中間自適應，也實現了兩側自適應
  • 104道 CSS 面試題,助你查漏補缺(上)
    本部分主要是筆者在複習 CSS 相關知識和一些相關面試題時所做的筆記，如果出現錯誤，希望大家指出！目錄1.介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什麼不同的？[1]3.::before 和:after 中雙冒號和單冒號有什麼區別？解釋一下這 2 個偽元素的作用。[3]10.display 有哪些值？