前端頁面有哪三層構成，分別是什么？作用是什么？
1、結構層：由 HTML 或 XHTML 之類的標記語言負責創建，僅負責語義的表達。解決了頁面“內容是什么”的問題。
2、表示層：由CSS負責創建，解決了頁面“如何顯示內容”的問題。
3、行為層：由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。
css的基本語句構成是什么？
選擇符{屬性1:值1;屬性2:值2;...}等。
主流的瀏覽器分別是什么內核？
IE：Trident內核
Mozilla FireFox：Gecko內核
Chrome、Safari：Webkit內核
Opera：Presto內核
經常遇到的瀏覽器兼容性有哪些？如何解決？
1、瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
2、IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。解決方案是在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性。測試代碼如下：
<html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .one{ float: left; width: 150px; height:150px; background:#EEE; margin: 5px 0 5px 150px; } </style> </head> <body> <div class="one">Double Margin Bug(150*150)</div> </body> </html>
正常的應該是：
但在IE6中是這樣的：
加上display:inline;后才正常。
3、在ie6，ie7中元素高度超出自己設置高度。原因是IE8以前的瀏覽器中會給元素設置默認的行高的高度導致的。解決方案是加上overflow:hidden或設置line-height為更小的高度。測試代碼：
.one{ height:5px; width:100px; background:#F60; }
HTML沒變，還是<div class="one"></div>，在IE6下顯示為：
這個一看就知道不止5px，CSS改為下面兩種之一就可以了：
.one{ height:5px; width:100px; overflow:hidden; background:#F60; } /*--或--*/ .one{ height:5px; width:100px; font-size:2px; line-height:2px; background:#F60; }
注意這里加了line-height:2px后還要加上font-size才行。效果如圖：
4、min-height在IE6下不起作用。解決方案是添加 height:auto !important;height:xxpx;其中xx就是min-height設置的值。
5、透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6;
6、a(有href屬性)標簽嵌套下的img標簽，在IE下會帶有邊框。解決辦法是加上a img{border:none;}樣式。
7、input邊框問題。去掉input邊框一般用border:none;就可以，但由於IE6在解析input樣式時的BUG(優先級問題)，在IE6下無效。
ie6的默認CSS樣式，涉及到border的有border-style:inset;border-width:2px;瀏覽器根據自己的內核解析規則，先解析自身的默認CSS，再解析開發者書寫的CSS，達到渲染標簽的目的。IE6對INPUT的渲染存在bug，border:none;不被解析，當有border-width或border-color設置的時候才會令IE6去解析border-style:none;。
解決方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推薦用第三種方案。
8、父子標簽間用margin的問題，表現在有時除IE(6/7)外的瀏覽器子標簽margin轉移到了父標簽上，IE6&7下沒有轉移。測試代碼：
<body> <style type="text/css"> .box1{ height:150px; background:#CCC; } .box1_1{ height:50px; margin-top:50px; background:#AAA; } </style> <div class="box1"> <div class="box1_1">box1_1</div> </div> </body>
chrome & FireFox & IE8 & IE9下的效果為：
IE6 & IE7 下的效果：
對於這兩種顯示效果，我倒認為IE6&IE7是正確的，不知道是否有朋友能給出解釋。
解決辦法就是父子標簽間的間隔建議用padding，兄弟標簽間用margin。
9、假設兩塊div，第一塊浮動而第二塊沒有浮動，IE6下第二塊就會跑到第一塊邊上，並且二者之間還留有間距，但標准瀏覽器中是第二塊重合於第一塊。測試代碼：
<body> <style type="text/css"> div{ width:100px; height:100px; border:1px solid #CCC; } .one{ float:left; height:50px; } </style> <div class="one">One</div> <div class="two">Two</div> </body>
正常應該是：
IE6中是：
解決辦法是改變設計思路，如果真有兩個div重合的需求，可以用下面的代碼實現：
<body> <style type="text/css"> div{ width:100px; height:100px; border:1px solid #CCC; } .parent{ position:relative; } .one{ position:absolute; left:0; top:0; } </style> <div class="parent"> <div class="one">One</div> <div class="one">Two</div> </div> </body>
10、父子關系的標簽，子標簽浮動導致父標簽不再包裹子標簽。測試代碼：
<body> <style type="text/css"> .parent{ background:#888; border:5px solid #888; } .one{ float:left; width:100px; height:100px; background:#F60; } </style> <div class="parent"> <div class="one">One</div> </div> </body>
在IE、Chrome、Firefox下都是下面的效果：
可以看到父元素並沒有包裹子元素，這是因為float造成的，解決方案是清除浮動就行了，用下面的代碼可以解決：
<body> <style type="text/css"> .parent{ background:#888; border:5px solid #888; zoom:1;/*--for IE--*/ } .parent:after{ /*--for other broswer--*/ content:"."; display:block; line-height:0; clear:both; visibility:hidden; } .one{ float:left; width:100px; height:100px; background:#F60; } </style> <div class="parent"> <div class="one">One</div> </div> </body>
現在效果是：
最后關於float力薦兩篇文章：CSS float浮動的深入研究、詳解及拓展(一)、CSS float浮動的深入研究、詳解及拓展(二)
如何居中一個浮動元素?
父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對右移動50%，或者子元素相對左移動-50%也就可以了。
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta charset="utf-8"/> <style type="text/css"> .p{ position:relative; left:50%; float:left; } .c{ position:relative; float:left; right:50%; } </style> </head> <body> <div class="p"> <h1 class="c">Test Float Element Center</h1> </div> </body> </html>
你如何管理CSS文件、JS與圖片？
1、對各個項目中CSS，JS里的穩定的通用代碼進行提取，形成公共文件，然后利用CDN等資源進行緩存，減輕服務器壓力。
2、去掉JS、CSS里的冗余代碼，對代碼進行精減。
3、對JS、CSS進行壓縮合並，減少請求次數。
4、對頁面上的小圖標，背景等圖片進行合並，減少請求次數。
5、JS、CSS、圖片均用版本控制工具進行管理，方便修改與恢復。
我能想到的就這么多，請大家繼續補充。
小結
以上總結只是依據本人目前的水平給出的自己的看法，不確保嚴格正確，如果有誤歡迎大家指出。
以上題目主要是選自淘寶2011年HTML&CSS面試題的剩余幾題。如果大家有什么好的前端面試題，歡迎提供。