- 相關(guān)推薦
網(wǎng)站開(kāi)發(fā)面試題
1.解決IE6及更早瀏覽器浮動(dòng)時(shí)產(chǎn)生雙倍邊距的BUG
display:inline
2.如何解決IE6下的文本溢出BUG(行業(yè)內(nèi)稱：多出一只豬)
刪除2個(gè)div之間所有的注釋;不設(shè)置浮動(dòng);調(diào)整2個(gè)div的寬度，比如將寬度調(diào)整為更小一點(diǎn)，刷新頁(yè)面看效果。
3.DIV浮動(dòng)IE文本產(chǎn)生3象素的bug
左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距. #box{
float:left; width:800px;} #left{ float:left; width:50%;}
#right{ width:50%;} *html #left{ margin-right:-3px; //這句是關(guān)鍵}
4.css hack
5.如果這道題出的不是IE6 而是讓你列舉各瀏覽器之間的兼容性解決方法，就要寫死了。。太多太多
二、如果讓一個(gè)div在頁(yè)面中垂直居中(動(dòng)動(dòng)腦子，其實(shí)方法很多，各有利弊)
1.絕對(duì)定位法
2.單行垂直居中(重點(diǎn)是里面的文字是單行)
div {
height:25px;
line-height:25px;
overflow:hidden;
}
3.多行未知高度文字的垂直居中
div {
padding:xxpx; (誰(shuí)都會(huì)吧)
}
4.多行文本固定高度的垂直居中 (IE6不能正確地理解display:table和display:table-cell，所以要
用css hack，想知道為什么這樣做，可以參考
div#wrap父容器 {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap子容器 {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content內(nèi)容 {
_position:relative;
_top:-50%;
}
三、如何讓2個(gè)并列的div自動(dòng)等高(不設(shè)高度)
注：如果能寫出3種常見(jiàn)方法固然最好，但最好寫一下各自優(yōu)缺點(diǎn)，否則面試時(shí)肯定會(huì)問(wèn)你為什么這樣
寫
1、背景模擬法(假高度)，按照尺寸制作背景，平鋪，當(dāng)內(nèi)容增多時(shí)，背景就會(huì)向下縱向重復(fù)，看起
來(lái)就向左右兩個(gè)div都自動(dòng)向下延伸了一樣。
2、表格嵌套法(不難理解，表格都是等高的，就是在div中嵌套表格)
3、內(nèi)外補(bǔ)丁法(最推薦的方法，因?yàn)橹挥胏ss實(shí)現(xiàn)的，但初學(xué)者不易理解)
* { margin:0; padding:0; }
#wrap {
overflow:hidden; (這行代碼是重點(diǎn)，否則你會(huì)看到頁(yè)面很長(zhǎng)很長(zhǎng))
padding:0;
padding-left:180px;(內(nèi)補(bǔ)丁)
}
#left,#right {
height:auto;
margin-bottom:-10000px;(外補(bǔ)丁)
padding-bottom:10000px;(內(nèi)補(bǔ)丁)
}
#left {
display:inline;
float:left;
width:180px;
margin-left:-180px;(外補(bǔ)丁)
background: #0CF;
}
#right{
float:right;
width:100%;
background: #FC6;
}
這里說(shuō)一下內(nèi)外補(bǔ)丁，其實(shí)也沒(méi)那么難理解，我的理解就是相互抵消。多用用margin負(fù)值，你會(huì)了解這
個(gè)原理的。
四、寬度自適應(yīng)三欄的布局方式
三種方法：
1、絕對(duì)定位法(最易理解)
左右兩欄采用絕對(duì)定位，分別固定于頁(yè)面的左右兩側(cè)，中間的主體欄用左右margin值撐開(kāi)距離。于是實(shí)
現(xiàn)了三欄自適應(yīng)布局。
html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}
2、margin負(fù)值法(不易理解)
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
重點(diǎn)是第一個(gè)div是中間的main，且必須套一個(gè)容器。
3、浮動(dòng)法(最常見(jiàn))
html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
重點(diǎn)是中間的main要放在標(biāo)簽最后，缺點(diǎn)是需要用clear:both
五、一小張效果圖，大致內(nèi)容是一個(gè)圖片列表，ul內(nèi)邊距左：10px 右：10px。ul中的li右邊距30px，
但最后一個(gè)li距離ul只有10px，也就是ul有邊框，里面的li圖片列表也有邊框。(這些屬性是定死的，
你不能修改，要求寫出這段css代碼)
這道題，其實(shí)也是考你的內(nèi)外補(bǔ)丁掌握，大致方法是，ul設(shè)置左右內(nèi)邊距后，設(shè)置li的margin負(fù)值，這
樣li在ul的框里就居中了。還有一種比較傻瓜的辦法，設(shè)置li的margin-right:30px的后，最后一個(gè)li
需要改class，把margin-right清掉。
六、談?wù)勀銓?duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)。
這題網(wǎng)上隨便找找都有，大致要點(diǎn):標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用
外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶所訪問(wèn)、內(nèi)
容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件，容易維護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打
印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。
【網(wǎng)站開(kāi)發(fā)面試題】相關(guān)文章：
web前端開(kāi)發(fā)面試題07-12
netcms怎么開(kāi)發(fā)企業(yè)網(wǎng)站07-03
京東商城的網(wǎng)站是哪個(gè)團(tuán)隊(duì)開(kāi)發(fā)的？07-11
網(wǎng)站開(kāi)發(fā)專業(yè)就業(yè)前景06-30