1. 什麼是盒模型?css
答:html
2. Doctype的幾種類型?web
答:①.過渡的;②.嚴格的;③.框架的 更多詳細介紹參考:資料算法
3. 如何佈局左不動右邊自適應的兩列布局?瀏覽器
答:兩種簡單的方法:position:absolute;和float: left; 兩種效果是同樣的,代碼:框架
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>1</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 #left { 13 position:absolute; 14 /*float: left;*/ /*這兩個有什麼區別,後面要更進下*/ 15 background-color: green; 16 width: 220px; 17 } 18 19 #content { 20 background-color: orange; 21 margin-left: 220px;/*==等於左邊欄寬度==*/ 22 } 23 </style> 24 25 </head> 26 <body> 27 <div id="left">Left sidebar</div> 28 <div id="content">Main Content</div> 29 </body> 30 </html>
效果:ide
5.如何佈局右側定寬,左側或中間自適應?佈局
答:代碼實現以下:post
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>右側定寬,左側自適應寬</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #content { 12 width: 100%; 13 color: red; 14 float: left; 15 background:#666; 16 height:400px; 17 margin-right: -230px;/*==等於右側欄寬度==*/ 18 } 19 #side{ 20 width:230px;/*==等於右側欄寬度==*/ 21 height:500px; 22 color:#fff; 23 background:green; 24 float: left; 25 } 26 </style> 27 28 </head> 29 <body> 30 <div id="content">Main Content</div> 31 <div id="side"></div> 32 </body> 33 </html>
6. 如何佈局三列自適應?性能
答:
①用postion:absoloute屬性,左右定寬100px,中間寬度自適應,這裏能否將postion:absoloute屬性直接換成float:left屬性,由於上面有一個例子,就感受這兩個屬性差很少,其實是不能夠的。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE>左右定寬100px,中間寬度自適應</TITLE> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <style type="text/css"> 7 .container{ 8 width:100%; 9 position:relative;/*absolute是基於整個屏幕,它的父級元素若是設置 relative ,那就就是基於它的父元素的左上角計算*/ 10 height:100%; 11 overflow:auto;/*若是內容被修剪,則瀏覽器會顯示滾動條以便查看其他的內容。*/ 12 } 13 .left_a{ 14 width:100px; 15 position:absolute; 16 left:0px; 17 top:0px; 18 background-color:green; 19 height:100%; 20 } 21 .main{ 22 position:absolute; 23 width:100%; 24 height:100%; 25 background-color:#CCCCCC; 26 left:100px; 27 right:100px;/*左右定寬100px*/ 28 top:0px; 29 } 30 .right_b{ 31 width:100px; 32 position:absolute; 33 right:0px; 34 top:0px; 35 background-color:red; 36 height:100%; 37 } 38 </style> 39 </HEAD> 40 41 <BODY> 42 <div class="container"> 43 <div class="left_a">leftaaaa</div> 44 <div class="main"> 45 maincontent 46 </div> 47 <div class="right_b">rightbbbb</div> 48 </div> 49 </BODY> 50 </HTML>
②接下來看看float:left屬性怎麼用,感受沒有上面例子用得好:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE>左右定寬100px,中間寬度自適應</TITLE> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <style type="text/css"> 7 #container{ 8 padding-left:100px;/*LCwidth*/ 9 padding-right:100px;/*RCwidth*/ 10 } 11 .column{ 12 float:left; 13 position:relative; 14 } 15 #center{ 16 width:100%; 17 height: 100%; 18 background-color: green; 19 } 20 #left{ 21 width:100px;/*LCwidth*/ 22 height: 100%; 23 margin-left: -100%; 24 background-color: red; 25 right:100px;/*LCwidth*/ 26 } 27 #right{ 28 width:100px;/*RCwidth*/ 29 height: 100%; 30 background-color: black; 31 margin-right:-100px; 32 } 33 #footer{ 34 clear:both; 35 } 36 </style> 37 </HEAD> 38 39 <BODY> 40 <div class="header"></div> 41 <div id="container"> 42 <div id="center" class="column"></div> 43 <div id="left" class="column">maincontent</div> 44 <div id="right" class="column"></div> 45 </div> 46 <div class="footer"></div> 47 </BODY> 48 </HTML>
7. gif,png,jpg的區別?
答:咱們在web頁面中所使用的JPG、PNG、GIF格式的圖像都是位圖,即他們都是經過記錄像素點的數據來保存和顯示圖像,但這些不一樣格式的圖像在記錄這些數據時的方式卻不同,這就是涉及到有損壓縮和無損壓縮的區別。
PNG就是爲取代GIF而生的,並且PNG的壓縮算法也要優於GIF。
參考資料
8. 什麼是css sprite?優缺點?
答:CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的「background-image」,「background- repeat」,「background-position」的組合進行背景定位,background-position能夠用數字精確的定位出背景圖片的位置。
優勢: 減小網頁的http請求,從而大大的提升頁面的性能。
缺點:在圖片合併的時候,你要把多張圖片有序的合理的合併成一張圖片,還要留好足夠的空間,防止板塊內出現沒必要要的背景。
例子:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE>8</TITLE> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <style type="text/css"> 7 #skyline{ 8 width: 400px; 9 background-image: url(test8.jpg); 10 height: 200px; 11 position: relative; 12 margin: auto; 13 padding: 0; 14 } 15 #skyline li{ 16 margin: 0; 17 padding: 0; 18 list-style-type: none; 19 position: absolute; 20 top: 0; 21 } 22 #skyline li,#skyline a{ 23 height: 200px; 24 display: block; 25 } 26 #panel1b {left: 0; width: 95px;} 27 #panel2b {left: 96px; width: 75px;} 28 #panel3b {left: 172px; width: 110px;} 29 #panel4b {left: 283px; width: 117px;} 30 #panel1b a:hover { 31 background: transparent url(test8.jpg) 0 -200px no-repeat; 32 } 33 #panel2b a:hover { 34 background: transparent url(test8.jpg) -96px -200px no-repeat; 35 } 36 #panel3b a:hover { 37 background: transparent url(test8.jpg) -172px -200px no-repeat; 38 } 39 #panel4b a:hover { 40 background: transparent url(test8.jpg) -283px -200px no-repeat; 41 } 42 </style> 43 </HEAD> 44 45 <BODY> 46 <ul id="skyline"> 47 <li id="panel1b"><a href="#1"></a></li> 48 <li id="panel2b"><a href="#2"></a></li> 49 <li id="panel3b"><a href="#3"></a></li> 50 <li id="panel4b"><a href="#4"></a></li> 51 </ul> 52 </BODY> 53 </HTML>
效果:
參考資料
10. 製做細線表格?
答:這裏的考點應該是這個屬性的用法border-collapse:collapse;
代碼例子:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE>左右定寬100px,中間寬度自適應</TITLE> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <style type="text/css"> 7 table,tr,th { 8 border-collapse:collapse; /* 關鍵屬性:合併表格內外邊框(其實表格邊框有2px,外面1px,裏面還有1px哦) */ 9 border:1px solid #999; /* 設置邊框屬性:邊框寬度1px、樣式(solid=實線)、顏色(#999=灰) */ 10 } 11 </style> 12 </HEAD> 13 14 <BODY> 15 <table> 16 <caption>我的信息表</caption> 17 <thead> 18 <tr><th>姓名</th><th>年齡</th><th>性別</th></tr> 19 </thead> 20 <tbody> 21 <tr><th>ww</th><th>11</th><th>男</th></tr></thead> 22 <tr><th>ff</th><th>22</th><th>男</th></tr></thead> 23 <tr><th>zz</th><th>33</th><th>男</th></tr></thead> 24 </tbody> 25 </table> 26 </BODY> 27 </HTML>
效果:
11. position:relative,absolute,fixed區別與聯繫?
答:postion一共有四個可選屬性:static|relative|absolute|fixed,默認是static。下面看看relative,absolute,fixed以前的區別和聯繫。
一:relative
①例子:
這個效果將是:
設置了relative的屬性後
這個效果將是:
從例子中能夠看出:relative會致使自身位置的相對變化,但不會影響其它元素的位置、大小。
②relative產生一個新的定位上下文,和absolute用法會產生聯繫
例子:
效果:
二:absolute
在介紹relative的第二個例子時已經提到absolute屬性,繼續沿着上面的例子來介紹absolute
例子:
效果:
從上面能夠看出absolute三個特色:
①absolute元素脫離了文檔結構(和float元素相似,float元素也會脫離文檔結構),和relative不一樣,其餘三個元素的位置從新排列了。只要元素會脫離文檔結構,它就會產生破壞性,致使父元素坍塌。
②absolute元素具備「包裹性」。以前<p>的寬度是撐滿整個屏幕的,而此時<p>的寬度恰好是內容的寬度。
③absolute元素具備「跟隨性」。沒有設置top、left的值時,與其前一個元素的top,left值爲0。
例子:
效果:
這裏突出了absolute元素具備「懸浮」效果
若是爲absolute設置了top、left,absolute元素會根據最近的定位上下文肯定位置,瀏覽器會遞歸查找該元素的全部父元素,若是找到一個設置了position:relative/absolute/fixed的元素,就以該元素爲基準定位,若是沒找到,就以瀏覽器邊界定位。以下兩個圖所示:
三:fixed
其實fixed和absolute是同樣的,惟一的區別在於:absolute元素是根據最近的定位上下文肯定位置,而fixed永遠根據瀏覽器肯定位置
參考資料
12. 如何居中一個float:left的元素?
答:
例子1:
效果:
例子2:
效果跟例子1是同樣的。
13. Css在各瀏覽器下的兼容問題你一般是怎麼來解決的,請分享你的經驗;
答:印象深的是:
①div垂直居中問題vertical-align:middle;將行距增長到和整個DIV同樣高 line-height; 而後插入文字,就垂直居中了。
②IE8不支持:last-child(匹配屬於其父元素的最後一個子元素的每一個元素),這個選擇器通常在哪裏能夠用到呢?個人經驗是在作這個導航效果
時用到li元素,本想經過
來使最後一個列顯示爲空,不過實際狀況是IE8不支持這個選擇器,最後頁面在li的最後一個元素加了一個class
③Opacity透明度兼容處理
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的瀏覽器*/