前端進階試題（css部分）

時間 2019-12-15

標籤前端進階試題 css 部分欄目 CSS 简体版

原文原文鏈接

1、css 40分

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>

View Code

效果：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>

View Code

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>

View Code

②接下來看看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>

View Code

參考資料6_1,6_2

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>

View Code

效果：

參考資料

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>

View Code

效果：

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的瀏覽器*/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。