前端面试常考系列四
轉載自??前端面試常考系列四
一、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)
總結