前端进阶试题（css部分）

一、css 40分

1. 什么是盒模型？

答：前端进阶试题（css部分）

2. Doctype的几种类型？

答：①.过渡的；②.严格的；③.框架的更多详细介绍参考：资料

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