前端面试常考系列四
轉(zhuǎn)載自??前端面試?？枷盗兴?/p>
一、CSS盒子模型有哪些用處
css中的盒子模型是為了理解div+css模型的定位功能，它利用盒子模型這樣的布局方式代替了傳統(tǒng)的表格布局方式。盒子模型是在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個模型，通過這個模型可以明白網(wǎng)頁中div和div之間的相對位置是如何布局的。
二、HTML5應(yīng)用程序緩存和瀏覽器緩存有何區(qū)別
應(yīng)用程序緩存是HTML5?的重要特性之一，提供了離線使用的功能，讓應(yīng)用程序可以獲取本地的網(wǎng)站內(nèi)容，例如HTML、CSS圖片以及JavaScript。這個特性可以提高網(wǎng)站性能，它的實現(xiàn)借助于manifest文件，與傳統(tǒng)瀏覽器緩存相比，它不強(qiáng)制用戶訪問的網(wǎng)站內(nèi)容被緩存。
三、HTML5 Canvas 元素有何作用
HTML5的canvas元素使用JavaScript 在網(wǎng)頁上繪制圖像，優(yōu)勢在于在于可以直接在HTML上進(jìn)行圖形操作。?
方法如下 ：
<video width=”450″height=”340″controls>
? <source src=”jamshed.mp4″type=”video/mp4″>
? ?Your browser does’nt support video embedding feature.
</video>
五、如何把音頻嵌入HTML5
方法如下 ：
<audio controls>
? ? <source src=”jamshed.mp3″type=”audio/mpeg”>
? ? Your browser does’nt support audio embedding feature.
</audio>
六、新的HTML5文檔類型和字符集是什么
文檔類型 ：
<!doctype html>
字符集 ：
<meta charset=”UTF-8″>
七、CSS選擇器的類型有哪些，并說明其用法
CSS選擇器的類型有：
基礎(chǔ)的選擇器、組合選擇器、屬性選擇器、偽類、偽元素
1、基礎(chǔ)的選擇器*
通用元素下選擇器，匹配任何元素。Ex：*{margin:0; padding:0;}
E
標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素。Ex：P{font-size:2em;}
.info和E.info
class選擇器，匹配所有class屬性中包含info的元素。Ex：.info{background:#ff0;} p.info{background:#ff0;}p .info{background:#ff0;}
#info和E#info
Id選擇器，匹配所有id屬性等于footer的元素。
Ex：#info{background:#ff0}
P#info{background:#ff0}
2、組合選擇器E,F
多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號隔開。
Ex：Div,p{color:#f00}
E F
后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔。
Ex：#nav li { display:inline;}
li a { font-weight:bold;}
E>F
子元素選擇器，匹配所有E元素的子元素F。
Ex：din>strong { color:#f00;}
E+F
毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F。
P+P{ color:#f00;}
3、屬性選擇器E[att]
匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如”[cheacked]”。下面的屬性選擇器也是同樣。）
EX：p[title]{ color:#f00;}
E[att=val]
匹配所有att屬性等于“val”的E元素。
Ex:div[class=”error”]{color:#f00;}
E[arr~=val]
匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素。
Ex：td[class~=”name”]{color;#f00}
E[arr|=val]
匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值，且其中一個值以“val”開頭的E元素，主要用于lang屬性，比如“en”、“en-us”、“en-qb”等等。
Ex：p[lang|=en]{color:#foo;}
4、偽類E:first-child
匹配父元素的第一個子元素。
Ex: p:first-child { font-style:italic;}
E:link
匹配所有未被點擊的鏈接。
E:visited
匹配所有已被點擊的鏈接。
E:active
匹配所有鼠標(biāo)已經(jīng)按下且未釋放的E元素。
E:hover
匹配鼠標(biāo)懸停其上的E元素。
E:lang(c)
匹配lang屬性等于c的E元素。
5、偽元素E:first-line
匹配E元素的第一行。
Ex：p:first-line { font-weight:bold;color;#600;}
E:first-litter
匹配E元素的第一個字母。
E:before
在E元素之前插入生成的內(nèi)容。
E:affter
在E元素之后插入生成的內(nèi)容。
八、CSS的優(yōu)先級和計算特殊值有何特殊性
優(yōu)先級(1)、同類型，同級別的樣式后者先于前者
(2))、ID > 類樣式 > 標(biāo)簽 > *
(3)、內(nèi)聯(lián)>ID選擇器>偽類>屬性選擇器>類選擇器>標(biāo)簽選擇器>通用選擇器(*)>繼承的樣式。
(4)、具體 > 泛化的，特殊性即css優(yōu)先級
(5)、近的 > 遠(yuǎn)的 (內(nèi)嵌樣式 > 內(nèi)部樣式表 > 外聯(lián)樣式表)
內(nèi)嵌樣式：內(nèi)嵌在元素中，<span style="color:red">span</span>
內(nèi)部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯(lián)樣式表：單獨存在一個css文件中，通過link引入或import導(dǎo)入的樣式
(6)、!important 權(quán)重最高，比 inline style 還要高。
important > 內(nèi)嵌 > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權(quán)重、特殊性計算法：?
?CSS樣式選擇器分為4個等級，a、b、c、d
(1)、如果樣式是行內(nèi)樣式（通過Style=“”定義），那么a=1，1,0,0,0?
(2)、b為ID選擇器的總數(shù) 0,1,0,0?
(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數(shù)量。0,0,1,0
(4)、d為標(biāo)簽、偽元素選擇器的數(shù)量 0,0,0,1
(5)、!important 權(quán)重最高，比 inline style 還要高。
innerHTML，innerText
十、常見瀏覽器兼容性問題有哪些，如何解決
瀏覽器兼容問題一塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大?
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/span>
碰到頻率：90%（稍微復(fù)雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標(biāo)簽，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設(shè)置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題。
設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度?
問題癥狀：IE6、7和遨游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高。
不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同?
問題癥狀：隨便寫幾個標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設(shè)置各個標(biāo)簽的內(nèi)外補(bǔ)丁是0。
行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug?
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標(biāo)簽，所以我們再加上display:inline的話，它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe。
圖片默認(rèn)有間距
問題癥狀：幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注?：?因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）。
標(biāo)簽最低高度設(shè)置min-height不兼容?
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個值（如300px）時。容器的高度為300px；當(dāng)內(nèi)容高度大于這個值時，容器高度被撐高，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題。
透明度的兼容CSS設(shè)置?
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設(shè)置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現(xiàn)兼容。
<video> ?標(biāo)記定義一個視頻
<audio> ?標(biāo)記定義音頻內(nèi)容
<source> ?標(biāo)記定義媒體資源
<canvas> ?標(biāo)記定義圖片
<embed> ?標(biāo)記定義外部的可交互的內(nèi)容或插件比如flash?
十二、display的值各有什么作用
none
隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間?
? inline
指定對象為內(nèi)聯(lián)元素。?
? block
指定對象為塊元素。?
? list-item
指定對象為列表項目。?
? inline-block
指定對象為內(nèi)聯(lián)塊元素。（CSS2）?
? table
指定對象作為塊元素級的表格。類同于html標(biāo)簽<table>（CSS2）?
? inline-table
指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）?
? table-caption
指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）?
? table-cell
指定對象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）?
? table-row
指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）?
? table-row-group
指定對象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）?
? table-column
指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2）?
? table-column-group
指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）?
? table-header-group
指定對象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）?
? table-footer-group
指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）?
? run-in
根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）?
? box
將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）?
? inline-box
將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）?
? flexbox
將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）?
? inline-flexbox
將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）?
? flex
將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）?
? inline-flex
將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
總結(jié)
