1徘键、float的作用？
定義元素在哪個方向浮動（left,right,none,inherit）受扳。浮動元素會生成一個塊級框序无，不論它本身是何種元素验毡。
接下來會有一系列的問題：
1）怎么清除浮動？
- A帝嗡、在浮動元素下方添加空div行晶通，并添加css樣式
.clear{
clear:both;
height: 0;
overflow:hidden;
}
- B、父級div定義 overflow屬性
div{
overflow:auto| hidden
}
- C哟玷、添加偽元素：after 三行情書
.content :after {
clear: both;
content: '';
display: block;
}
2）偽類和偽元素有哪些狮辽？區(qū)別是什么？
偽類：
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>元素树叽。
:enabled、:disabled 控制表單控件的禁用狀態(tài)谦絮。
:checked 單選框或復(fù)選框被選中题诵。
偽元素：
區(qū)別：
A、偽類本質(zhì)上是為了彌補常規(guī)CSS選擇器的不足层皱，以便獲取到更多信息（通常加一個class可以達(dá)到相同的效果）
B性锭、偽元素本質(zhì)上是創(chuàng)建了一個有內(nèi)容的虛擬容器(添加一個標(biāo)簽元素才能達(dá)到相同的效果)
C、CSS3中偽類和偽元素的語法不同（:和::）
D叫胖、可以同時使用多個偽類草冈，而只能同時使用一個偽元素
2、寫出下面代碼的運行結(jié)果
var value1 = 0, value2 = 0, value3 = 0;
for ( var i = 1; i <= 3; i++) {
var i2 = i;
(function() {
var i3 = i;
setTimeout(function() {
value1 += i;
value2 += i2;
value3 += i3;
}, 1);
})();
}
setTimeout(function() {
console.log(value1, value2, value3);
}, 100);
考察點：for循環(huán)，作用域怎棱，閉包方淤，立即執(zhí)行函數(shù)，setTimeout
解析：
for循環(huán)執(zhí)行完畢后蹄殃，i=4 ,i2=3
value1:0+4+4+4=12
value2:0+3+3+3=9
value3:0+1+2+3=6
3、寫出下面代碼的運行結(jié)果
function fun(n,o){
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
}
}
var a=fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
var b=fun(0).fun(1).fun(2).fun(3);
var c=fun(0).fun(1);
c.fun(2);
c.fun(3);
考察點：閉包你踩，作用對象
執(zhí)行var a=fun(0);诅岩，a的值為：
a={
fun:function(m){
return fun(m,0);
}
}
所以a.fun(1)、a.fun(2)带膜、a.fun(3)的console.log值即是fun(1,0)吩谦、fun(2,0)、fun(3,0)的console.log值膝藕，均為0式廷。
那么c也是一個對象(和a差不多，只是參數(shù)值不一樣):
c={
fun:function(m){
return fun(m,1);
}
}
那么c.fun(2)就輸出1了芭挽，c.fun(3)當(dāng)然也是1（第二個入?yún)⒏揪蜎]變呢）滑废，而c.fun(2)返回的新對象已經(jīng)變?yōu)椋?/p>
{
fun:function(m){
return fun(m,2);
}
}
所以c.fun(2).fun(3)的輸出結(jié)果當(dāng)然為2啦。
所以最終輸出結(jié)果為：
undefined
0
0
0
undefined,0,1,2
undefined,0
1
1
4袜爪、原型和原型鏈
prototype:原型蠕趁，函數(shù)特有屬性，對象辛馆。面向?qū)ο蟮木幊谭绞桨陈脕韺崿F(xiàn)基于原型的繼承與屬性的共享。通過Function.prototype.bind方法構(gòu)造出來的函數(shù)是個例外昙篙，它沒有prototype屬性腊状。
[[prototype]]:對象內(nèi)部實現(xiàn)的屬性，指向構(gòu)造函數(shù)的原型（Object.create創(chuàng)建的例外）苔可，瀏覽器里表現(xiàn)為
__proto__
屬性（chrome和firefox已實現(xiàn)）缴挖，原型鏈實現(xiàn)和查找必用屬性。
一張經(jīng)典的圖：
參考文章：
js中proto和prototype的區(qū)別和關(guān)系
## Js中Prototype硕蛹、proto醇疼、Constructor、Object法焰、Function關(guān)系介紹
延伸：使用new操作符的本質(zhì)是什么秧荆？
1）創(chuàng)建類的實例，這個實例是一個空對象并將它的__proto __屬性指向構(gòu)造函數(shù)的原型埃仪；
2）初始化實例乙濒，傳參、調(diào)用構(gòu)造函數(shù)，設(shè)置this指向這個實例颁股；
3）返回實例
參考文章：## How Prototypal Inheritance really works
5么库、瀏覽器和內(nèi)核代表
1、Internet Explorer 甘有， 內(nèi)核 Trident 诉儒， 微軟開發(fā)的一種排版引擎
2、Firefox 亏掀，內(nèi)核Gecko忱反，以C++編寫的網(wǎng)頁排版引擎，開源
3滤愕、safari温算、Opera和chrome，內(nèi)核WebKit间影，渲染速度極快
6注竿、瀏覽器緩存
兩張圖：
參考文章：
瀏覽器 HTTP 協(xié)議緩存機制詳解
7、es6新特性
參考ES6新特性概覽
8魂贬、html5有哪些新特性?移除了那些元素巩割？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？HTML5 為什么只需要寫 !DOCTYPE HTML随橘？如何區(qū)分 HTML 和HTML5喂分？
1）新特性
繪畫 canvas；用于媒介回放的 video 和 audio 元素机蔗；本地離線存儲 localStorage 蒲祈、sessionStorage ；語義化更好的內(nèi)容元素萝嘁，比如 article梆掸、footer、header牙言、nav酸钦、section；表單控件咱枉，calendar卑硫、date、time蚕断、email欢伏、url、search亿乳；新的技術(shù)webworker, websocket, Geolocation
2）移除的元素
純表現(xiàn)的元素：basefont(默認(rèn)字體)硝拧，big(大字體)径筏，center(水平居中)，font(字體標(biāo)簽)障陶，strike(中橫線)滋恬，tt(文本等寬)，u(下劃線)抱究；
對可用性產(chǎn)生負(fù)面影響的元素：frameset（框架集）恢氯，frame，noframes（為那些不支持框架的瀏覽器顯示文本）鼓寺。
3）HTML5新標(biāo)簽的瀏覽器兼容問題
A酿雪、IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽侄刽；瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式朋凉。
B州丹、最好的方式是直接使用成熟的框架：使用最多的是html5shim框架，必須在head標(biāo)簽中調(diào)用
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
4）HTML5 為什么只需要寫 !DOCTYPE HTML
而 HTML 5 不基于 SGML杂彭，因此不需要對 DTD 進(jìn)行引用墓毒，但是需要 doctype 來規(guī)范瀏覽器的行為。
HTML 4.01 中的 doctype 需要對 DTD 進(jìn)行引用亲怠，因為 HTML 4.01 基于 SGML所计。
其中，SGML是標(biāo)準(zhǔn)通用標(biāo)記語言,簡單的說团秽，就是比HTML,XML更老的標(biāo)準(zhǔn)主胧，這兩者都是由SGML發(fā)展而來的。
5）如何區(qū)分HTML 和HTML5
A习勤、看doctype聲明
B踪栋、看meta頭（h5<meta charset="UTF-8">,h4要很長一段）
C、是否用了h5新標(biāo)簽图毕、新特性
延伸：語義化HTML的好處?
參考：
HTML語義化
如何理解web語義化
9夷都、cookie、sessionStorage予颤、localStorage的作用和區(qū)別囤官？
同：都保存在客戶端，用以存儲數(shù)據(jù)蛤虐，同源
cookie：不超過4kb,發(fā)送http請求時攜帶党饮，可設(shè)置過期時間（默認(rèn)瀏覽器關(guān)閉后失效）
sessionStorage：5M或更大，存儲在客戶端笆焰，網(wǎng)頁關(guān)閉即失效(刷新不失效)劫谅，不發(fā)送給服務(wù)器
localStorage：5M或更大，存儲在客戶端，永久存儲捏检，不發(fā)送給服務(wù)器
如果超過最大限制荞驴，會報錯，Uncaught QuotaExceededError
web-storage測試工具
10贯城、css有哪些選擇器熊楼？優(yōu)先級？哪些屬性可繼承能犯？css3新增的偽類有哪些鲫骗？
1）選擇器
id >class> 標(biāo)簽> 相鄰> 子> 后代 >通配符(*) >屬性> 偽類
優(yōu)先級為： !important > id > class > tag （ important 比內(nèi)聯(lián)優(yōu)先級高）
2）可繼承屬性
font-size font-family color, UL LI DL DD DT;
不可繼承：border padding margin width height
3）CSS3新增偽類
前面已說，此處略
11踩晶、z-index的作用和使用條件
作用：設(shè)置元素的堆疊順序
使用條件：僅在定位元素上奏效（ position:absolute|relative|fixed）
