BFC+表格表单的补充

BFC

BFC   布局规则    块级格式化上下文

       1  元素会也块状一层一层往下排列
       2  上个元素的下间距和这个元素的上间距会发生重叠  间距去较大的那个值
       3  BFC是一个独立的容器 不会影响周围元素的布局
       4  计算高度 浮动元素也参与计算
       5  元素的左侧会紧挨着父元素的左侧排列
       6  BFC中的浮动元素不会影响下面的元素排列


       条件
           html 是一个BFC
           float不能为none
           overflow不能为visible
           position为 absolute/fixed
           dispaly    inline-block  table table-cell  table-caption flex  inline-flex



           应用 1  防止高度塌陷
                2  解决margin上下高度重叠

表格

          表格  
          
               table  tr  td 

               表格行分组
               thead  tbody tfoot

               表格列分组
               <colgroup span=""></colgroup> 

               表格列标题
                  th

                表格标题
                <caption></caption>
                      
                  caption  left/right/top/bottom   不支持左右  只有火狐支持

        表格的html属性
                
                    cellspacing   单元格之间的间距
                    cellpadding   边框与内容之间的间距
                    align         对齐方式
                    colspan       合并列
                    rowspan       合并行
                    rules         分隔线
                                  cols/rows/all/groups/none

                 
        表格的css属性
                    border-spacing:;单元格与单元格之间的间距
                    border-collapse:;合并相邻之间单元格的边框
                               collapse 合并  separte 不合并（默认）
                               
                    empty-cells:;  无内容是隐藏单元格 
                         show   hide
                    table-layout:;  auto /  fixed
                     表格的宽度受表格之间的内容影响 （默认)   
                     控制表格的宽度 不受内容多少的影响  加快运算

表单

      表单   form  
                               action  路径
                               method  方法  post/get
                               name    表单名称

        表单控件     <input type="radio" name="ral">     男  radio  单选 
                     <input type="radio" name="ral">    女
                  
                     <input type="checkbox" name="">    篮球  checkbox  多选 
                     <input type="checkbox" name="">    足球

                     下拉列表
                      <select>
                          <option></option>
                          <option></option> 
                      </select>          select  选择    option 选项


                      checked="checked"    默认选择
                      disabled="disabled"  禁止
                      selected="selected"  默认下拉列表选择

                      <input type="flie">    上传文件

                      textarea  多行文本定义：
                            语法:	<textarea name=""  cols=""  rows="" ></textarea>
                            多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
                            阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）

                      
        表单字段集  fieldset  
                        可以嵌套多个<fieldset></fieldset>
                        可以生成一个将文字包裹到外面的框

        字段集标题   legend
                    <legend></legend>  只能插入一个标题
        
        提示信息     label 
                    <label for="绑定控件id名"></label>