前端面试常考系列四
轉載自??前端面試常考系列四
一、CSS盒子模型有哪些用處
css中的盒子模型是為了理解div+css模型的定位功能，它利用盒子模型這樣的布局方式代替了傳統的表格布局方式。盒子模型是在學習div+css布局方式中必須要學習的一個模型，通過這個模型可以明白網頁中div和div之間的相對位置是如何布局的。
二、HTML5應用程序緩存和瀏覽器緩存有何區別
應用程序緩存是HTML5?的重要特性之一，提供了離線使用的功能，讓應用程序可以獲取本地的網站內容，例如HTML、CSS圖片以及JavaScript。這個特性可以提高網站性能，它的實現借助于manifest文件，與傳統瀏覽器緩存相比，它不強制用戶訪問的網站內容被緩存。
三、HTML5 Canvas 元素有何作用
HTML5的canvas元素使用JavaScript 在網頁上繪制圖像，優勢在于在于可以直接在HTML上進行圖形操作。?
方法如下 ：
<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選擇器的類型有：
基礎的選擇器、組合選擇器、屬性選擇器、偽類、偽元素
1、基礎的選擇器*
通用元素下選擇器，匹配任何元素。Ex：*{margin:0; padding:0;}
E
標簽選擇器，匹配所有使用E標簽的元素。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
匹配所有鼠標已經按下且未釋放的E元素。
E:hover
匹配鼠標懸停其上的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元素之前插入生成的內容。
E:affter
在E元素之后插入生成的內容。
八、CSS的優先級和計算特殊值有何特殊性
優先級(1)、同類型，同級別的樣式后者先于前者
(2))、ID > 類樣式 > 標簽 > *
(3)、內聯>ID選擇器>偽類>屬性選擇器>類選擇器>標簽選擇器>通用選擇器(*)>繼承的樣式。
(4)、具體 > 泛化的，特殊性即css優先級
(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css文件中，通過link引入或import導入的樣式
(6)、!important 權重最高，比 inline style 還要高。
important > 內嵌 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權重、特殊性計算法：?
?CSS樣式選擇器分為4個等級，a、b、c、d
(1)、如果樣式是行內樣式（通過Style=“”定義），那么a=1，1,0,0,0?
(2)、b為ID選擇器的總數 0,1,0,0?
(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數量。0,0,1,0
(4)、d為標簽、偽元素選擇器的數量 0,0,0,1
(5)、!important 權重最高，比 inline style 還要高。
innerHTML，innerText
十、常見瀏覽器兼容性問題有哪些，如何解決
瀏覽器兼容問題一塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大?
問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度?
問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
不同瀏覽器的標簽默認的外補丁和內補丁不同?
問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug?
問題癥狀：IE6里的間距比超過設置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。
圖片默認有間距
問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注?：?因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）。
標簽最低高度設置min-height不兼容?
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小于一個值（如300px）時。容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
透明度的兼容CSS設置?
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現兼容。
<video> ?標記定義一個視頻
<audio> ?標記定義音頻內容
<source> ?標記定義媒體資源
<canvas> ?標記定義圖片
<embed> ?標記定義外部的可交互的內容或插件比如flash?
十二、display的值各有什么作用
none
隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間?
? inline
指定對象為內聯元素。?
? block
指定對象為塊元素。?
? list-item
指定對象為列表項目。?
? inline-block
指定對象為內聯塊元素。（CSS2）?
? table
指定對象作為塊元素級的表格。類同于html標簽<table>（CSS2）?
? inline-table
指定對象作為內聯元素級的表格。類同于html標簽<table>（CSS2）?
? table-caption
指定對象作為表格標題。類同于html標簽<caption>（CSS2）?
? table-cell
指定對象作為表格單元格。類同于html標簽<td>（CSS2）?
? table-row
指定對象作為表格行。類同于html標簽<tr>（CSS2）?
? table-row-group
指定對象作為表格行組。類同于html標簽<tbody>（CSS2）?
? table-column
指定對象作為表格列。類同于html標簽<col>（CSS2）?
? table-column-group
指定對象作為表格列組顯示。類同于html標簽<colgroup>（CSS2）?
? table-header-group
指定對象作為表格標題組。類同于html標簽<thead>（CSS2）?
? table-footer-group
指定對象作為表格腳注組。類同于html標簽<tfoot>（CSS2）?
? run-in
根據上下文決定對象是內聯對象還是塊級對象。（CSS3）?
? box
將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）?
? inline-box
將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）?
? flexbox
將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）?
? inline-flexbox
將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）?
? flex
將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）?
? inline-flex
將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
總結
