1.內聯元素如何轉化成為塊元素
<span style="display:block">內聯變塊</span>
2.元素類型有哪些？他們的特征分別是什么？
內聯元素、塊元素、內聯塊元素
內聯元素特征：（1）不支持寬高，寬高由內容撐開
（2）一行上可以顯示同類的標簽
（3）不支持上下的margin
（4）代碼換行被解析
塊元素特征：（1）未設置寬高時，獨占一行
（2）支持所有的css命令
3.清浮動有哪些方法？你最喜歡哪個?為什么
（1）加寬高---------擴展性不好
（2）父級浮動--------margin失效
（3）inline-block---------margin左右auto失效
（4）空標簽---------在IE下有問題
（5）br-------不符合要求
（6）after偽類-------（最喜歡的方法）可符合大部分的需求
注意：在IE6下還要加div{*zoom:1;}
4.什么是BFC？如何才能得到一個BFC
BFC----標準瀏覽器
a、float的值不為none
b、overflow的值不為visible
c、display的值為table-cell,table-caption,inline-block中的其中一個
d、position的值不為relitive,static
e、width|height|min-width|min-height(!auto)
5.Positon的值有哪些？
absolute---絕對定位；relative---相對定位；fixed---相對定位；static---默認值；
z-index:[數字]---定位層級
6.說一下絕對定位，相對定位和固定定位的區別
相對定位：a、不影響元素本身的特性
b、不使元素脫離文檔流
c、無定位偏移量，無作用
d、提高層級
絕對定位：a、使元素完全脫離文檔流
b、使內嵌支持寬高
c 、塊屬性標簽內容撐開高度
d、如果有定位父級相對于定位父級發生相對偏移，無定位父級相對于 document發生偏移
e、相對定位一般配合絕對定位使用
f、提高層級
固定定位：與絕對定位特性基本一致，區別是始終相對整個文檔進行定位
問題：IE6不支持固定定位
7.怎么改變一個div的層級，寫出代碼讓DIV1在DIV2在下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
.div1{width:200px;height:200px;background:yellow;
position:absolute;z-index:-1;}
.div2{width:100px;height:100px;background:green;
position:absolute;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
8.如何實現層疊的DIV1與DIV2，上面DIV1不透明下面DIV2透明？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
div{width:200px;height:200px;}
.box{
margin:100px auto;
position:relative;}
.div1{
position:absolute;
background:blue;
left:-6px;top:-6px;
z-index:2;
}
.div2{
position:absolute;
background:black;
right:-6px;
bottom:-6px;
z-index:1;
opacity:0;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
9.合并行屬性，合并列屬性
<td colspan = "2"></td>
<td rowspan = "2"></td>
10.讓DIV水平垂直居中
編程1：
方法一：（定位）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
.div1{width:100px;height:100px;background:yellow;
position:absolute;}
.div2{width:100px;height:100px;background:green;
position:absolute;left:100px;}
.div3{width:100px;height:100px;background:pink;
position:absolute;left:200px;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
方法2：（inlineblock類型轉換）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
span{
width:100px;height:100px;background:pink;
display:inline-block;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
方法三：（浮動）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
div{
width:100px;
height:100px;
background:pink;
float:left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
問題二：(沒做出來)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
.box{width:267px;height:1165px;padding:20px #FFF;}
.title1,.title2{display:inline-block;}
.title1{width:29px;height:29; border:1px solid #000;border-bottom:none;}
.title2{width:60px;height:20;font:bold normal 20px/40px "宋體"；}
.item1,item2{display:inline-block;}
.item1{width:66px;height:13px;font:bold normal 13px/20px "宋體"; }
.item2{width:58px;height:12;font:bold normal 13px/20px "宋體"；}
.body{background-image:url("img_2.png)" no-repeat;}/*不好使？？？*/
</style>
</head>
<body>
<div class="box">
<div class="title">
<div class="title1">TOP</div>
<div class="title2">排行榜</div>
</div>
<div class="item">
<div class="item1">最新排行</div>
<div class="item2">新課上線</div>
</div>
<div class="body">
<div class="body1"></div>
<div class="body2"></div>
<div class="body3"></div>
<div class="body4"></div>
<div class="body5"></div>
</div>
<div class="footer">
<div class="fotter1"></div>
<div class="fotter2"></div>
<div class="fotter3"></div>
<div class="fotter4"></div>
<div class="fotter5"></div>
</body>
</html>
