浮動
頁面的佈局方式
頁面佈局的方式：
1.文檔流（常規流）：
文檔流中的元素框的位置由元素在HTML中位置決定
如：塊級元素從上到下依次排列
框與框之間的垂直距離由垂直margin計算得到
如：行內元素在一行中水平佈置
文檔流：就是HTML文檔中的元素如塊級元素、行內元素依據他們的顯示屬性按照在文檔中的先後順序依次顯示
塊級元素佔一行或多行
行內元素和其他元素一樣共處一行。
2.浮動流（脫離文檔流）
元素從正常的排列順序被抽離
浮動可以使元素向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止
注意：
由於浮動框不在正常的文檔流中，所以標準文檔中的塊框表現的就像浮動框不存在一樣
浮動
1.浮動的屬性：
float：left(向左浮動)/right(向右浮動)
通過float屬性實現元素的浮動，
如，使文本圍繞圖像周圍
在CSS中任何元素都可以浮動，浮動元素會生成一個塊級框，而不論他本身是何種元素
注意：
如果浮動非替換元素。指定一個明確的寬度，否則他們會竟可能的窄
總結：
1.浮動元素不在標準文檔中，所以浮動後面緊跟着的元素佔據了浮動元素原先的位置
2.浮動是一個比較特殊的個體，他雖然不在標準文檔流中，但是任然跟標準文檔流相互影響
3.如果浮動前面的元素沒有浮動屬性，則浮動會另起一行在此元素的下面浮動
4.當一個元素浮動後，其下方裝載的文字的容器雖然會佔據浮動元素原先的位置，但是其中的文字會一直圍繞早浮動元素周圍，而不被浮動元素所覆蓋
浮動後遇到的問題？
1.背景不顯示：
2.邊款問題
清除浮動
1.clear:left/right/both/none
clear:屬性規定元素的那一側不允許其他浮動元素
left:在左側不允許浮動元素
right:在右側不允許浮動元素
both:在左右兩側都不允許浮動元素
none:默認值，允許浮動元素出現在兩側
其他的清除方法：
1.在父級元素添加最後一個子元素時，子元素設置樣式clear:both
2.給父元素設置高度
3.設置:after僞元素
如： div:after{display:block;clear:both;content:"";}
4.父級div定義over-flow:hidden和zoom:1;
表格
1.table:定義表格，表格的邊界標籤，必定包含表格的其他的標籤
2.tr:定義表格的行
3.th:定義表格的表頭，需要被tr包裹
4.td:定義表格單元：需要被tr 包裹
5.thead:定義表格的頁眉，表格分組標籤，可將表格分割
6.tbody:定義表格的主體，表格分組標籤，可將表格分割
7.tfoot:定義表格的頁腳，表格分組標籤，可將表格分割
注意：
如果您使用thead/tfoot/tbody元素，必須使用全部元素出現的順序 thead/tfoot/tbody,這樣瀏覽器在接受到數據時就可以顯示頁腳
8.caption:定義表格的標題
表格的重要屬性：
1.colspan="value" 合併列
2.rowspan="value" 合併行
3.align=“left/center/right” 水平對齊
4.valign="top/center/bottom" 垂直對齊
5.cellpadding="value" 單元邊沿與其他內容之間的空白
6.celllspacing="value" 單元格之間的空格
表格的css屬性
1.caption-side:top/bottom/left/right; 設置表格標題放置的位置
注意： left/right 位置只有火狐識別
top/bottom IE7以上版本支持，IE7以下只支持top，不支持其他
2.border-spacing:value 單元格間距
該屬性必須給table添加
3.border-collapse:spearate(邊框分開)/collapse(邊框合併)
4.empty-cells:show/hide 無內容單元格的顯示和隱藏
5.table-layout:atuo/fixed
說明：
自動錶格佈局：列的寬度是由列單元格中=沒有換行的最大的內容寬度設定的
缺點：較慢（需要在確定最終的佈局前訪問表格中的所有內容）
固定表格佈局：
加快表格的運行速度，允許瀏覽器更快的對錶格進行佈局，
缺點：不太靈活
表單
表單的作用：收集用戶信息
表單的組成：
1.表單域
2.表單控件
3.提示信息
表單域~~~
1.語法：
<form [屬性名=“”值]></form>
2.常用的屬性：
name: 表單的名稱
action : 提交表單的URL
method: 提交方式
enctype:規定在發送表單數據前進行編碼
target:何處打開URL
HTML5新增特性：
1.autocomplete：="on/off" :是否啓動表單自定完成
2.novalidate="novalidate" :不驗證表單
表單控件
1.文本框：
<input type="text">
2.密碼框：
password
3.提交按鈕：submit
4.重置按鈕：reset
5.單選框或按鈕：radio
6.按鈕：button
7.複選框：CheckBox
8.下拉菜單：select
9多行文本：textarea
表單高級
1.表單的字段集：
<filedset></filedset>
功能：相當於一個方框，在字段集中可以包含文本和其他元素，該元素用於對錶單中的元素進行分組並在文檔中區別出文本
注意：filedset可以嵌套，在其內部可以設置多個filedset 對象
2.字段集標題
<legend></legend>
說明：
legend元素可以在filedset對象繪製的方框內插入一個標題
注意必須是filedset裏面的第一個元素
3.表單元素：
上傳文件框（文件域）：<input type="file">
圖像域：<input type="image" width="200px";height="200px";src="上傳圖片的地址">
提示信息的標籤
<lable for="綁定控件的ID名"></lable>
功能：lable 元素,爲頁面上的其他元素指定提示信息
要將label元素綁定到其他控件上，可以將label元素的for屬性設置爲與該控件的ID屬性值一致
注意：label不會像用戶呈現任何的特殊效果
