今天學的是浮動、定位、表格、表單等内容，這些是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"/>不讓使用者看到，需要存儲
最後做了個定位的小練習：
<!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{
background: yellow;
top: 200px;
.div3{
background: blue;
top: 400px;
.div4{
/*background: red;*/
position: relative;
top: 206px;
left: 406px;
.content{
background: green;
top: -6px;
left: -6px;
z-index: 2;
.mask{
background: #ccc;
opacity: 0.6;
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>
運作效果：
![資料庫設計理論及應用（4）——概念結構設計1．概念模型 2．銷售子系統的分E-R圖 3．視圖的內建 4．設計基本E-R圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)