最基礎的CSS面試題
1.Doctype做用是什麼？嚴格模式與混雜模式分別是如何觸發這兩種模式的，區分它們有何意義？
（1）<!DOCTYPE>聲明位於文檔中的最前面，處於<html>標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。
（2）嚴格模式的排版和JavaScript運做模式是以該瀏覽器支持的最高標準運行。
（3）在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
（4）DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。
2. 行內元素有哪些？塊級元素有哪些？空(void)元素有哪些？
（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，好比div默認display屬性值爲「block」，稱爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。
（2）行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ulol li dl dtdd h1 h2 h3 h4…p
（3）知名的空元素：
<br><hr><img><input><link><meta>
不爲人知的是：
<area><base><col><command><embed><keygen><param><source> <track><wbr>
3. 如何理解CSS的盒子模型？
每一個HTML元素都是長方形盒子。
（1）盒子模型有兩種，IE盒子模型、標準W3C盒子模型；IE的content部分包含了border和pading。
（2）盒模型包含：內容(content)、填充(padding)、邊界(margin)、邊框(border)。
4.link和@import的區別是？
（1）link屬於XHTML標籤，而@import是CSS提供的。
（2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
（3）import只在IE 5以上才能識別，而link是XHTML標籤，無兼容問題。
（4）link方式的樣式權重高於@import的權重。
5.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？CSS 3新增僞類有哪些？
l id選擇器（# myid）
l 類選擇器（.myclassname）
l 標籤選擇器（div、h一、p）
l 相鄰選擇器（h1 + p）
l 子選擇器（ul< li）
l 後代選擇器（li a）
l 通配符選擇器（ * ）
l 屬性選擇器（a[rel = "external"]）
l 僞類選擇器（a: hover, li: nth - child）
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承：border padding margin width height ;
優先級就近原則，樣式定義最近者爲準，載入樣式以最後載入的定位爲準。
優先級爲：
!important > id> class > tag
important 比內聯優先級高
CSS3新增僞類舉例：
l p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p>元素。
l p:last-of-type 選擇屬於其父元素的最後<p>元素的每一個<p>元素。
l p:only-of-type 選擇屬於其父元素惟一的<p>元素的每一個<p>元素。
l p:only-child 選擇屬於其父元素的惟一子元素的每一個<p>元素。
l p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個<p>元素。
l :enabled、:disabled 控制表單控件的禁用狀態。
l :checked 單選框或複選框被選中。
6. 如何居中div，如何居中一個浮動元素？
（1）給div設置一個寬度，而後添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
（2）居中一個浮動元素
肯定容器的寬高，如寬500、高 300的層，設置層的外邊距：
.div {
Width:500px ; height:300px;//高度能夠不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
7. 瀏覽器的內核分別是什麼？常常遇到的瀏覽器的兼容性有哪些？緣由、解決方法是什麼，經常使用Hack的技巧有哪些？
（1）IE瀏覽器的內核Trident、Mozilla的Gecko、Google的WebKit、Opera內核Presto；
（2）常常遇到的瀏覽器的兼容性：
l png24爲的圖片在IE6瀏覽器上出現背景，解決方案是作成PNG8。
l 瀏覽器默認的margin和padding不一樣，解決方案是加一個全局的*{margin:0;padding:0;}來統一。
l IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在IE 6顯示margin比設置的大。
l 浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 100px;}這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入_display:inline;將其轉化爲行內屬性。（_這個符號只有IE 6會識別）。
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用「+」將IE 8和IE 七、IE 6分離開來，這樣IE 8已經獨立識別。
css
.bb{
background-color:#f1ee18; /*全部識別*/
.background-color:#00deff\9; /*IE六、七、8識別*/
+background-color:#a200ff; /*IE六、7識別*/
_background-color:#1e0bd1; /*IE6識別*/
}
（3）經常使用Hack的技巧：
IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統一經過getAttribute()獲取自定義屬性。
IE下，even對象有x,y屬性，可是沒有pageX,pageY屬性；Firefox下，event對象有pageX,pageY屬性，可是沒有x,y屬性。解決方法是條件註釋，缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
Chrome 中文界面下默認會將小於12px的文本強制按照12px顯示，可經過加入 CSS屬性-webkit-text-size-adjust: none;來解決。
超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式再也不具備hover和active了，解決方法是改變CSS屬性的排列順序：
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
8.HTML5\CSS3有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容問題？
HTML5如今已經不是SGML的子集，主要是關於圖像、位置、存儲、地理定位等功能的增長。新特性有：
l 繪畫canvas元素
l 用於媒介回放的 video 和 audio 元素
l 本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
l sessionStorage的數據在瀏覽器關閉後自動刪除
l 語意化更好的內容元素，好比 article、footer、header、nav、section
l 表單控件，calendar、date、time、email、url、search
CSS3實現圓角、，陰影、對文字加特效，增長了更多的CSS選擇器，多背景rgba，新的技術有webworker、websockt、Geolocation。
移除的元素包括：
l 純表現的元素basefont、big、center、font、 s、strike、tt、u；
l 對可用性產生負面影響的元素 frame、frameset、noframes。
瀏覽器兼容問題解決方案：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式，固然最好的方式是直接使用成熟的框架：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
9. 你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做？
l 首先劃分紅頭部、body、腳部；
l 實現效果圖是最基本的工做，精確到2px；
l 與設計師，產品經理的溝通和項目的參與
l 作好的頁面結構，頁面重構和用戶體驗
l 處理Hack兼容，寫出優美的代碼格式
l 針對服務器的優化、擁抱HTML5。
10. 列出display的值，說明它們的做用。position的值裏，relative和absolute定位原點是？
display的值：
l block 像塊類型元素同樣顯示。
l none 缺省值。像行內元素類型同樣顯示。
l inline-block 像行內元素同樣顯示，但其內容像塊類型元素同樣顯示。
l list-item 像塊類型元素同樣顯示，並添加樣式列表標記。
relative和absolute定位原點：
l absolute：生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位。
l relative：生成相對定位的元素，相對於其正常位置進行定位。
11.頁面重構怎麼操做？
把「未採用CSS，大量使用HTML進行定位、佈局，或者雖然已經採用CSS，可是未遵循HTML結構化標準的站點」變成「讓標記迴歸標記的本來意義。經過在HTML文檔中使用結構化的標記以及用CSS控制頁面表現，使頁面的實際內容與它們呈現的格式相分離的站點。」的過程就是網站重構
網站爲何要進行重構（網站重構的好處）
a、使頁面加載得更快速；
b、下降帶寬帶來的費用，節約成本；
c、讓你在修改設計時更有效率而代價更低；
d、幫助你的整個站點保持視覺的一致性；
e、更利於搜索引擎的檢索（符合SEO的規範）；
f、令站點更容易被各類瀏覽器和用戶
編寫 CSS、讓頁面結構更合理化，提高用戶體驗，實現良好的頁面效果和提高性能。
12. 語義化的理解？
l HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
l 在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的；
l 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於SEO。
l 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
13. HTML5的離線儲存？
l localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
l sessionStorage數據在瀏覽器關閉後自動刪除。
14.爲何要初始化CSS樣式？
由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
最簡單的初始化方法就是：* {padding: 0; margin: 0;} （筆者不建議這樣）
淘寶的樣式初始化：
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; }
15. 對BFC規範的理解？
BFC是W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。
16.iframe有哪些缺點？
l iframe會阻塞主頁面的Onload事件；
l iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過JavaScript動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。
17. CSS是怎樣定義權重規則的？
如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：
/*權重爲1*/
div{}
/*權重爲10*/
.class1{}
/*權重爲100*/
#id1{}
/*權重爲100+1=101*/
#id1 div{}
/*權重爲10+1=11*/
.class1 div{}
/*權重爲10+10+1=21*/
.class1 .class2 div{}
若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現。
18.如何理解表現與內容相分離？
表現與結構相分離簡單的說就是HTML中只有標籤元素表現徹底是由CSS文件控制的。
19.如何解決IE6的雙邊距問題？
解決IE 6雙邊距問題塊級元素就加display：inline；行內元素轉塊級元素display：inline後面再加display：table。
20. 如何定義高度爲1px的容器？
div{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
}
IE 6下這個問題是默認行高形成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也能夠解決。
21.如何解決IE 6的3像素問題？
_zoom:1; margin-left: value; _margin-left: value-3px;
22. Firefox下文本沒法撐開容器的高度，如何解決？
清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}
23.怎麼樣才能讓層顯示在Flash之上呢?
解決的辦法是給Flash設置透明屬性
<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
24. cursor:hand在FF下不顯示小手，如何解決？
cursor; pointer;
25.在IE中內容會自適應高度，而FF不會自適應高度，怎麼辦？
在要自適應高度的層中加一個層，樣式爲
.clear{clear:both;font-size:0px;height:1px}，
這樣解決有一個小小的問題，高度會多一個像素。還有一種解決方法，給當前層加上一個僞類。
#test:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
26.前端頁面有哪三層構成，分別是什麼？做用是什麼？
最準確的網頁設計思路是把網頁分紅三個層次，即：結構層、表示層、行爲層。
網頁的結構層（structural layer）由HTML或XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」
網頁的表示層（presentation layer）由CSS負責建立。 CSS對「如何顯示有關內容」的問題作出了回答。
網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是JavaScript語言和DOM主宰的領域。
27.你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼？常常遇到的瀏覽器的兼容性有哪些？怎麼會出現？解決方法是什麼？
這個筆者很少說了，只是簡單說明下，沒有標準答案。兼容性測試參考瀏覽器基準。兼容性問題處理的要點：
（1）DOCTYPE影響CSS處理
（2）盒模型影響CSS處理
（3）知名的空元素：
<br><hr><img><input><link><meta>
不爲人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
3. 如何理解CSS的盒子模型？
每一個HTML元素都是長方形盒子。
（1）盒子模型有兩種，IE盒子模型、標準W3C盒子模型；IE的content部分包含了border和pading。
（2）盒模型包含：內容(content)、填充(padding)、邊界(margin)、邊框(border)。
4. link和@import的區別是？
（1）link屬於XHTML標籤，而@import是CSS提供的。
（2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
（3）import只在IE 5以上才能識別，而link是XHTML標籤，無兼容問題。
（4）link方式的樣式權重高於@import的權重。
5. CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？CSS 3新增僞類有哪些？
l id選擇器（# myid）
l 類選擇器（.myclassname）
l 標籤選擇器（div、h一、p）
l 相鄰選擇器（h1 + p）
l 子選擇器（ul< li）
l 後代選擇器（li a）
l 通配符選擇器（ * ）
l 屬性選擇器（a[rel = "external"]）
l 僞類選擇器（a: hover, li: nth - child）
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承：border padding margin width height ;
優先級就近原則，樣式定義最近者爲準，載入樣式以最後載入的定位爲準。
優先級爲：
!important > id> class > tag
important 比內聯優先級高
CSS3新增僞類舉例：
l p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p>元素。
l p:last-of-type 選擇屬於其父元素的最後<p>元素的每一個<p>元素。
l p:only-of-type 選擇屬於其父元素惟一的<p>元素的每一個<p>元素。
l p:only-child 選擇屬於其父元素的惟一子元素的每一個<p>元素。
l p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個<p>元素。
l :enabled、:disabled 控制表單控件的禁用狀態。
l :checked 單選框或複選框被選中。
6. 如何居中div，如何居中一個浮動元素？
（1）給div設置一個寬度，而後添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
（2）居中一個浮動元素
肯定容器的寬高，如寬500、高 300的層，設置層的外邊距：
.div {
Width:500px ; height:300px;//高度能夠不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
//方便看效果
left:50%;
top:50%;
}
7. 瀏覽器的內核分別是什麼？常常遇到的瀏覽器的兼容性有哪些？緣由、解決方法是什麼，經常使用Hack的技巧有哪些？
（1）IE瀏覽器的內核Trident、Mozilla的Gecko、Google的WebKit、Opera內核Presto；
（2）常常遇到的瀏覽器的兼容性：
l png24爲的圖片在IE6瀏覽器上出現背景，解決方案是作成PNG8。
l 瀏覽器默認的margin和padding不一樣，解決方案是加一個全局的*{margin:0;padding:0;}來統一。
l IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在IE 6顯示margin比設置的大。
l 浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 100px;}這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入_display:inline;將其轉化爲行內屬性。（_這個符號只有IE 6會識別）。
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用「+」將IE 8和IE 七、IE 6分離開來，這樣IE 8已經獨立識別。
css
.bb{
/*全部識別*/
. /*IE六、七、8識別*/
+ /*IE六、7識別*/
_ /*IE6識別*/
}
（3）經常使用Hack的技巧：
IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統一經過getAttribute()獲取自定義屬性。
IE下，even對象有x,y屬性，可是沒有pageX,pageY屬性；Firefox下，event對象有pageX,pageY屬性，可是沒有x,y屬性。解決方法是條件註釋，缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
Chrome 中文界面下默認會將小於12px的文本強制按照12px顯示，可經過加入 CSS屬性-webkit-text-size-adjust: none;來解決。
超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式再也不具備hover和active了，解決方法是改變CSS屬性的排列順序：
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
8. HTML5\CSS3有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容問題？
HTML5如今已經不是SGML的子集，主要是關於圖像、位置、存儲、地理定位等功能的增長。新特性有：
l 繪畫canvas元素
l 用於媒介回放的 video 和 audio 元素
l 本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
l sessionStorage的數據在瀏覽器關閉後自動刪除
l 語意化更好的內容元素，好比 article、footer、header、nav、section
l 表單控件，calendar、date、time、email、url、search
CSS3實現圓角、，陰影、對文字加特效，增長了更多的CSS選擇器，多背景rgba，新的技術有webworker、websockt、Geolocation。
移除的元素包括：
l 純表現的元素basefont、big、center、font、 s、strike、tt、u；
l 對可用性產生負面影響的元素 frame、frameset、noframes。
瀏覽器兼容問題解決方案：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式，固然最好的方式是直接使用成熟的框架：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
9. 你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做？
l 首先劃分紅頭部、body、腳部；
l 實現效果圖是最基本的工做，精確到2px；
l 與設計師，產品經理的溝通和項目的參與
l 作好的頁面結構，頁面重構和用戶體驗
l 處理Hack兼容，寫出優美的代碼格式
l 針對服務器的優化、擁抱HTML5。
10. 列出display的值，說明它們的做用。position的值裏，relative和absolute定位原點是？
display的值：
l block 像塊類型元素同樣顯示。
l none 缺省值。像行內元素類型同樣顯示。
l inline-block 像行內元素同樣顯示，但其內容像塊類型元素同樣顯示。
l list-item 像塊類型元素同樣顯示，並添加樣式列表標記。
relative和absolute定位原點：
l absolute：生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位。
l relative：生成相對定位的元素，相對於其正常位置進行定位。
11. 頁面重構怎麼操做？
把「未採用CSS，大量使用HTML進行定位、佈局，或者雖然已經採用CSS，可是未遵循HTML結構化標準的站點」變成「讓標記迴歸標記的本來意義。經過在HTML文檔中使用結構化的標記以及用CSS控制頁面表現，使頁面的實際內容與它們呈現的格式相分離的站點。」的過程就是網站重構
網站爲何要進行重構（網站重構的好處）
a、使頁面加載得更快速；
b、下降帶寬帶來的費用，節約成本；
c、讓你在修改設計時更有效率而代價更低；
d、幫助你的整個站點保持視覺的一致性；
e、更利於搜索引擎的檢索（符合SEO的規範）；
f、令站點更容易被各類瀏覽器和用戶
編寫 CSS、讓頁面結構更合理化，提高用戶體驗，實現良好的頁面效果和提高性能。
12. 語義化的理解？
l HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
l 在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的；
l 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於SEO。
l 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
13. HTML5的離線儲存？
l localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
l sessionStorage數據在瀏覽器關閉後自動刪除。
14. 爲何要初始化CSS樣式？
由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
最簡單的初始化方法就是：* {padding: 0; margin: 0;} （筆者不建議這樣）
淘寶的樣式初始化：
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; }
15. 對BFC規範的理解？
BFC是W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。
16. iframe有哪些缺點？
l iframe會阻塞主頁面的Onload事件；
l iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過JavaScript動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。
17. CSS是怎樣定義權重規則的？
如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：
/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
}
若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現。
18. 如何理解表現與內容相分離？
表現與結構相分離簡單的說就是HTML中只有標籤元素表現徹底是由CSS文件控制的。
19. 如何解決IE6的雙邊距問題？
解決IE 6雙邊距問題塊級元素就加display：inline；行內元素轉塊級元素display：inline後面再加display：table。
20. 如何定義高度爲1px的容器？
div{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
}
IE 6下這個問題是默認行高形成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也能夠解決。
21. 如何解決IE 6的3像素問題？
_zoom:1; margin-left: value; _margin-left: value-3px;
22. Firefox下文本沒法撐開容器的高度，如何解決？
清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}
23. 怎麼樣才能讓層顯示在Flash之上呢?
解決的辦法是給Flash設置透明屬性
<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
24. cursor:hand在FF下不顯示小手，如何解決？
cursor; pointer;
25. 在IE中內容會自適應高度，而FF不會自適應高度，怎麼辦？
在要自適應高度的層中加一個層，樣式爲
.clear{clear:both;font-size:0px;height:1px}，
這樣解決有一個小小的問題，高度會多一個像素。還有一種解決方法，給當前層加上一個僞類。
#test:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
26. 前端頁面有哪三層構成，分別是什麼？做用是什麼？
最準確的網頁設計思路是把網頁分紅三個層次，即：結構層、表示層、行爲層。
網頁的結構層（structural layer）由HTML或XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」
網頁的表示層（presentation layer）由CSS負責建立。 CSS對「如何顯示有關內容」的問題作出了回答。
網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是JavaScript語言和DOM主宰的領域。
27. 你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼？常常遇到的瀏覽器的兼容性有哪些？怎麼會出現？解決方法是什麼？
這個筆者很少說了，只是簡單說明下，沒有標準答案。兼容性測試參考瀏覽器基準。兼容性問題處理的要點：
（1）DOCTYPE影響CSS處理
（2）盒模型影響CSS處理
相關文章
- 1. 基礎面試題——HTML/CSS
- 2. css基礎面試題
- 3. CSS基礎試題
- 4. 前端基礎面試題@CSS篇
- 5. 前端基礎面試題之CSS篇
- 6. 26 個 CSS 面試題目加強你的 CSS 基礎
- 7. 最基礎、最全面的iOS面試題目
- 8. 2019年php最新基礎面試題
- 9. python基礎面試題(全網最全!)
- 10. 2019年Java最新基礎面試題
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • PHP Ajax 跨域問題最佳解決方案
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基礎面試題——HTML/CSS
- 2. css基礎面試題
- 3. CSS基礎試題
- 4. 前端基礎面試題@CSS篇
- 5. 前端基礎面試題之CSS篇
- 6. 26 個 CSS 面試題目加強你的 CSS 基礎
- 7. 最基礎、最全面的iOS面試題目
- 8. 2019年php最新基礎面試題
- 9. python基礎面試題(全網最全!)
- 10. 2019年Java最新基礎面試題