浮动页面的详解

浮动

页面的布局方式

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