前端试题
1、請實現(xiàn)頁面布局，包括頁頭、內(nèi)容區(qū)域、頁腳三部分，其中內(nèi)容區(qū)域為左右分欄，左欄定寬200px、右欄自適應寬度。
知識點 CSS中position屬性的應用：
position:這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是屬于什么類型，相對定位元素會相對于它在正常流中的默認位置偏移。
?
absolute:生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。（left,top,bootom,right）進行規(guī)定。
fixed:生成絕對定位的元素，相對于瀏覽器窗口進行定位。（left top rigt bottom）
relative:生成相對定位，相對于其正常位置進行定位。（left:20表示向元素的LEFT位置添加20像素）
?
static ?默認沒有定位
<!DOCTYPE HTML> <html lang="ch-ZN"> <head> <meta charset="utf-8"> <title>頁頭中間分欄頁腳</title> <style>html,body,header,footer{width:100%;padding:0px; margin:0px;}header,footer{background: red;}#main{padding-left:200px;}#left{width:200px;position:absolute;left:0px;background: green;}#right{width:100%;background: yellow;} </style> </head> <body> <header> 我是頁頭 </header> <div id="main"> <div id="left">我是左邊</div> <div id="right">我是右邊</div> </div> <footer>我是頁腳 </footer> </body> </html>轉載自（http://witmax.cn/css-layout-1.html）
?
最近發(fā)現(xiàn)阿里巴巴的Web前端開發(fā)面試題，共分三部分：CSS部分，JavaScript部分，緊急處理部分，分享給大家做個參考～
第一部分：用CSS實現(xiàn)布局
讓我們一起來做一個頁面
首先，我們需要一個布局。
請使用CSS控制3個div，實現(xiàn)如下圖的布局。
?
本題主要考察三個方面，1. IE6 的 3 像素 BUG；2. 清楚浮動；
1 <!DOCTYPE HTML> 2 <html lang="ch-ZN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>布局</title> 6 <style> 7 div{background:#CCCCCC;} 8 #first{float:left;width:100px; height:150px} 9 #second{clear:left;float:left;margin-top:10px;width:100px;height:150px} 10 #third{zoom:1; width:200px;margin-left:110px;margin-left:107px; height:310px} 11 </style> 12 </head> 13 <body> 14 15 <div id="first"></div> 16 <div id="second"></div> 17 <div id="third"></div> 18 </body> 19 </html>?
float:
loat 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。
clear:
定義和用法
clear 屬性規(guī)定元素的哪一側不允許其他浮動元素。
說明
clear 屬性定義了元素的哪邊上不允許出現(xiàn)浮動元素。在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設置了 clear 屬性的元素）增加上外邊距實現(xiàn)的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
點評：這里我們介紹一下CSS中的Zoom屬性，這個屬性一般不為人知，甚至有些CSS手冊中都查詢不到 其實Zoom屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支持。它可以設置或檢索對象的縮放比例。除此之外，它還有其他一些小作用，比如觸發(fā)ie的hasLayout屬性，清除浮動、清除margin的重疊等。?Zoom的使用方法：?
zoom : normal | number?
normal : 默認值。使用對象的實際尺寸?
number : 百分數(shù) | 無符號浮點實數(shù)。浮點實數(shù)值為1.0或百分數(shù)為100%時相當于此屬性的 normal 值用白話講解就是zoom:后面的數(shù)字即放大的倍數(shù)，可以是數(shù)值，也可以是百分比。如：zoom:1，zoom:120%。而這個屬性只要在IE中才起作用，所以很少用到它的實際用途，而最經(jīng)常用到作用是清除浮動等，如：?
復制代碼 代碼如下:
.border{?
border:1px solid #CCC;?
padding:2px;?
overflow:hidden;?
_zoom:1;?
}?
_zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執(zhí)行zoom:1表示對象的縮放比例，但這里?
overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內(nèi)部浮動。?
同理，還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問題。
CSS中zoom:1的作用?
兼容IE6、IE7、IE8瀏覽器，經(jīng)常會遇到一些問題，可以使用zoom:1來解決，有如下作用：?
觸發(fā)IE瀏覽器的haslayout?
解決ie下的浮動，margin重疊等一些問題。?
比如，本站使用DIV做一行兩列顯示，HTML代碼：?
復制代碼 代碼如下:
<div class="h_mainbox">?
<h2>推薦文章</h2>?
<ul class="mainlist">?
<li><a href="#" style="color:#0000FF" target="_blank">CSS庫吧</a></li>?
<li><a href="#" style="color:#0000FF" target="_blank">原創(chuàng)< /a></li>?
</ul>?
</div>?
CSS代碼：?
復制代碼 代碼如下:
.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}?
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}?
.h_mainbox h2 span { float:right; font-weight:normal;}?
.h_mainbox ul { padding:6px 0px; background:#fff;}?
.mainlist { overflow:auto; zoom:1;}?
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}?
.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常顯示效果了。?
css中的zoom的作用?
1、檢查頁面的標簽是否閉合?
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發(fā)來嵌套的，而他們很容易犯此類問題。?
快捷提示：可以用 Dreamweaver 打開文件檢查，一般沒有閉合的標簽，會黃色背景高亮。?
2、樣式排除法?
有些復雜的頁面也許加載了 N 個外鏈 CSS 文件，那么逐個刪除 CSS 文件，找到 BUG 觸發(fā)的具體 CSS 文件，縮小鎖定的范圍。?
對于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。?
3、模塊確認法?
有時候我們也可以從頁面的 HTML 元素出發(fā)。刪除頁面中不同的 HTML 模塊，尋找到觸發(fā)問題的 HTML 模塊。?
4、檢查是否清除浮動?
其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養(yǎng)成良好的清除浮動的習慣是必要的，推薦使用 無額外 HTML 標簽的清除浮動的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。?
5、檢查 IE 下是否觸發(fā) haslayout?
很多的 IE 下復雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對于處理復雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）?
快捷提示：如果觸發(fā)了 haslayout，IE 的調(diào)試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。?
6、邊框背景調(diào)試法?
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調(diào)試。此方法是最常用的調(diào)試 CSS BUG 的方法之一，對于復雜 BUG 依舊適用。經(jīng)濟實惠還環(huán)保^^?
最后想強調(diào)一點的是，養(yǎng)成良好的書寫習慣，減少額外標簽，盡量語義，符合標準，其實可以為我們減少很多額外的復雜 CSS BUG，更多的時候其實是我們自己給自己制造了麻煩。希望你遠離 BUG ，生活越來越美好。
?
第二部分：用javascript優(yōu)化布局
由于我們的用戶群喜歡放大看頁面
于是我們給上一題的布局做一次優(yōu)化。
當鼠標略過某個區(qū)塊的時候，該區(qū)塊會放大25%，
并且其他的區(qū)塊仍然固定不動。
?
提示：
也許，我們其他的布局也會用到這個放大的效果哦。
可以使用任何開源代碼，包括曾經(jīng)你自己寫的。
關鍵字：javascript、封裝、復用
慚愧啊，用上邊那個布局我怎么也沒把它優(yōu)化出來，硬這頭皮用絕對定位改了布局；
所以樣式改成了這樣
1 <!DOCTYPE HTML> 2 <html lang="ch-ZN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>頁頭中間分欄頁腳</title> 6 <style> 7 body{ margin:0; padding:0} 8 div{background:#CCCCCC; position:absolute} 9 #first{width:100px; height:150px} 10 #second{top:160px;width:100px;height:150px} 11 #third{ width:200px; height:310px; left:110px} 12 13 14 </style> 15 </head> 16 <body> 17 18 <div id="first"></div> 19 <div id="second"></div> 20 21 <div id="third"></div> 22 <script type="text/javascript"> 23 function zoom(id,x,y){ 24 // 設置縮放函數(shù)參數(shù)：容器id、橫向縮放倍數(shù)、縱向縮放倍數(shù)（等比例縮放時也可以設定一個參數(shù)） 25 var obj=document.getElementById(id); // 獲取元素對象值 26 var dW=obj.clientWidth; // 獲取元素寬度 27 var dH=obj.clientHeight; // 獲取元素高度 28 //var oTop=obj.offsetTop; 29 //var oLeft=obj.offsetLeft; 30 obj.onmouseover=function(){ // 鼠標移入 31 this.style.width=dW*x+"px"; // 橫向縮放 32 this.style.height=dH*y+"px"; // 縱向縮放 33 this.style.backgroundColor="#f00"; // 設置調(diào)試背景 34 this.style.zIndex=1; // 設置z軸優(yōu)先 35 } 36 obj.onmouseout=function(){ // 鼠標移出，設回默認值 37 this.style.width=""; 38 this.style.height=""; 39 this.style.padding=""; 40 this.style.backgroundColor=""; 41 this.style.zIndex=""; 42 } 43 } 44 zoom("first",1.25,1.25); 45 zoom("second",1.25,1.25); 46 zoom("third",1.25,1.25); 47 </script> 48 49 </body> 50 </html>?
第三部分：處理緊急情況
好了，我們的頁面完成了。
于是我們將頁面發(fā)布上網(wǎng)。
突然，晴天霹靂，頁面無法訪問了，這時候，你會怎么做？
面試題到此為止，你是否能夠對答如流呢，仔細想一下，然后在翻頁看一下答案。
?
?
第三題也許是JS代碼沒有放在頁面的后面，加載速度慢尚未顯示出來?；蛘呤琼撁娴刂烦鲥e了。
這種情況下，先查看頁面的源代碼，看看有沒有什么問題，然后找后臺技術人員，看是不是服務器或技術方面的問題。
?
（個人認為 1 自己所輸?shù)穆窂绞欠皴e誤，查看源代碼 看看有沒有代碼沒寫好 導致瀏覽器無法加載出頁面，js代碼是否正確加載，這些都查看正確之后 找后臺人員看是不是服務器問題還是路徑問題。）
?
以下為Web前端開發(fā)筆試題集錦之HTML/CSS篇，移步Javascript篇
1，讓一個input的背景顏色變成紅色
| 1 | <input type="text" style="background:red;"/> |
2，div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區(qū)域
div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區(qū)域.思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(position:absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
relative 生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。)
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產(chǎn)生滾動條
(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->
(overflow:元素內(nèi)容溢出元素框時如何呈現(xiàn)。visible,hidden,scroll,auto)不讓瀏覽器產(chǎn)生滾動條，避免頁面出現(xiàn)兩個滾動條
(5)編寫JavaScript，令div2的高度等于頁面可見高度，寬度等于頁面可見寬度，注意，在計算完可見高度height和可見寬度width后，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px
（z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明該屬性設置一個定位元素沿 z 軸的位置軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠）
?
1 <!DOCTYPE HTML> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>前端試題</title> 6 <style> 7 8 html,body{height:100%;width:100%;margin: 0px;padding: 0px;overflow: hidden;} 9 #fullDiv{width:100%;height: 100%;position: absolute;left:0px;top:0px;background: #eee;border: 1px solid red;} 10 #mainDiv{width: 100%;height: 100%;overflow: auto;z-index:999;position: absolute;top: 0px;left: 0px;} 11 #innerDiv{height: 1000px;border:1px solid black;background: #ee0;position: absolute;} 12 13 14 15 </style> 16 </head> 17 18 <body> 19 <div id="fullDiv"></div> 20 <div id="mainDiv"> 21 <div id="innerDiv"> 22 </div> 23 </div> 24 <script > 25 function getBrowerSize(){ 26 if(document.compatMode=="BackCompat"){ 27 cWidth=document.body.scrollWidth; 28 cHeight=document.body.scrollHeight; 29 }else{ 30 cWidth=document.documentElement.scrollWidth; 31 cHeight=document.documentElement.scrollHeight; 32 } 33 return {width:(cWidth-21)+"px",height:(cHeight-4)+"px"}; 34 } 35 36 var floatDiv=document.getElementById("fullDiv"); 37 var size=getBrowerSize(); 38 floatDiv.style.height=size.height; 39 floatDiv.style.width=size.width; 40 41 42 43 </script> 44 45 46 47 48 </body> 49 </html>?
js中的文檔模式-document.compatMode
Posted on?2009年08月13日今天在看框架的時候無意間看到了document.compatMode，經(jīng)過一番資料查找，終于搞懂了。
文檔模式在開發(fā)中貌似很少用到，最常見的是就是在獲取頁面寬高的時候，比如文檔寬高，可見區(qū)域寬高等。
IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對于盒模型的解釋和其他的標準瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當前的文檔渲染方式。
document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標準兼容模式關閉。瀏覽器客戶區(qū)寬度是document.body.clientWidth；CSS1Compat：標準兼容模式開啟。 瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。
那么寫了個準確獲取網(wǎng)頁客戶區(qū)的寬高、滾動條寬高、滾動條Left和Top的代碼：
[code="javascript"]
if (document.compatMode == "BackCompat") {
?? cWidth = document.body.clientWidth;
?? cHeight = document.body.clientHeight;
?? sWidth = document.body.scrollWidth;
?? sHeight = document.body.scrollHeight;
?? sLeft = document.body.scrollLeft;
?? sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
?? cWidth = document.documentElement.clientWidth;
?? cHeight = document.documentElement.clientHeight;
?? sWidth = document.documentElement.scrollWidth;
?? sHeight = document.documentElement.scrollHeight;
?? sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
?? sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
[/code]
參考網(wǎng)址：http://hi.baidu.com/%C9%AE_%CC%C6/blog/item/a323a9df5a67c45d95ee3701.html
更多閱讀：http://www.css88.com/archives/90，http://www.css88.com/archives/149
3，IE、FF下面CSS的解釋區(qū)別
（1） 讓頁面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的設置+text-align:center
（2） ff：不支持濾鏡
ie：支持濾鏡
（3） ff：支持!important
ie支持*，ie6支持_
（4） min-width,min-height
FF支持，IE不支持，IE可以用css expression來替代
（5） Css Expression
FF不支持，IE支持
（6） cursor：hand
IE下可以顯示手指狀，FF下不行
（7） UL的默認padding和margin
IE下ul默認有margin，FF下ul默認有padding
（8） FORM的默認margin
IE下FORM有默認margin，FF下margin默認為0
4，一個定寬元素在瀏覽器（IE6，IE7，Firefox）中橫向居中對齊的布局，請寫出主要的HTML標簽及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數(shù)字，關鍵是margin-left,margin-right為auto)
貼出代碼：
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>讓頁面元素居中（兼容各個瀏覽器）</title> <style> html,body{width:100%;height:100%;margin:0px;padding:0px;} .centerAlign {margin-left:auto;margin-right:auto;text-align:center;width:400px;height:100px;border:1px solid red;} </style> </head> <body> <div>this div will be centerd!</div> </body> </html> |
5，CSS中margin和padding的區(qū)別
margin是元素的外邊框，是元素邊框和相鄰元素的距離
Padding是元素的內(nèi)邊框，是元素邊框和子元素的距離
6，最后一個問題是，如何制作一個combo選項，就是可以輸入可以下拉菜單選擇。
思路：
（1）布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇
（2）編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指
貼出代碼
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=utf-8'> <TITLE>可輸入的下拉框</TITLE> <style type="text/css"> ????.container {position:relative;margin:10px;} ????.container .sel {width:120px;} ????.container .input {width:100px;height:20px;position:absolute;} </style> </HEAD> <BODY> <div> ????<input type="text" id="input"></input> ????<select id="sel"> ????????<option value="選項1">選項1</option> ????????<option value="選項2">選項2</option> ????????<option value="選項3">選項3</option> ????????<option value="選項4">選項4</option> ????</select> </div> <script type="text/javascript"> ????var sel = document.getElementById("sel"); ????var input = document.getElementById("input"); ????sel.onchange = function() { ????????input.value = this.value; ????} </script> </BODY></HTML> |
7，<img>中alt和tittle的區(qū)別
alt：圖片顯示不出來了就提示alt
title：鼠標劃過圖片顯示的提示
8，用css、html編寫一個兩列布局的網(wǎng)頁，要求右側寬度為200px，左側自動擴展。
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>雙列布局，右側定寬</title> <style> ???html,body{width:100%;height:100%;margin:0px;padding:0px;} ???#left {background:#F00; width:100%;position:absolute;padding-right:-200px;} ???#right {background:#0F0; width:200px;position:absolute;right:0px;} ???div {height:100%;} </style> </head> <body> ???<div id="left"></div> ???<div id="right"></div> </body> </html> |
9，解釋document.getElementById(“ElementID”).style.fontSize=”1.5em”
em是相對長度單位，相當于當前對象內(nèi)文本的字體尺寸，如果當前行內(nèi)文本的字體尺寸未被指定，則相對于瀏覽器的默認字體尺寸。
該語句將id為ElementID的元素的字體設置為當前對象內(nèi)文本的字體尺寸的1.5倍
10，Doctype? 嚴格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義? 行內(nèi)元素有哪些？塊級元素有哪些？CSS的盒模型？
DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什么版本，其中的DTD叫文檔類型定義，里面包含了文檔規(guī)則，瀏覽器根據(jù)定義的DTD來解析頁面的標識并展現(xiàn)出來
DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區(qū)分瀏覽器使用嚴格模式還是混雜模式來解析CSS。
嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5只支持混雜模式。
可那個過DOCTYPE聲明來判斷哪種模式被觸發(fā)
（1） 沒有DOCTYPE聲明的網(wǎng)頁采用混雜模式解析
（2） 對使用DOCTYPE聲明的網(wǎng)頁視不同瀏覽器進行解析
（3） 對于瀏覽器不能識別的DOCTYPE聲明，瀏覽器采用嚴格模式解析
（4） 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如
<?xml version=”1.0” encoding=”utf-8”?>，采用混雜模式解析，在IE7，IE8中這條規(guī)則不生效。
(5) 在ie下，如果DOCTYPE之前有任何字符，都會導致它進入混雜模式，如：
<!-- STATUS OK -->區(qū)分這兩種模式可以理解瀏覽器解析CSS的區(qū)別，主要是在盒模式的解釋上。
常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常見的內(nèi)聯(lián)元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內(nèi)邊距，邊框和內(nèi)容，具體來講最里面的內(nèi)容是元素內(nèi)容，直接包圍元素內(nèi)容的是內(nèi)邊距，包圍內(nèi)邊距的是邊框，包圍邊框的是外邊距。內(nèi)邊距，外邊距，邊框默認為0。
11，CSS引入的方式有哪些? link和@import的區(qū)別?
引入css的方式有下面四種
（1） 使用style屬性
（2） 使用style標簽
（3） 使用link標簽
（4） 使用@import引入
Link和@import區(qū)別：
（1） link屬于XHTML標簽，@import是CSS提供的一種方式。Link除了加載CSS外，還可以做很多事情，如定義RSS，rel連接屬性等；@import只能加載CSS
（2） 加載順序不同，當頁面被加載的時候，link加載的CSS隨之加載，而@import引用的CSS會等到頁面完全下載完之后才會加載
（3） 兼容性差別，由于@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題
使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。
12，如何居中一個浮動元素?
一個浮動元素里面包含的元素可以水平居中，原理如下：
讓浮動元素left相對于父元素container右移50%，浮動元素left的子元素left-child相對于left左移50%就可以實現(xiàn)left-child相對于container水平居中
垂直居中類似，不過操作的不是left而是top
貼出代碼：
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>讓浮動元素居中</title> <style> html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;} .container {width:100%;height:100%;position:relative;} .left {width:400px;height:400px;background:#00F;float:left;position:relative;left:50%;top:50%;} .left div {position:relative;left:-50%;top:-50%;background:#F00;width:100%;height:100%;} .clear {clear:both;} </style> </head> <body> <div> <div><div>這是一個浮動的元素</div></div> <div></div> </div> </body> </html> |
13，HTML5和CSS3的了解情況
有所了解
HTML5和CSS3分別是新推出的HTML和CSS規(guī)范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發(fā)出了不少基于他們的應用。
HTML5相對于原來的HTML規(guī)范有一些變化：
（1）DOCTYPE更簡潔
（2）新增了一些語義化標簽，如article,header,footer,dialog等
（3）新增了一些高級標簽，如<vedio>,<audio>,<canvas>
CSS3相對于CSS2也新增了不少功能
（1） 選擇器更加豐富
（2） 支持為元素設置陰影
（3） 無需圖片能提供圓角
14，你怎么來實現(xiàn)下面這個設計圖
（1） 切圖
（2） 布局，采用兩欄布局，分別左浮動
（3） 編寫css代碼
貼出代碼：
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>品致頁面制作</title> <style> html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;} ul,li,span,div,img{padding:0px;margin:0px;} li {list-style:none;margin:0px;padding:0px;} .wrapper {} .fl {float:left;} .nav {width:90px;} .article {width:270px;padding-left:10px;padding-top:8px;} .title {font-size:12px;color:#3366cc;margin:8px 0px;} .title span {margin:0px 2px;} .btn {background:url(img/btn.jpg) no-repeat;width:61px;height:17px;display:block;} .article-list {font-size:12px;zoom:1;} .article-list li.tip{background:url(img/title-bg.jpg) 0px 3px no-repeat ;padding-left:15px;list-style:none;color:#000;} .article-list li.separator{background:url(img/separator.jpg) no-repeat;width:250px;height:3px;margin:4px 0px;display:block;_margin:0px;line-height:3px;_background:url(img/separator.jpg) 0px 5px no-repeat;} .clear {clear:both;overflow:hidden;height:0px;} </style> </head> <body> ???<div> ??????<div> ?????????<div> ????????????<img src="img/logo.jpg" alt="logo"/> ?????????</div> ?????????<div align="center"> ????????????<span>品•致</span> ????????????<span>第11期</span> ?????????</div> ?????????<div align="center"> ????????????<span></span> ?????????</div> ??????</div> ??????<div> ?????????<ul> ????????????<li>老虎伍茲為何被女人“吃掉”？</li> ????????????<li></li> ????????????<li>你必須告訴一聲的九件事</li> ????????????<li></li> ????????????<li>男人，被時尚拋棄的一群？</li> ????????????<li></li> ????????????<li>30天牛奶養(yǎng)生讓你煥發(fā)青春肌膚</li> ????????????<li></li> ????????????<li>你是否曾經(jīng)關注過你的心臟？</li> ????????????<li></li> ?????????</ul> ??????</div> ??????<div></div> ???</div> </body> </html> |
15，css 中id和class如何定義,哪個定義的優(yōu)先級別高?
id：#***，***為HTML中定義的id屬性
class:.***，***為HTML中定義的class屬性
id比class的優(yōu)先級高
16，用html實現(xiàn)如下表格(不如嵌套實用表格)
三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(現(xiàn)場畫表)
使用表格嵌套，源碼如下：
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>品致頁面制作</title> </head> <body> ???<table cellspacing="0" cellpadding="0" border="1" style="width:500px;text-align:center;"> ??????<tr> ?????????<td width="33%">1</td> ?????????<td colspan="2"> ???????????????<table cellspacing="0" cellpadding="0" style="width:100%;text-align:center;" border="1"> ??????????????????<tr> ?????????????????????<td width="55%">2</td> ?????????????????????<td>3</td> ??????????????????</tr> ??????????????????<tr> ?????????????????????<td colspan="2">4</td> ??????????????????</tr> ???????????????</table> ?????????</td> ??????</tr> ??????<tr> ?????????<td width="33%">5</td> ?????????<td width="33%">6</td> ?????????<td>7</td> ??????</tr> ???</table> </body> </html> |
運行結果如下：
17，web標準網(wǎng)站有那些優(yōu)點
（1） Web標準網(wǎng)站結構和布局分離，使網(wǎng)站的訪問和維護更加容易
（2） Web標準網(wǎng)站結構，布局以及頁面訪問都標準化，使網(wǎng)站能在更多的web標準設備中訪問，兼容性更好
（3） Web標準網(wǎng)站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。
來源：http://www.xuchen.name/2010/10/18/HTML,CSS,筆試題.html 修改了個別錯誤
轉載于:https://www.cnblogs.com/huhaibo/p/3618386.html
總結
- 上一篇： 网站SEO文章编辑的事项
- 下一篇： [原]HTML5系列培训一(201403