決戰(zhàn)“金三銀四”，中高級Web前端大廠面試秘籍：CSS篇
言
又到了一年一度的“金三銀四的季節(jié)了”。不過恐怕大家都有感覺，當下，正面臨著近幾年來的最嚴重的互聯(lián)網寒冬，因此今天的“金三銀四”肯定又是一場更為慘烈的江湖廝殺。
為了提升在廝殺中的“生存率”，讓我們從面經開始如果吧。這將是一個長篇系列。這篇文章讓我們先從CSS開始。
CSS
1. 盒模型
頁面渲染時，dom 元素所采用的 布局模型。可通過box-sizing進行設置。根據計算寬高的區(qū)域可分為：
- content-box (W3C 標準盒模型)
- border-box (IE 盒模型)
- padding-box
- margin-box
2. BFC
塊級格式化上下文，是一個獨立的渲染區(qū)域，讓處于 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
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)繞于周圍
- 應用:
- 阻止margin重疊
- 可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個div都位于同一個 BFC 區(qū)域之中)
- 自適應兩欄布局
- 可以阻止元素被浮動元素覆蓋
3.層疊上下文
元素提升為一個比較特殊的圖層，在三維空間中 (z軸) 高出普通元素一等。
- 觸發(fā)條件
- 根層疊上下文(html)
- position
- css3屬性
- flex
- transform
- opacity
- filter
- will-change
- -webkit-overflow-scrolling
- 層疊等級：層疊上下文在z軸上的排序
- 在同一層疊上下文中，層疊等級才有意義
- z-index的優(yōu)先級最高(從高往低排，順序如下：)
- z-index正直
- z-index 0 / auto
- 行內元素
- 浮動元素
- 塊級元素
- z-index為負
- background / border
4. 居中布局
- 水平居中
- 行內元素: 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 > 行內樣式 > #id > .class > tag > * > 繼承 > 默認
- 選擇器 從右往左 解析
6.去除浮動影響，防止父級高度塌陷
- 通過增加尾元素清除浮動
- :after /
- : clear: both
- 創(chuàng)建父級 BFC
- 父級設置高度
7.link 與 @import 的區(qū)別
- link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css
- 當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載
- @import需要 IE5 以上才能使用
- link可以使用 js 動態(tài)引入，@import不行
8. CSS預處理器(Sass/Less/Postcss)
CSS預處理器的原理: 是將類 CSS 語言通過 Webpack 編譯 轉成瀏覽器可讀的真正 CSS。在這層編譯之上，便可以賦予 CSS 更多更強大的功能，常用功能:
- 嵌套
- 變量
- 循環(huán)語句
- 條件語句
- 自動前綴
- 單位轉換
- mixin復用
面試中一般不會重點考察該點，一般介紹下自己在實戰(zhàn)項目中的經驗即可~
9.CSS動畫
- transition: 過渡動畫
- transition-property: 屬性
- transition-duration: 間隔
- transition-timing-function: 曲線
- transition-delay: 延遲
- 常用鉤子: transitionend
- animation / keyframes
- animation-name: 動畫名稱，對應@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
總結
通常，CSS 并不是重點的考察領域，但這其實是由于現(xiàn)在國內業(yè)界對 CSS 的專注不夠導致的，真正精通并專注于 CSS 的團隊和人才并不多。因此如果能在 CSS 領域有自己的見解和經驗，反而會為相當?shù)募臃趾兔摲f而出。
TML基本結構
基本文件格式：一般寫的代碼需要存儲在文件中，比如html代碼存儲在.html文件中
什么是HTML標簽：HTML標簽也稱為HTML標記，由開始標簽和結束標簽組成，用于表現(xiàn)結構化的內容，將內容構造成為一個完整的網頁。
HTML標簽組成
雙標簽：是指由開始標簽和結束標簽組成
單標簽：是指沒有結束標簽的標簽，由一個標簽構成即為開始也是結束
理解：開始標簽是被括號包圍的元素名，結束標簽是被括號包圍的斜杠和元素名，如<h1></h1><b></b> 注意：有些HTML元素沒有結束標簽，比如<br/>
HTML詳細說明
html：告訴頁面這是一個HTML文檔，并聲明這個網頁是面向那種語言的用戶lang=”zh-CN” <!DOCTYPE html>
文檔聲明：位于文檔的首航，告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。讓瀏覽器通過正確的方式解析我們的網頁，使網頁能正常顯示。<!DOCTYPE html>
head標簽：就是一個網頁的頭，頭部中的內容一般存放描述文檔的信息 <head>
body：就是一個身體，一般來說 body里面的內容要顯示出來<body>
<html>頁面基礎元素
簡介：HTML標簽也稱為HTML標記，由開始標簽和結束標簽組成，用于表現(xiàn)結構化的內容，將內容構造成為一個完整的網頁
規(guī)范：1.HTML標簽是由尖括號包圍的關鍵詞，比如<html>
2.HTML標簽通常是成對出現(xiàn)的，比如<b>和</b>
3.HTML不區(qū)別大小寫(建議使用小寫)
4.HTML可以嵌套，但是不允許交叉嵌套。正確<b><i>內容<i></b> 錯誤 <b><i>內容</b> <i>
<head>元素
簡介：是所有頭部元素的容器。
能包含哪些：<title><base><link><mate><script><style>
連接樣式表：<link>元素
規(guī)定呈現(xiàn)樣式：<style>元素
指定字符集：<mate>元素，關鍵詞 name，content
本質：優(yōu)化頁面，利于搜索，設置字符集，防止亂碼，引外部樣式方便，規(guī)定呈現(xiàn)樣式。
<title>元素
簡介：標簽定義文檔的標題。
用途：定義瀏覽器工具欄中的標題，提供頁面被添加到收藏夾時顯示的標題，顯示在搜索引擎結果中的頁面標題。
name 元信息元素名稱屬性
簡介：name屬性用來指定文檔中附加信息的名稱，通常用keywords來定義關鍵字
用法：<mate name=”信息名稱”/>
理解：在<mate>元素中，名稱必須對應有相關的值才能生效
content 元信息元素的值
簡介：用來指定文檔中附加信息的值
搭配：content屬性是與name屬性成對出現(xiàn)
用法：<mate name=”信息名稱” content=”附加信息的值” />
6. Doctype作?? 嚴格模式與混雜模式如何區(qū)分？它們有何意義?
- ??被加載的時， link 會同時被加載，? @imort ??被加載的時， link 會同時被加 載，? @import 引?的 CSS 會等到??被加載完再加載 import 只在 IE5 以上才能識 別，? link 是 XHTML 標簽，?兼容問題 link ?式的樣式的權重 ?于 @import 的權重
- <!DOCITYPE>聲明位于?檔中的最前?，處于標簽之前。告知瀏覽器的解析 器， ?什么?檔類型 規(guī)范來解析這個?檔
- 嚴格模式的排版和 JS 運作模式是 以該瀏覽器?持的最?標準運?
- 在混雜模式中，??以寬松的向后兼容的?式顯示。模擬?式瀏覽器的?為以防?站點? 法?作。 DOCTYPE 不存在或格式不正確會導致?檔以混雜模式呈現(xiàn)
17. ?內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？?內元 素和塊級元素有什么區(qū)別？
- ?內元素有： a b span img input select strong
- 塊級元素有： div ul ol li dl dt dd h1 h2 h3 h4… p
- 空元素：<br><hr> <img><input><link><meta>
- ?內元素不可以設置寬?，不獨占??
- 塊級元素可以設置寬?，獨占??
18. HTML全局屬性(global attribute)有哪些
- class :為元素設置類標識
- data-* : 為元素增加?定義屬性
- draggable : 設置元素是否可拖拽
- id : 元素 id ，?檔內唯?
- lang : 元素內容的的語?
- style : ?內 css 樣式
- title : 元素相關的建議信息
19. Canvas和SVG有什么區(qū)別？
- svg 繪制出來的每?個圖形的元素都是獨?的 DOM 節(jié)點，能夠?便的綁定事件或?來修 改。 canvas 輸出的是?整幅畫布
- svg 輸出的圖形是?量圖形，后期可以修改參數(shù)來?由放?縮?，不會失真和鋸?。?canvas 輸出標量畫布，就像?張圖??樣，放?會失真或者鋸?
20. HTML5 為什么只需要寫
- HTML5 不基于 SGML ，因此不需要對 DTD 進?引?，但是需要 doctype 來規(guī)范瀏覽器 的?為
- ?HTML4.01 基于 SGML ,所以需要對 DTD 進?引?，才能告知瀏覽器?檔所使?的?檔 類型
