關於CSS不得不知的9條面試經驗

2021-03-02 技福教育
CSS是前端必須要掌握的技能之一，而一般面試也都會從CSS開始。在面試官心中的形象，很大程度取決於CSS題目的答題成果。本文主要介紹面試中常會遇到的CSS問題，並提供一些建議性的答案。「金三銀四」不可錯過，春節後要換工作的小夥伴們，該準備起來嘍！

一、指代不同

1、CSS3：是CSS技術的升級版本，於1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案。

2、CSS：是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。

二、內容不同

1、CSS3：主要包括盒子模型、列表模塊、超連結方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

2、CSS：不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

三、特點不同

1、CSS3：新特徵有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄布局、媒體查詢等。

2、CSS：能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS的盒子模型與低版本IE的盒子模型有什麼不同的？

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

首先拋開所謂的標準不說，因為這個標準是 W3C 那邊制定後跟各大廠商溝通去做統一的。在這個答案中，如果按照嚴格來說，首先會問基本怎麼計算，就像上面這個答案，不過需要注意一下順序。

標準盒模型的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right，這樣寫可能會顯得比較長，按照上面的答案來說的話，或許 width + padding + border + margin 就好了，附帶說一下除了 width 以外是有左右兩邊的。

怪異模式的盒模型寬度 = （width + padding + border） + margin 整體來說跟標準盒模型是相類似的，主要是 width + padding + border 這三者算在一起了。

標準的盒模型是基於 doctype 正確書寫的情況下，並且是高於 IE6 的瀏覽器才會有的，如果是低於 IE6 的瀏覽器，就算是正確的 doctype 的書寫情況下也是進入怪異模式的；在 IE 瀏覽器中如果寫錯了 doctype 或者是 doctype 之前有其他字符，那麼可能就讓 IE 進入怪異模式，從而導致瀏覽器解析元素盒模型出現問題，比如：

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.jifuedu.com/TR/xhtml1/DTD/xhtml1-strict.dtd">


這種情況下就會讓低版本的IE進入怪異模式，導致的可能不僅僅只是盒模型計算問題，還有可能是其他的一些情況，早年之前有不少公司直接利用這種方式對低版本和高版本的瀏覽器做樣式上的區別操作對待。

請解釋一下CSS3的flexbox,以及適用場景？

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局並沒有這樣內在的方向限制，可以由開發人員自由操作。

適用場景：彈性布局適合於移動前端開發，在Android和ios上也完美支持。

一、圖片間隙 

在div中插入圖片，圖片會將div下方撐大3px。

hack1：將<div>與<img>寫在同一行。

hack2：給<img>添加display：block；

dt li 中的圖片間隙。hack：給<img>添加display：block；

二、默認高度，IE6以下版本中，部分塊元素，擁有默認高度（低於18px）

hack1：給元素添加：font-size：0；

hack2：聲明：overflow：hidden；

三、表單行高不一致

hack1：給表單添加聲明：float：left；height：；border：0；

四、滑鼠指針

hack：若統一某一元素滑鼠指針為手型：cursor：pointer；

五當li內的a轉化塊元素時，給a設置float，IE裡面會出現階梯狀

hack1：給a加display：inline-block；

hack2：給li加float：left；

用來控制元素的盒子模型的解析模式，默認為content-box

context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬

border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

box-sizing 主要是用來計算一個元素中的寬度和高度的總和的值，而具體的計算方式將會根據 box-sizing 的屬性值來決定，共有兩個屬性值：content-box 和 border-box。

box-sizing屬性描述css reset的作用和用途

Reset重置瀏覽器的css默認屬性，瀏覽器的品種不同，樣式不同，然後重置，讓他們統一。

css精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量

css sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用css的"background-image","background-position"的組合進行背景定位，這樣可以減少。

很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以並發，但是如果請求太多會給伺服器增加很大的壓力。

元素選擇符：1

class選擇符：10

id選擇符：100

元素標籤：1000

選擇符優先級的拓展問題：

有 11 個元素選擇符的優先級跟 1 個 class 選擇符優先級哪個高呢？

如果有 256 個 class 選擇符，比如 .class001..class256 {} 那麼這個時候是否會大於 一個 id 選擇符呢？

!important聲明的樣式優先級最高，如果衝突再進行計算。

如果優先級相同，則選擇最後出現的樣式。

繼承得到的樣式的優先級最低。

這三點概括的並不是十分全面吧，在面試的過程中，如果面試官提到了有關選擇符優先級的問題，那麼可能會給幾個 demo 來讓你想一下哪個文字是什麼顏色之類的，最後再問原理。

