第3天：CSS浮動、定位、表格、表單總結
今天學的是浮動、定位、表格、表單等內容，這些是CSS中最容易混淆的知識，有許多小技巧在寫代碼過程中需要註意。下面是主要知識點：
一、float浮動
1、塊元素在一行顯示
2、內聯元素支持寬高
3、默認內容撐開寬度
4、脫離文檔流
5、提升層級半層
二、clear清除浮動
1、加高（擴展性不好）
給浮動元素的父級設置同樣的高度
2、給父級加浮動（頁面中所有元素都要加浮動，margin左右失效）
3、inline-block(margin左右auto失效）
4、空標簽加浮動（div ）（任何用到的地方都要加）
.clearfix{clear:both;}（IE6最小高度19px,解決後還有2px偏差）
5、.br清浮動（不符合工作中結構、樣式、行為，三者分離的要求）
<br clear="all"/>
6、after清浮動
.clearfix{
*zoom:1;}
.clearfix:after{
content:""；
display:block;
clear:both;
}
只需要給浮動元素的父級加上clearfix，就可以。
7、overflow:hidden;清除浮動(給浮動元素父級加）
需要配合寬度、zoom兼容IE6、IE7
scroll(滾動條）
overflow:hidden/scroll/auto
三、瀏覽器
BFC（標準瀏覽器）
1、float的值不為none
2、overflow的值不為visible
3、display的值為table-cell,table-caption,inline-block中的任何一個
4、position的值不為relation和static
width/height/min-width/min-height:(!auto)
haslayout（IE瀏覽器）
1、writing-mode:tb-rl
2、-ms-writing-mode:tb-rl
3、zoom:(!normal)
四、position定位
相對定位（relative）
1、不影響元素本身的特性
2、不使元素脫離文檔流（元素移動之後原始位置會保留）
3、如果沒有定位偏移量，對元素本身沒有任何影響
4、提升層級
絕對定位（absolute）
1、使元素完全脫離文檔流
2、使內嵌支持寬高
3、塊屬性內容撐開寬度
4、如果有定位父級相對於定位父級發生偏移，沒有定位父級相對於document發生偏移
5、相對定位一般都是配合絕對定位元素使用
6、提升層級
一般來說，父級相對定位，子級絕對定位。
固定定位（fixed）
1、固定右下角
position:fixed;
right:0;
bottom:0;
與絕對定位特性基本一致。始終相對整個文檔進行定位；IE6不支持固定定位。
定位其他值
static(默認值）
inherit（從父元素繼承定位屬性的值）（不兼容）
position：relative|absolute|fixed|static|inherit
五、遮罩透明度
opacity:(0~1);透明度參數從0到1（標準瀏覽器）
父級加了透明度，子級也會繼承透明度；
IE濾鏡：filter:alpha(opacity=0~100);（IE6、IE7瀏覽器透明度設置）
z-index定位層級
默認後者的值高於前者
六、表格（table）
thead（表頭）、tbody（表格主體）、tr（表格行）、th（元素定義表頭）、td（元素定義表格單元）
表格樣式重置
table{border-collapse:collapse;}單元格間隙合並
th,td{padding:0}重置單元格默認填充
給table加border=“1”；單元格加邊框
合並單元格
colspan=“2”（跨列）
rowspan="2"（跨行）
七、表單form
<form action="">
<input type="..." name="" value=""/>
text 文本
password 密碼
radio 單選（單選按鈕name必須相同）
checkbox 復選
submit 提交
reset 重置
button 按鈕
image 圖片<input type="image"/>
file 上傳<input type="file"/>
hidden 隱藏<input type="hidden"/>不讓用戶看到，需要存儲
button 按鈕
最後做了個定位的小練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width:200px;
height:200px;
background: red;
position: absolute;
left: 200px;
}
.div2{
width:200px;
height:200px;
background: yellow;
position: absolute;
top: 200px;
}
.div3{
width:200px;
height:200px;
background: blue;
position: absolute;
top: 400px;
left: 200px;
}
.div4{
width:200px;
height:200px;
/*background: red;*/
position: relative;
top: 206px;
left: 406px;
}
.content{
width:200px;
height:200px;
background: green;
position: absolute;
top: -6px;
left: -6px;
z-index: 2;
}
.mask{
width:200px;
height:200px;
background: #ccc;
opacity: 0.6;
position: absolute;
top: 6px;
left: 6px;
z-index: 1;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">
<div class="content"></div>
<div class="mask"></div>
</div>
</body>
</html>
運行效果：
第3天：CSS浮動、定位、表格、表單總結