1.內(nèi)聯(lián)元素如何轉(zhuǎn)換成塊元素史侣？
方法如下：
display:block;
display:inline-block;
或者使用浮動(dòng)：
float:left\right\inherit\none;
2.元素類型有哪些葵孤？它們的特征分別是什么瑰抵？
元素類型有：內(nèi)聯(lián)元素和塊狀元素。
內(nèi)聯(lián)元素的特點(diǎn)：
（1）可以和其他元素在同一行上举户。
（2）不支持寬高罩句，對(duì)上下margin和padding等樣式的支持也有一定的問題。
（3）元素的寬度就是它包含的文字或圖片的寬度敛摘。
塊元素的特點(diǎn)：
（1）獨(dú)占一行。
（2）支持所有樣式乳愉。
（3）不設(shè)置寬度時(shí)兄淫，寬度會(huì)撐滿整行。
3.清浮動(dòng)有哪些方法蔓姚？你最喜歡哪個(gè)捕虽？為什么？
清浮動(dòng)的方法：
（1）加高坡脐。給浮動(dòng)元素的父級(jí)加上與浮動(dòng)元素相同的高度泄私。
問題：擴(kuò)展性不好。
（2）給父級(jí)加上浮動(dòng)备闲。
問題：頁(yè)面上所有元素都得加上浮動(dòng)晌端，margin左右自動(dòng)失效。
（3）inline-block清浮動(dòng)恬砂。
問題：margin左右自動(dòng)失效咧纠。
（4）空標(biāo)簽清浮動(dòng)。
問題：IE6下有最小高度泻骤，解決后漆羔，IE6下有2px偏差。
（5）br清浮動(dòng)狱掂。
<br clear="all"/>
問題：不符合結(jié)構(gòu)-樣式-行為三者分離的要求演痒。
（6）after偽類 清浮動(dòng)。（給浮動(dòng)元素的父級(jí)加上 clearfix 標(biāo)簽）
clearfix:after{content:"" display:block;c;clear:both;}
在IE6下還得添加：
clearfix{*zoom:1;}
(6)overflow：hidden 清浮動(dòng)趋惨。
問題：需要配合寬度或者zoom鸟顺。
最喜歡的是 after偽類清浮動(dòng)。 因?yàn)榉奖闫飨海粫?huì)產(chǎn)生什么副作用诊沪。
4.什么是BFC？如何才能得到一個(gè)BFC
BFC（block formatting context）是塊級(jí)元素格式化上下文曾撤。
在下列這些情況下會(huì)創(chuàng)建新的BFC
（1）浮動(dòng)元素（不為none時(shí)）端姚；
（2）絕對(duì)定位元素；
（3）表格的單元格挤悉；
（4）表格的標(biāo)題渐裸；
（5）display:inline-block巫湘；
（6）overflow的值不為visible。
5.position的值有哪些昏鹃？
position:relative\absolute\static\fixed
6.說一下絕對(duì)定位尚氛，相對(duì)定位和固定定位的區(qū)別
相對(duì)定位：（1）本身作為自己的參照物；
（2）不會(huì)使元素脫離文檔流洞渤；（元素移動(dòng)后原始位置會(huì)被保留阅嘶。）
（3）不影響元素本身的特性，如果沒有定位偏移量载迄，對(duì)元素本身沒有任何影響讯柔；
（4）提升層級(jí)。
絕對(duì)定位：（1）使元素完全脫離文檔流护昧；
（2）使內(nèi)嵌元素支持寬高魂迄；
（3）塊屬性標(biāo)簽內(nèi)容撐開寬度；
（4）如有定位父級(jí)相對(duì)于定位父級(jí)發(fā)生偏移惋耙，沒有定位父級(jí)則相對(duì)于document發(fā)生偏移捣炬。
（5）相對(duì)定位一般都是配合絕對(duì)定位元素使用。
（6）能夠提升層級(jí)绽榛。
固定定位與絕對(duì)定位的特性基本一致湿酸，它們的區(qū)別就是固定定位偏移基準(zhǔn)是相對(duì)于屏幕來定位，絕對(duì)定位是相對(duì)于父級(jí)來定位灭美，ie6不兼容固定定位稿械。
7.怎么改變一個(gè)div的層級(jí)，寫出代碼讓div1在div2的下面
可以使用z-index：[這里填層級(jí)];來改變div的層級(jí)冲粤。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</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.如何實(shí)現(xiàn)層疊的div1和div2美莫，上面div1不透明下面div2透明？
實(shí)現(xiàn)代碼：
<!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>無標(biāo)題文檔</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水平垂直居中
代碼實(shí)現(xiàn)：
<!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>無標(biāo)題文檔</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得自己根據(jù)實(shí)際情況具體微調(diào)。