眾所周知，!important 的優先級是最高，那麼如果可能會延伸的問題會有：<div style="width: 100px !important;"></div> 這裡的這個 width 樣式如何去覆蓋。

div+css 的布局較 table 布局有什麼優點

改版的時候更方便 只要改 css 文件。頁面加載速度更快、結構化清晰、頁面顯示簡潔。表現與結構相分離。易於優化（seo）搜尋引擎更友好，排名更容易靠前。

除此以外，工作經歷要挑重要的講，因工作而異，儘量往面試公司那邊靠。

簡歷一定要乾淨整潔、主次分明。

好了，祝你面試成功。

相關焦點

  • 關於經驗法則的運用,你不得不知的21條
    6.因同源於歸納法，要允許對運用經驗法則與刑事推定得出的結論進行反證。7.經驗法則是自由心證的基石之一。經驗法則的可視化與自由心證的規範化為刑事印證提供了理論依據，刑事印證本身就是對經驗的一種運用。8.經驗法則與免證事實屬於交叉關係。9.宜將經驗法則分為一般經驗法則與特殊經驗法則。
  • 10個關於css高頻面試題
    CSS3中新增的選擇器以及屬性這裡只是列出來, 具體的使用,請查看我的關於css3新增選擇器與屬性文章屬性選擇器含義描述E[att^="val"]屬性att的值以"val"開頭的元素E[att$="val"]屬性att的值以"val"結尾的元素E[att*="val"]屬性att的值包含
  • 關於教師資格證考試面試不得不知的面試流程
    2020年下半年中小學教師資格考試（面試）報名已於12月10日開始陸續開始，對於沒有面試經驗的考生來說，難免會有些緊張不知所措，今天小編為大家整理了關於面試的流程，希望對您的面試有所幫助
  • 面試必備 css面試必考點
    CSS 並不是面試重點考察的領域，但如果能在 CSS 領域有自己的見解和經驗，會使自己更加脫穎而出。
  • 隨便問個CSS就被幹趴了...面試官哭訴:再招不到人,我要被祭天了!
    雖然CSS上手簡單，精通卻很難，大多數前端開發者抱著夠用就行的心態，在面試中一問就跪。《Web前端工程師P5-P6》的主講老師喬納森，是從Apple跳回阿里巴巴的P7級前端技術專家，對CSS一知半解、學習前端不得其法的同學不妨來聽聽他的經驗分享👇
  • 面試整理(三)CSS部分
    css挺有趣的一門學問，但是好些個自認為「 邏輯清晰，能言善辯 」的後端程式設計師，他就是學不會~hhh……狂笑
  • 面試題聯盟之CSS篇
    5.子選擇器（ul > li）6.後代選擇器（li a）7.通配符選擇器（ * ）8.屬性選擇器（a[rel = "external"]）9.預處理器（sass/less/stylus/postcss）這些都是類css語言，通過webpack編譯可以轉成瀏覽器可讀的css，並且賦予css更強大的功能。
  • 網頁設計:關於CSS框架網頁的設計!
    【IT168 論壇採風】個人總結了在開發css框架中的一點經驗，獻醜了。希望大家的討論能使我們共同進步。　　g) 包含其他css的css 　　frontpage.css、list.css、detail.css、register.css等等 　　根據各種引用去引入相應的css。譬如list頁面中沒有需要表格的修飾，那就不引入table.css。以節約代碼量。
  • 12場面試的經驗總結:我留下了這9條面試技巧
    你或許能力超群，參加過許多重大項目，實習實戰經驗豐富，是同學和老師預測最快找到工作的傑出人才。但是，你可能會發現，一些相貌平平、成績沒你優秀、經驗沒你豐富的同學憑藉著精煉的面試技巧，良好的溝通能力，比你更早地拿到了心儀的 offer。缺乏面試經驗？不知道如何展現自己?即使你擁有著無人匹敵的才華和資源，這些問題都有可能限制住你，讓你無法在挑剔的HR面前無所適從。
  • Css語法特點是什麼?Css和html、javascript的關係是什麼?
    CSS是英文Cascading Style Sheets首字母的簡寫，翻譯成中文是層疊樣式表，簡單理解它是html語言的一個應用，css可以修飾各種動態和靜態頁面，對頁面中的元素進行精準控制（是像素為單位的），css的誕生是為了解決html的顯示功能，它解決了html顯示雜亂和臃腫的問題
  • 【面試題】CSS知識點整理(附答案)
    css實現寬高比[2]3.postcss提供了一個解析器，它能夠將CSS解析成抽象語法樹(AST)。postcss的常用插件autoprefixer[15]：autoprefixer插件會給根據CanIUse的兼容性去檢查你的CSS代碼，然後自動為你的CSS代碼加上瀏覽器廠商的私有前綴11. css modulescss modules作用:- 避免css相互覆蓋的方法，CSS Modules
  • 104道 CSS 面試題,助你查漏補缺(上)
    [37]38.抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題][38]39.簡單說一下 css3 的 all 屬性。[39]40.為什麼不建議使用統配符初始化 css 樣式。[40]41.absolute 的 containingblock（包含塊）計算方式跟正常流有什麼不同？[41]43.元素豎向的百分比設定是相對於容器的高度嗎？[43]44.全屏滾動的原理是什麼？
  • 【乾貨】各大網際網路公司前端筆試面試題–HTML,CSS篇
    很多面試題是我自己面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進步吧，不僅適用於求職者，對於鞏固複習前端基礎更是大有裨益。而更多的題目是我一路以來收集的，也有往年的，答案不確保一定正確，如有錯誤或有更好的解法，還請斧正。前面幾題是會很基礎，越下越有深度。1.你做的頁面在哪些流覽器測試過？
  • 關於GMAT你不得不知的那些事兒~
    關於GMAT你不得不知的那些事兒在商科留學界，一直有一個大名鼎鼎的考試——對，就是GMAT！GMAT是一個什麼樣的存在呢？簡單來說，就是眾多Top商學院錄取的重要參考之一。有了高分GMAT成績，面試官都會多看你（簡歷）兩眼~於是乎，松鼠君就來和寶寶們科普一下GMAT考試那些不得不知的那些事兒~GMAT考試的全稱為Graduate Management Admission Test，中文名為「經企管理研究生入學考試」，是專門用來評估經濟和管理等商科領域研究生申請者能力的標準化考試。
  • 挑戰一輪大廠後的面試總結 - css 篇
    在去年底開始換工作，直到現在算是告了一個段落，斷斷續續的也面試了不少公司，現在回想起來，那段時間經歷了被面試官手撕，被筆試題狂懟，悲傷的時候差點留下沒技術的淚水。這篇文章我打算把我找工作遇到的各種面試題（每次面試完我都會總結）和我自己複習遇到比較有意思的題目，做一份匯總，年後是跳槽高峰期，也許能幫到一些小夥伴。
  • 求職面試經驗分享
    筆者現將多次的求職面試以及多年的招聘面試所積累的經驗與大家共同分享，可能會給您一些幫助。1.面試準備面試時我們需要給面試官展現良好的第一印象，所以面試前您一定要整理好自己的外表，著裝儘量正式，不要太隨意或太休閒，因為這樣會讓面試官們感覺，如此隨便的外表，將來如何勝任工作。見到面試官時要面帶微笑，這樣會使他們認為您是一個充滿陽光並有禮貌的人，這將大大增加您面試成功的機率。
  • 經驗| 面試了50多位UI設計師,我總結了這些求職技巧
    在從篩選簡歷到面試的過程中，發現很多設計師在作品集、自我介紹、面試技巧等方面存在一些我作為招聘方覺得不妥的問題，所以總結了一些實際經驗跟大家分享。華為日前內部發布了《關於落實公司人才供應策略的決議》，宣布「華為公司原則上停止普通社會招聘」，不在優秀往屆生、關鍵稀缺人才以及公司專項招聘範圍之內的各部門不得發放offer，特殊情況需經輪值董事長審批。有華為內部員工透露，此舉是為了縮減用人成本。
  • 前端——關於css樣式運行的優先級問題
    本次講講關於css選擇器的問題。css的運行：在相同的選擇器前提下，我們引入css文件時：內聯樣式表＞內部樣式表＞外部鏈式表在優先級相同時，誰先加載就誰生效。同時引入css文件1和2最終效果為紅色這是選css文件讀取的順序決定的。因此，按照順序它執行下面的第二個個css樣式表的樣式。
  • 關於CSS中display的32種寫法
    display: block;這個值大家不陌生，我們最熟悉的預設就是這個值，最基本的塊級元素，屬於 css入門初學者都知道的概念，只要是容器類型的元素基本都是這個值。說實話，在人力資源如此寶貴的今天， IE的產品經理不知腦子是不是進水了，不派工程師去實現那麼多比這重要的多得多的特性，卻花時間做這麼個沒用的玩意兒，難道工程師的時間不是金錢嗎？難怪市場佔有率連年下滑。內部值談完了外部值，我們來看看內部值。
  • HTML+CSS 面試題整理(一)
    增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸）7.css引入樣式表的方式有：①外部樣式表 <head><link rel="stylesheet" type="text/css" src="style.css"></head>②內部樣式表 <head><style type="