前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）
前端頁(yè)面有哪三層構(gòu)成，分別是什么？作用是什么？
1、結(jié)構(gòu)層：由 HTML 或 XHTML 之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建，僅負(fù)責(zé)語(yǔ)義的表達(dá)。解決了頁(yè)面“內(nèi)容是什么”的問題。
2、表示層：由CSS負(fù)責(zé)創(chuàng)建，解決了頁(yè)面“如何顯示內(nèi)容”的問題。
3、行為層：由腳本負(fù)責(zé)。解決了頁(yè)面上“內(nèi)容應(yīng)該如何對(duì)事件作出反應(yīng)”的問題。
css的基本語(yǔ)句構(gòu)成是什么？
選擇符{屬性1:值1;屬性2:值2;...}等。
主流的瀏覽器分別是什么內(nèi)核？
IE：Trident內(nèi)核
Mozilla FireFox：Gecko內(nèi)核
Chrome、Safari：Webkit內(nèi)核
Opera：Presto內(nèi)核
經(jīng)常遇到的瀏覽器兼容性有哪些？如何解決？
1、瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
2、IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。解決方案是在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。測(cè)試代碼如下：
<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>正常的應(yīng)該是：
但在IE6中是這樣的：
加上display:inline;后才正常。
3、在ie6，ie7中元素高度超出自己設(shè)置高度。原因是IE8以前的瀏覽器中會(huì)給元素設(shè)置默認(rèn)的行高的高度導(dǎo)致的。解決方案是加上overflow:hidden或設(shè)置line-height為更小的高度。測(cè)試代碼：
.one{height:5px;width:100px;background:#F60; }HTML沒變，還是<div class="one"></div>，在IE6下顯示為：
這個(gè)一看就知道不止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設(shè)置的值。
5、透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6;
6、a(有href屬性)標(biāo)簽嵌套下的img標(biāo)簽，在IE下會(huì)帶有邊框。解決辦法是加上a img{border:none;}樣式。
7、input邊框問題。去掉input邊框一般用border:none;就可以，但由于IE6在解析input樣式時(shí)的BUG(優(yōu)先級(jí)問題)，在IE6下無效。
ie6的默認(rèn)CSS樣式，涉及到border的有border-style:inset;border-width:2px;瀏覽器根據(jù)自己的內(nèi)核解析規(guī)則，先解析自身的默認(rèn)CSS，再解析開發(fā)者書寫的CSS，達(dá)到渲染標(biāo)簽的目的。IE6對(duì)INPUT的渲染存在bug，border:none;不被解析，當(dāng)有border-width或border-color設(shè)置的時(shí)候才會(huì)令I(lǐng)E6去解析border-style:none;。
解決方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推薦用第三種方案。
8、父子標(biāo)簽間用margin的問題，表現(xiàn)在有時(shí)除IE(6/7)外的瀏覽器子標(biāo)簽margin轉(zhuǎn)移到了父標(biāo)簽上，IE6&7下沒有轉(zhuǎn)移。測(cè)試代碼：
<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 下的效果：
對(duì)于這兩種顯示效果，我倒認(rèn)為IE6&IE7是正確的，不知道是否有朋友能給出解釋。
解決辦法就是父子標(biāo)簽間的間隔建議用padding，兄弟標(biāo)簽間用margin。
9、假設(shè)兩塊div，第一塊浮動(dòng)而第二塊沒有浮動(dòng)，IE6下第二塊就會(huì)跑到第一塊邊上，并且二者之間還留有間距，但標(biāo)準(zhǔn)瀏覽器中是第二塊重合于第一塊。測(cè)試代碼：
<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>正常應(yīng)該是：
IE6中是：
解決辦法是改變?cè)O(shè)計(jì)思路，如果真有兩個(gè)div重合的需求，可以用下面的代碼實(shí)現(xiàn)：
<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、父子關(guān)系的標(biāo)簽，子標(biāo)簽浮動(dòng)導(dǎo)致父標(biāo)簽不再包裹子標(biāo)簽。測(cè)試代碼：
<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下都是下面的效果：
可以看到父元素并沒有包裹子元素，這是因?yàn)閒loat造成的，解決方案是清除浮動(dòng)就行了，用下面的代碼可以解決：
<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>現(xiàn)在效果是：
最后關(guān)于float力薦兩篇文章：CSS float浮動(dòng)的深入研究、詳解及拓展(一)、CSS float浮動(dòng)的深入研究、詳解及拓展(二)
如何居中一個(gè)浮動(dòng)元素?
父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)右移動(dòng)50%，或者子元素相對(duì)左移動(dòng)-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、對(duì)各個(gè)項(xiàng)目中CSS，JS里的穩(wěn)定的通用代碼進(jìn)行提取，形成公共文件，然后利用CDN等資源進(jìn)行緩存，減輕服務(wù)器壓力。
2、去掉JS、CSS里的冗余代碼，對(duì)代碼進(jìn)行精減。
3、對(duì)JS、CSS進(jìn)行壓縮合并，減少請(qǐng)求次數(shù)。
4、對(duì)頁(yè)面上的小圖標(biāo)，背景等圖片進(jìn)行合并，減少請(qǐng)求次數(shù)。
5、JS、CSS、圖片均用版本控制工具進(jìn)行管理，方便修改與恢復(fù)。
我能想到的就這么多，請(qǐng)大家繼續(xù)補(bǔ)充。
小結(jié)
以上總結(jié)只是依據(jù)本人目前的水平給出的自己的看法，不確保嚴(yán)格正確，如果有誤歡迎大家指出。
以上題目主要是選自淘寶2011年HTML&CSS面試題的剩余幾題。如果大家有什么好的前端面試題，歡迎提供。
轉(zhuǎn)載于:https://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html
總結(jié)
以上是生活随笔為你收集整理的前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机应用在线打包url
- 下一篇： 开发HTML5手机游戏的5个注意要点--