1.內聯元素如何轉換成塊元素？
方法如下：
display:block;
display:inline-block;
或者使用浮動：
float:left\right\inherit\none;
2.元素類型有哪些？它們的特征分別是什么？
元素類型有：內聯元素和塊狀元素。
內聯元素的特點：
（1）可以和其他元素在同一行上。
（2）不支持寬高，對上下margin和padding等樣式的支持也有一定的問題。
（3）元素的寬度就是它包含的文字或圖片的寬度。
塊元素的特點：
（1）獨占一行。
（2）支持所有樣式。
（3）不設置寬度時，寬度會撐滿整行。
3.清浮動有哪些方法？你最喜歡哪個？為什么？
清浮動的方法：
（1）加高。給浮動元素的父級加上與浮動元素相同的高度。
問題：擴展性不好。
（2）給父級加上浮動。
問題：頁面上所有元素都得加上浮動，margin左右自動失效。
（3）inline-block清浮動。
問題：margin左右自動失效。
（4）空標簽清浮動。
問題：IE6下有最小高度，解決后，IE6下有2px偏差。
（5）br清浮動。
<br clear="all"/>
問題：不符合結構-樣式-行為三者分離的要求。
（6）after偽類 清浮動。（給浮動元素的父級加上 clearfix 標簽）
clearfix:after{content:"" display:block;c;clear:both;}
在IE6下還得添加：
clearfix{*zoom:1;}
(6)overflow：hidden 清浮動。
問題：需要配合寬度或者zoom。
最喜歡的是 after偽類清浮動。 因為方便，不會產生什么副作用。
4.什么是BFC？如何才能得到一個BFC
BFC（block formatting context）是塊級元素格式化上下文。
在下列這些情況下會創(chuàng)建新的BFC
（1）浮動元素（不為none時）；
（2）絕對定位元素；
（3）表格的單元格；
（4）表格的標題；
（5）display:inline-block；
（6）overflow的值不為visible。
5.position的值有哪些？
position:relative\absolute\static\fixed
6.說一下絕對定位，相對定位和固定定位的區(qū)別
相對定位：（1）本身作為自己的參照物；
（2）不會使元素脫離文檔流；（元素移動后原始位置會被保留。）
（3）不影響元素本身的特性，如果沒有定位偏移量，對元素本身沒有任何影響；
（4）提升層級。
絕對定位：（1）使元素完全脫離文檔流；
（2）使內嵌元素支持寬高；
（3）塊屬性標簽內容撐開寬度；
（4）如有定位父級相對于定位父級發(fā)生偏移，沒有定位父級則相對于document發(fā)生偏移。
（5）相對定位一般都是配合絕對定位元素使用。
（6）能夠提升層級。
固定定位與絕對定位的特性基本一致，它們的區(qū)別就是固定定位偏移基準是相對于屏幕來定位，絕對定位是相對于父級來定位，ie6不兼容固定定位。
7.怎么改變一個div的層級，寫出代碼讓div1在div2的下面
可以使用z-index：[這里填層級];來改變div的層級。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.div1{
width:200px;
height:200px;
background:blue;
position:absolute;}
.div2{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
8.如何實現層疊的div1和div2，上面div1不透明下面div2透明？
實現代碼：
<!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=utf-8" />
<title>無標題文檔</title>
<style>
.div1{
width:200px;
height:200px;
background:blue ;
position:relative;
margin:100px auto;
opacity:0.8;}
.div2{
width:200px;
height:200px;
background:red center;
position:absolute;
left:-6px;
top:-6px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
9.合并行屬性，合并列屬性。
合并行屬性：
<td rowspan="2"></td>
合并列屬性：
<td colspan="2"></td>
10.讓div水平垂直居中
代碼實現：
<!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=utf-8" />
<title>無標題文檔</title>
<style>
.box{
width:400px;
height:200px;
background:red;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
其中margin-left和margin-right得自己根據實際情況具體微調。
