引言

當下，正面臨著近幾年來的最嚴重的互聯(lián)網(wǎng)寒冬，聽得最多的一句話便是：相見于江湖~??。縮減 HC、裁員不絕于耳，大家都是人心惶惶，年前如此，年后想必肯定又是一場更為慘烈的江湖廝殺。但博主始終相信，寒冬之中，人才更是尤為珍貴。只要有過硬的操作和裝備，在逆風(fēng)局下，同樣也能來一波收割翻盤。

博主也是年前經(jīng)歷了一番廝殺，最終拿到多家大廠的 offer。在閉關(guān)修煉的過程中，自己整理出了一套面試秘籍供自己反復(fù)研究，后來給了多位有需要的兄臺，均表示相當靠譜，理應(yīng)在這寒冬之中回報于社會。于是決定花點精力整理成文，讓大家能比較系統(tǒng)的反復(fù)學(xué)習(xí)，快速提升自己。

面試固然有技巧，但絕不是偽造與吹流弊，通過一段短時間沉下心來閉關(guān)修煉，出山收割，步入大廠，薪資翻番，豈不爽哉？??

修煉原則

想必大家很厭煩筆試和考察知識點。因為其實在平時實戰(zhàn)中，講究的是開發(fā)效率，很少會去刻意記下一些細節(jié)和深挖知識點，腦海中都是一些分散的知識點，無法系統(tǒng)性地關(guān)聯(lián)成網(wǎng)，一直處于時曾相識的狀態(tài)。不知道多少人和博主一樣，至今每次寫阻止冒泡都需要谷歌一番如何拼寫。??。

以如此的狀態(tài)，定然是無法在面試的戰(zhàn)場上縱橫的。其實面試就猶如考試，大家回想下高考之前所做的事，無非就是?理解?和?系統(tǒng)性關(guān)聯(lián)記憶。本秘籍的知識點較多，花點時間一個個理解并記憶后，自然也就融會貫通，無所畏懼。

由于本秘籍為了便于記憶，快速達到應(yīng)試狀態(tài)，類似于復(fù)習(xí)知識大綱。知識點會盡量的精簡與提煉知識脈絡(luò)，并不去展開深入細節(jié)，面面俱到。有興趣或者有疑問的童鞋可以自行谷歌下對應(yīng)知識點的詳細內(nèi)容。??

CSS

1. 盒模型

頁面渲染時，dom 元素所采用的?布局模型?？赏ㄟ^box-sizing進行設(shè)置。根據(jù)計算寬高的區(qū)域可分為：

content-box?(W3C 標準盒模型)

border-box?(IE 盒模型)

padding-box

margin-box

2. BFC

格式化上下文，是一個獨立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。

IE 下為 Layout，可通過 zoom:1 觸發(fā)

觸發(fā)條件: - 根元素 -?positon: absolute/fixed?-?display: inline-block / table?-?float?元素 -?ovevflow?!==?visible

規(guī)則: - 屬于同一個 BFC 的兩個相鄰 Box 垂直排列 - 屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發(fā)生重疊 - BFC 中子元素不會超出他的包含塊 - BFC 的區(qū)域不會與 float 的元素區(qū)域重疊 - 計算 BFC 的高度時，浮動子元素也參與計算 - 文字層不會被浮動層覆蓋，環(huán)繞于周圍

應(yīng)用: - 阻止margin重疊 - 可以包含浮動元素 —— 清除內(nèi)部浮動(清除浮動的原理是兩個div都位于同一個 BFC 區(qū)域之中) - 自適應(yīng)兩欄布局 - 可以阻止元素被浮動元素覆蓋

3.層疊上下文

元素提升為一個比較特殊的圖層，在三維空間中?(z 軸)?高出普通元素一等。

觸發(fā)條件 - 根層疊上下文(html) -?position?- css3 屬性 -?flex?-?transform?-?opacticy?-?filter?-?will-change?-?-webkit-overflow-scrolling

層疊等級：層疊上下文在 z 軸上的排序 - 在同一層疊上下文中，層疊等級才有意義 -?z-index的優(yōu)先級最高

4. 居中布局

水平居中 - 行內(nèi)元素:?text-align: center?- 塊級元素:?margin: 0 auto?-?absolute + transform?-?flex + justify-content: center

垂直居中 -?line-height: height?-?absolute + transform?-?flex + align-items: center?-?table

水平垂直居中 -?absolute + transform?-?flex + justify-content + align-items

5. 選擇器優(yōu)先級

!important?> 行內(nèi)樣式 >?#id?>?.class?>?tag?> * > 繼承 > 默認

選擇器?從右往左?解析

6.去除浮動影響，防止父級高度塌陷

通過增加尾元素清除浮動 -?:after /?

: clear: both

創(chuàng)建父級 BFC

父級設(shè)置高度

7.link 與 @import 的區(qū)別

link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css

當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載

@import需要 IE5 以上才能使用

link可以使用 js 動態(tài)引入，@import不行

8. CSS 預(yù)處理器(Sass/Less/Postcss)

CSS 預(yù)處理器的原理: 是將類 CSS 語言通過?Webpack 編譯?轉(zhuǎn)成瀏覽器可讀的真正 CSS。在這層編譯之上，便可以賦予 CSS 更多更強大的功能，常用功能:

嵌套

變量

循環(huán)語句

條件語句

自動前綴

單位轉(zhuǎn)換

mixin 復(fù)用

面試中一般不會重點考察該點，一般介紹下自己在實戰(zhàn)項目中的經(jīng)驗即可~

9.CSS 動畫

transition: 過渡動畫 -?transition-property: 屬性 -?transition-duration: 間隔 -?transition-timing-function: 曲線 -?transition-delay: 延遲 - 常用鉤子:?transitionend

animation / keyframes?-?animation-name: 動畫名稱，對應(yīng)@keyframes?-?animation-duration: 間隔 -?animation-timing-function: 曲線 -?animation-delay: 延遲 -?animation-iteration-count: 次數(shù) -?infinite: 循環(huán)動畫 -?animation-direction: 方向 -?alternate: 反向播放 -?animation-fill-mode: 靜止模式 -?forwards: 停止時，保留最后一幀 -?backwards: 停止時，回到第一幀 -?both: 同時運用?forwards / backwards?- 常用鉤子:?animationend

動畫屬性: 盡量使用動畫屬性進行動畫，能擁有較好的性能表現(xiàn) -?translate?-?scale?-?rotate?-?skew?-?opacity?-?color

經(jīng)驗

通常，CSS 并不是重點的考察領(lǐng)域，但這其實是由于現(xiàn)在國內(nèi)業(yè)界對 CSS 的專注不夠?qū)е碌?，真正精通并專注?CSS 的團隊和人才并不多。因此如果能在 CSS 領(lǐng)域有自己的見解和經(jīng)驗，反而會為相當?shù)募臃趾兔摲f而出。