1.內(nèi)聯(lián)元素如何轉(zhuǎn)化成為塊元素？
display：biock;（顯示為塊）使內(nèi)聯(lián)元素具備塊屬性標(biāo)簽的特征
eg：
span{width:200px;
heigth:200px;
display:block;｝
<span></span>
補(bǔ)充：
display:inline;（顯示為內(nèi)聯(lián)）使塊元素標(biāo)簽具備內(nèi)聯(lián)元素的特征
display:inline-block;的特征
（1）、塊在一行顯示
（2）、內(nèi)聯(lián)元素支持寬度
（3）、沒有寬度的時候，內(nèi)容撐開寬度
（4）、標(biāo)簽之間的換行間隙被解析
（5）、IE6、7不支持塊屬性標(biāo)簽的inline-block
2.元素類型有哪些？他們的特征分別是什么？
塊元素的特征
（1）、在沒有設(shè)置寬度時，默認(rèn)撐滿一行
（2）、默認(rèn)塊元素獨占一行
（3）、支持所有CSS命令
內(nèi)聯(lián)元素的特征
（1）、寬度有內(nèi)容撐開
（2）、不支持寬高
（3）、一行可以繼續(xù)顯示同類型的標(biāo)簽
（4）、不支持上下的margin
（5）、代碼換行被解析
3.清浮動有哪些方法？你最喜歡哪個?為什么？
（1）、加高度
存在的弊端：擴(kuò)展性不好
（2）、父級浮動
存在的弊端：頁面所有元素都加浮動，margin左右自動失效
（3）、inline-block
存在的弊端：margin左右的auto失效
（4）、空標(biāo)簽 方法;在底下加個空標(biāo)簽，對空標(biāo)簽clear：both;
存在的弊端：解決后IE6下還有2px的偏差
（5）、br清除浮動<br clear="alll"/>
存在的弊端：不符合工作中結(jié)構(gòu)、樣式、行為三者分離的要求
（6）、after偽類（偽類：給某一個元素添加特殊的效果，添加在選擇器上）常用的清除浮動的辦法，弊端小
格式：div:after{content:"……";
display:block;
clear:both;
}
clear{*zoom:1;}
<div class="clear"></div>
（7）、overflow:scroll|auto|hidden;
overflow:hidden;溢出隱藏（裁刀）
存在的弊端：需要配合寬度或zoom兼容IE6、7；
補(bǔ)充：
（1）、after偽類：元素內(nèi)部尾部添加內(nèi)容
after{content:"添加的內(nèi)容";}在IE6、7不兼容
（2）、zoom縮放：
a：觸發(fā)IE下haslayout，是元素根據(jù)自身內(nèi)容計算寬高
b：FF不支持
4.什么是BFC？如何才能得到一個BFC?
BFC：（block formatting content）標(biāo)準(zhǔn)瀏覽器（除IE6、7、8）塊級元素格式上下文
如何才能得到一個BFC?
a：”float的值不為none。
b：overflow的值不為visible。
c：display的值為table-cell, table-caption, inline-block中的任何一個。
d：position的值不為relative和static。
e：width|heght|min-widrh|min-height(!aotu)
5.Positon的值有哪些？ 說一下絕對定位，相對定位和固定定位的區(qū)別?
相對定位
position:relative;
定位元素位置控制：
top|rigth|bottom|left:定位元素偏移量
格式：
position:relative;
left;……
特征：
（1）、不影響元素本身特征
（2）、不使元素脫離文檔流（元素移動之后原始位置會被保留）
（3）、如果沒有定位偏移量，對元素本身沒有任何影響
（4）、提升層級
絕對定位
absoute:絕對定位|定位層級
position:absoute:
（1）、使元素完全脫離文檔流
（2）、使內(nèi)嵌支持寬度
（3）、塊屬性標(biāo)簽內(nèi)容撐開寬度
（4）、如果有定位父級相對于定位父級發(fā)生偏移，沒有定位父級相對document（瀏覽器可視區(qū)域）發(fā)生偏移
（5）、相對定位一般都是配合絕對定位元素所使用
（6）、提升層級
z-index:[number];定位層級
（1）、定位元素默認(rèn)后者層級高于前者；
（2）、建議在元素標(biāo)簽之間比較層級
固定定位
position:fixed;
與絕對定位的特征基本一致的，差別是始終相對整個文檔進(jìn)行定位（屏幕的可視區(qū)域）；
問題：IE6不支持固定定位
例：
podition:fixed;
rigth:0;
bottom:0;
固定到右下角
其他定位
position:static;默認(rèn)值
position:inherit；從父級繼承定位屬性的值（不兼容）
文檔流：文檔中可顯示對象在排列時所占用的位置
7.怎么改變一個div的層級，寫出代碼讓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>無標(biāo)題文檔</title>
<style>
div{
width:200px;
height:200px;
}
.DIV1{
background-color:red;
position:absolute; /* 使用絕對定位 */
z-index:1; /* 使DIV1提高一各層次 */
}
.DIV2{
background-color:blue;
position:absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="DIV1"></div>
<div class="DIV2"></div>
</div>
</body>
</html>
8.如何實現(xiàn)層疊的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>無標(biāo)題文檔</title>
<style>
div{
width:200px;
height:200px;
}
.DIV1{
background-color:red;
position:absolute;
z-index:1;
}
.DIV2{
background-color:blue;
position:absolute;
opacity:0;
}
</style>
</head>
<body>
<div class="box">
<div class="DIV1"></div>
<div class="DIV2"></div>
</div>
</body>
</html>
9.合并行屬性，合并列屬性
合并行屬性：
colspan:屬性規(guī)定單元格可橫跨的列數(shù)
<td colspan="number"></<td>
合并列屬性：
rowspan:屬性規(guī)定單元格可橫跨的行數(shù)
<td rowspan="number"></<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>無標(biāo)題文檔</title>
<style>
div{
font:bold 50px/50px "宋體";
color:red;
margin:50% auto; /* 上下是瀏覽器的50% 左右居中 */
text-align:center; /* 設(shè)置字體居中 */
}
</style>
</head>
<body>
<div>DIV</div>
</body>
</html>
補(bǔ)充知識點：
透明度;opacity:n;（n屬于[0,1] 0為完全透明，1為不透明）
父級加上透明度子級一定有透明度
在IE6、7下的格式
filter:alpha(opacity=0~100);
表格
表格的標(biāo)簽
table：表格
thead：表格頭
tbody：表格主體
tr：表格行
th：元素定義表頭
td：元素定義表格單元
<!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>
table{
border-collapse:collapde;/*單元格間隙合并*/
}
td,th{
padding:0;
}/*重置單元格默認(rèn)填充*/
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td>英語</td>
<td>英語</td>
<td>英語</td>
<td>英語</td>
<td>英語</td>
</tr>
<tr>
<td>shuxue</td>
<td>shuxue</td>
<td>shuxue</td>
<td>shuxue</td>
<td>shuxue</td>
</tr>
</tbody>
</table>
</body>
</html>
表單&表單元素
form:表單；
<form action=""></form>
<input type="可以為a的所有種類" name="……" value="默認(rèn)的東西"/>
a為｛
text：文本框
password：密碼
radio：單選
checkbox：多選
submit：提交
reset：重置
buttom：按鈕
image：圖片
file：上傳
hidden：隱藏
｝
