網站開發面試題
1.解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG
display:inline
2.如何解決IE6下的文字溢位BUG(行業內稱:多出一隻豬)
刪除2個div之間所有的註釋;不設定浮動;調整2個div的寬度,比如將寬度調整為更小一點,重新整理頁面看效果。
浮動IE文字產生3象素的bug
左邊物件浮動,右邊採用外補丁的左邊距來定位,右邊物件內的文字會離左邊有3px的間距. #box{
float:left; width:800px;} #left{ float:left; width:50%;}
#right{ width:50%;} *html #left{ margin-right:-3px; //這句是關鍵}
hack
5.如果這道題出的不是IE6 而是讓你列舉各瀏覽器之間的相容性解決方法,就要寫死了。。太多太多
二、如果讓一個div在頁面中垂直居中(動動腦子,其實方法很多,各有利弊)
1.絕對定位法
2.單行垂直居中(重點是裡面的文字是單行)
div {
height:25px;
line-height:25px;
overflow:hidden;
}
3.多行未知高度文字的垂直居中
div {
padding:xxpx; (誰都會吧)
}
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內容 {
_position:relative;
_top:-50%;
}
三、如何讓2個並列的div自動等高(不設高度)
注:如果能寫出3種常見方法固然最好,但最好寫一下各自優缺點,否則面試時肯定會問你為什麼這樣
寫
1、背景模擬法(假高度),按照尺寸製作背景,平鋪,當內容增多時,背景就會向下縱向重複,看起
來就向左右兩個div都自動向下延伸了一樣。
2、表格巢狀法(不難理解,表格都是等高的,就是在div中巢狀表格)
3、內外補丁法(最推薦的方法,因為只用css實現的,但初學者不易理解)
* { margin:0; padding:0; }
#wrap {
overflow:hidden; (這行程式碼是重點,否則你會看到頁面很長很長)
padding:0;
padding-left:180px;(內補丁)
}
#left,#right {
height:auto;
margin-bottom:-10000px;(外補丁)
padding-bottom:10000px;(內補丁)
}
#left {
display:inline;
float:left;
width:180px;
margin-left:-180px;(外補丁)
background: #0CF;
}
#right{
float:right;
width:100%;
background: #FC6;
}
這裡說一下內外補丁,其實也沒那麼難理解,我的理解就是相互抵消。多用用margin負值,你會了解這
個原理的。
四、寬度自適應三欄的佈局方式
三種方法:
1、絕對定位法(最易理解)
左右兩欄採用絕對定位,分別固定於頁面的左右兩側,中間的主體欄用左右margin值撐開距離。於是實
現了三欄自適應佈局。
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負值法(不易理解)
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;}
重點是第一個div是中間的main,且必須套一個容器。
3、浮動法(最常見)
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;}
重點是中間的main要放在標籤最後,缺點是需要用clear:both
五、一小張效果圖,大致內容是一個圖片列表,ul內邊距左:10px 右:10px。ul中的li右邊距30px,
但最後一個li距離ul只有10px,也就是ul有邊框,裡面的li圖片列表也有邊框。(這些屬性是定死的,
你不能修改,要求寫出這段css程式碼)
這道題,其實也是考你的內外補丁掌握,大致方法是,ul設定左右內邊距後,設定li的margin負值,這
樣li在ul的'框裡就居中了。還有一種比較傻瓜的辦法,設定li的margin-right:30px的後,最後一個li
需要改class,把margin-right清掉。
六、談談你對WEB標準以及W3C的理解與認識。
這題網上隨便找找都有,大致要點:標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用
外鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內
容能被更廣泛的裝置所訪問、更少的程式碼和元件,容易維護、改版方便,不需要變動頁面內容、提供打
印版本而不需要複製內容、提高網站易用性。