浮动
页面的布局方式
页面布局的方式：
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不会像用户呈现任何的特殊效果
