前言
2019互聯(lián)網(wǎng)寒冬已至，大批互聯(lián)網(wǎng)公司紛紛裁員，其實從2018年下半年開始，裁員和市場部收縮預(yù)算就經(jīng)常被提及，阿里巴巴，華為都傳出了收縮招聘的新聞。網(wǎng)易的游戲部門和門戶部門也先后裁員，趣店裁員90%，斗魚裁員30%。小肆也是被這些消息嚇得瑟瑟發(fā)抖，不過生活就是這樣，誰也無法預(yù)料到第二天會發(fā)生什么，只有把握好現(xiàn)在，積極為未知的明天做好準(zhǔn)備才是正道。
這里小肆給大家?guī)c建議：
對于目前在職的同學(xué)，保持學(xué)習(xí)，提升自己核心競爭力，讓自己成為不會被輕易替代的那個人。
對于必須面臨重新找工作的同學(xué)，積極復(fù)習(xí)，多多刷題，把技術(shù)基礎(chǔ)打牢，這樣才容易在面試競爭中獲取領(lǐng)先地位。
小肆深知找工作的不易，今天給大家精選了一些前端近一年常見的面試題，供大家復(fù)習(xí)，即便是在職的同學(xué)，也推薦有空就看看，保持憂患意識在目前的大環(huán)境下是非常有必要的。
HTML篇
Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
-
<!DOCTYPE>聲明位于HTML文檔中的第一行，處于<html>標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。 - 標(biāo)準(zhǔn)模式的排版 和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
1.HTML5 為什么只需要寫 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。
2.行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
1. 行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
2. 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…
3. 常見的空元素：
<br> <hr> <img> <input> <link> <meta>
說這些可能會加分的：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
3.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？
- link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
- 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
- import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;
- link支持使用js控制DOM去改變樣式，而@import不支持;
4.介紹一下你對瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
5. 常見的瀏覽器內(nèi)核有哪些？
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
6.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù)webworker, websocket, Geolocation;
移除的元素：
- 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
- 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區(qū)分HTML5： DOCTYPE聲明/新增的結(jié)構(gòu)元素/功能元素
7.簡述一下你對HTML語義化的理解？
- 用正確的標(biāo)簽做正確的事情。
- html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
- 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
- 搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;
- 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
8. HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。
如何使用：
- 頁面頭部像下面一樣加入一個manifest的屬性；
- 在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態(tài)時，操作window.applicationCache進(jìn)行需求實現(xiàn)。
9.瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
10.請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大?。?/h5>
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
11.iframe有那些缺點？
- iframe會阻塞主頁面的Onload事件；
- 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
- iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
12.Label的作用是什么？是怎么用的？
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
13.HTML5的form如何關(guān)閉自動完成功能？
給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。
14.如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
WebSocket、SharedWorker；
也可以調(diào)用localstorge、cookies等本地存儲方式；
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，
我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；
在無痕模式下設(shè)置localstorge值時會拋出 QuotaExceededError 的異常；
15.webSocket如何兼容低瀏覽器？
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR
16.頁面可見性（Page Visibility API） 可以有哪些用途？
通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等;
在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放；
17.如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
- map+area或者svg
- border-radius
- 純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
18.實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
19.網(wǎng)頁驗證碼是干嘛的，是為了解決什么安全問題。
區(qū)分用戶是計算機(jī)還是人的公共全自動程序?？梢苑乐箰阂馄平饷艽a、刷票、論壇灌水；
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。
20.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：<strong>會重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時首選使用自然樣式標(biāo)簽。
CSS篇
1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;
2.CSS選擇符有哪些？哪些屬性可以繼承？
- id選擇器（ # myid）
- 類選擇器（.myclassname）
- 標(biāo)簽選擇器（div, h1, p）
- 相鄰選擇器（h1 + p）
- 子選擇器（ul > li）
- 后代選擇器（li a）
- 通配符選擇器（ * ）
- 屬性選擇器（a[rel = "external"]）
- 偽類選擇器（a:hover, li:nth-child）
- 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
- 不可繼承的樣式：border padding margin width height ;
3.CSS優(yōu)先級算法如何計算？
- 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
- 載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
同權(quán)重: 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高
4.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 在元素之前添加內(nèi)容,也可以用來做清除浮動。
::before 在元素之后添加內(nèi)容
:enabled
:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
5.如何居中div？
- 水平居中：給div設(shè)置一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
- 讓絕對定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
-
水平垂直居中一
確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距
div {
position: relative; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
- 水平垂直居中二
未知容器的寬高，利用transform屬性
div {
position: absolute; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
-
水平垂直居中三
利用 flex 布局
實際使用時應(yīng)考慮兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
6.display有哪些值？說明他們的作用。
block 塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
none 缺省值。象行內(nèi)元素類型一樣顯示。
inline 行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
inline-block 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
table 此元素會作為塊級表格來顯示。
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
7.position的值relative和absolute定位原點是？
absolute
生成絕對定位的元素，相對于值不為 static的第一個父元素進(jìn)行定位。
fixed （老IE不支持）
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
relative
生成相對定位的元素，相對于其正常位置進(jìn)行定位。
static
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit
規(guī)定從父元素繼承 position 屬性的值。
8.CSS3有哪些新特性？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
縮放,定位,傾斜,動畫,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
9.請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
一個用于頁面布局的全新CSS3功能，F(xiàn)lexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。
較為復(fù)雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現(xiàn)。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。
它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應(yīng)。
在布局上有了比以前更加靈活的空間。
10.用純CSS創(chuàng)建一個三角形的原理是什么？
把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
11.一個滿屏 品 字布局 如何設(shè)計?
簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可
12.css多列等高如何實現(xiàn)？
利用padding-bottom|margin-bottom正負(fù)值相抵；
設(shè)置父容器設(shè)置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時的高度，
當(dāng)它里面的任 一列高度增加了，則父容器的高度被撐到里面最高那列的高度，
其他比這列矮的列會用它們的padding-bottom補償這部分高度差。
13.經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的
*{margin:0;padding:0;}來統(tǒng)一。IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)
漸進(jìn)識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。
.bb{
background-color:red;/*所有識別*/
background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
14.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。
15.為什么要初始化CSS樣式。
因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法： * {padding: 0; margin: 0;}（強(qiáng)烈不建議）
淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
16.absolute的containing block(容器塊)計算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
- 若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；
- 否則,則由這個祖先元素的 padding box 構(gòu)成。
如果都找不到，則為 initial containing block。
補充：
- static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
- absolute: 向上找最近的定位為absolute/relative的元素
- fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
17.CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？
對于普通元素visibility:collapse;會將元素完全隱藏,不占據(jù)頁面布局空間,與display:none;表現(xiàn)相同.
如果目標(biāo)元素為table,visibility:collapse;將table隱藏,但是會占據(jù)頁面布局空間.
僅在Firefox下起作用,IE會顯示元素,Chrome會將元素隱藏,但是占據(jù)空間.
18. position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
如果元素的display為none,那么元素不被渲染,position,float不起作用,如果元素?fù)碛衟osition:absolute;或者position:fixed;屬性那么元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文檔流,根據(jù)float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin折疊.
19.對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 規(guī)范中的一個概念,它是一個獨立容器，決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會以不同的方式渲染,也就是說BFC內(nèi)部的元素和外部的元素不會互相影響。
20.css定義的權(quán)重
以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
/*權(quán)重為1*/
div{
}
/*權(quán)重為10*/
.class1{
}
/*權(quán)重為100*/
#id1{
}
/*權(quán)重為100+1=101*/
#id1 div{
}
/*權(quán)重為10+1=11*/
.class1 div{
}
/*權(quán)重為10+10+1=21*/
.class1 .class2 div{
}
如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)
21.請解釋一下為什么需要清除浮動？清除浮動的方式
清除浮動是為了清除使用浮動元素產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。
1、父級div定義height；
2、父級div 也一起浮動；
3、常規(guī)的使用一個class；
.clearfix::before, .clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
4、SASS編譯的時候，浮動元素的父級div定義偽類:after
&::after,&::before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：
- display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
- height:0 避免生成內(nèi)容破壞原有布局的高度。
- visibility:hidden 使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點擊和交互;
4）通過 content:"."生成內(nèi)容作為最后一個元素，至于content里面是點還是其他都是可以的，例如oocss里面就有經(jīng)典的 content:".",有些版本可能content 里面內(nèi)容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產(chǎn)生額外的空隙；
5）zoom：1 觸發(fā)IE hasLayout。
通過分析發(fā)現(xiàn)，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內(nèi)容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。
22.什么是外邊距合并？
外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
23.zoom:1的清除浮動原理?
清除浮動，觸發(fā)hasLayout；
Zoom屬性是IE瀏覽器的專有屬性，它可以設(shè)置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
譬如外邊距（margin）的重疊，浮動清除，觸發(fā)ie的haslayout屬性等。
來龍去脈大概如下：
當(dāng)設(shè)置了zoom的值之后，所設(shè)置的元素就會就會擴(kuò)大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發(fā)生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴(kuò)大的問題。
Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化，出現(xiàn)在 CSS 3.0 規(guī)范草案中。
目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現(xiàn)元素的縮放呢？
可以通過css3里面的動畫屬性scale進(jìn)行縮放。
24.移動端的布局用過媒體查詢嗎？
假設(shè)你現(xiàn)在正用一臺顯示設(shè)備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，
而顯示設(shè)備、屏幕投影和打印等這些媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法
<!-- link元素中的CSS媒體查詢 -->
當(dāng)媒體查詢?yōu)檎鏁r，相關(guān)的樣式表或樣式規(guī)則會按照正常的級聯(lián)規(guī)被應(yīng)用。
當(dāng)媒體查詢返回假， <link> 標(biāo)簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應(yīng)用）。
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 樣式表中的CSS媒體查詢 -->
包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達(dá)式。
CSS3加入的媒體查詢使得無需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍。
<style>
@media (min-width: 700px) and (orientation: landscape){
.sidebar {
display: none;
}
}
</style>
25.使用 CSS 預(yù)處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質(zhì)區(qū)別，只因為團(tuán)隊前端都是用的SASS)
26.CSS優(yōu)化、提高性能的方法有哪些？
關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）；
如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹配它們了）；
提取項目的通用公有樣式，增強(qiáng)可復(fù)用性，按模塊編寫組件；增強(qiáng)項目的協(xié)同開發(fā)性、可維護(hù)性和可擴(kuò)展性;
使用預(yù)處理工具或構(gòu)建工具（gulp對css進(jìn)行語法檢查、自動補前綴、打包壓縮、自動優(yōu)雅降級）；
23.瀏覽器是怎樣解析CSS選擇器的？
樣式系統(tǒng)從關(guān)鍵選擇器開始匹配，然后左移查找規(guī)則選擇器的祖先元素。
只要選擇器的子樹一直在工作，樣式系統(tǒng)就會持續(xù)左移，直到和規(guī)則匹配，或者是因為不匹配而放棄該規(guī)則。
24.margin和padding分別適合什么場景使用？
margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。
margin用于布局分開元素使元素與元素互不相干；
padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段
25. ::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素的作用。
單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
雙冒號是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時支持舊的已經(jīng)存在的偽元素寫法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。
想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。
如果按堆棧視角，::after生成的內(nèi)容會在::before生成的內(nèi)容之上
26. 如何修改chrome記住密碼后自動填充表單的黃色背景 ？
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
27. 設(shè)置元素浮動后，該元素的display值是多少？
自動變成了 display:block
28. 怎么讓Chrome支持小于12px 的文字？
1、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。
2、使用12px及12px以上字體大?。簽榱思嫒莞鞔笾髁鳛g覽器，建議設(shè)計美工圖時候設(shè)置大于或等于12px的字體大小，如果是接單的這個時候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
3、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時在設(shè)置小于12px對象設(shè)置-webkit-text-size-adjust:none，做到最大兼容考慮。
4、使用12px以上字體：為了兼容、為了代碼更簡單 從新考慮權(quán)重下兼容性。
29. 讓頁面里的字體變清晰，變細(xì)用CSS怎么做？
-webkit-font-smoothing: antialiased;
30. font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
傾斜的字體樣式
31. position:fixed;在android下無效怎么處理？
fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，
原來的網(wǎng)頁還好好的在那，fixed的內(nèi)容也沒有變過位置，
所以說并不是iOS不支持fixed，只是fixed的元素不是相對手機(jī)屏幕固定的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
32. 如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
33. display:inline-block 什么時候會顯示間隙？(攜程)
移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing
34. 什么是CSS 預(yù)處理器 / 后處理器？
預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性，
還有層級、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的
是給CSS屬性添加瀏覽器私有前綴，實現(xiàn)跨瀏覽器兼容性的問題。
其他
除了HTML,CSS我們需要復(fù)習(xí)之外，還有JS、網(wǎng)絡(luò)，框架相關(guān)等知識需要復(fù)習(xí)，關(guān)于這些知識點，在github上有一個10000+star的項目，該項目為我們整理了相當(dāng)全的知識圖譜。小肆把鏈接放在下面，有需要的同學(xué)快去看看吧！
https://github.com/InterviewMap/CS-Interview-Knowledge-Map
最后別忘了關(guān)注我哦！
