問答題呀
1.內聯元素如何轉化成為塊元素
display:block
2.元素類型有哪些？他們的特征分別是什么？
塊元素 內聯 內聯塊
塊不設置時，一行都是，支持所有css
內聯 不支持 heigh weigh 換行被解析
內聯塊 也是一大行 和塊一樣支持寬高 Ie6 ie7 不支
3.清浮動有哪些方法？你最喜歡哪個?為什么
1架高 擴展性不好
2 父級浮動 所有都加浮動，margin不好使
3inline block 清浮動方法
margin左右失效
4 空標簽浮動 i最小高度19px
5 br清浮動 不符合工作中 結構 樣式 行為分離的要求
6 after偽類 現在主流方法
after 偽類 元素內部未添加內容
zoom縮放 處罰下haslayout 使元素根據自身內容算寬高
ff不知持
4.什么是BFC？如何才能得到一個BFC
處了ie 6 7塊級格式化上下文
5.Positon的值有哪些？
relative absolute fixed
7.怎么改變一個div的層級，寫出代碼讓DIV1在DIV2在下
用z-index 數字越大 月后執行
8.如何實現層疊的DIV1與DIV2，上面DIV1不透明下面DIV2透明？
用opacity 0到1 透明度
9.合并行屬性，合并列屬性
<td colspan="2">合并兩個單元格
<td rowspan="2"></td>合并列但嚴格
10.讓DIV水平垂直居中
absolute-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
程序題第一種方法
1用內聯呀
<!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>
div{ width:400px;
height:400px;
background-color:#09F;
display:inline-block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
第二種方法
浮動了
<!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>
div{ width:400px;
height:400px;
background-color:#09F;
float:left;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<a></a>
</body>
</html>
第三種方法
用定位呀
<!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>
div{ width:400px;
height:400px;}
.div1
{ width:400px;
height:400px;
background-color:#09F;
}
.div2{
background-color:#09F;
position:relative;
left:400px;
bottom:400px;
}
.div3{
background-color:#09F;
position:relative;
left:800px;
bottom:800px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<a></a>
</body>
</html>
