表格 表单 BFC

一、表格的相关属性
1、 border-spacing:20px; 单元格间距 单元格间距(该属性必须给table添加)表示单元格边框之间的距离,不可取负值
2、 border-collapse:separate/collapse; 合并相邻单元格 合并相邻单元格边框(该属性必须给table添加) separate(边框分开)默认值;collapse(边框合并)
3、empty-cells：show/hide 无内容时单元格的设置 定义当单元格无内容时，是否显示该单元格的边框区 注：域; show:显示; hide:隐藏;
4、table-layout：auto/fixed； 是否固定单元格的宽度 fixed：固定宽 ，没有定义时则宽度会平均分配，高度则会随内容变化
5、caption-side：toop/right/bottom/left 表格标题位置 left，right 位置只有火狐识别 ，top，bottom（ie7以上识别 ie7以下只是把top）
二、表格相关的HTML标签和属性
1、表格标题 标题内容
2、表格列分组 注：如果用rules添加组分割线的话，列分组必须用colgroup
col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
3、表格分组 A. 表头 B. 表体 C. 表尾
4、添加组分隔线 rules=“groups/rows/cols/all/none” 必须给table标签添加属性
三、表单
1、回顾：
表单的作用：用来收集用户的信息的
表单的组成：（1）表单域：
(2) 表单控件 ：
2、表单相关的
（1） fieldset表单字段集,相当于一个方框, fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象
（2） 字段级标题
（3） label提示信息标签for=“绑定控件id名”
（4） 上传文件框multiple="multiple"multiple属性可实现多选
（5） 隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值,通过js来修改
（6） type="radio"单选按钮单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。
（7） type="checkbox”多选按钮name可加可不加checked=“checked”(选中) disabled="disabled"禁用
（8） 北京 上海 下拉菜单
(9) 文本域 文本域cols="字符宽度”rows=“行数”
四、BFC
1、BFC的概念
BFC 即 Block Formatting Contexts(块级格式化上下文), 通俗一点来讲,可以把BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
2、BFC的触发条件
（1）根元素html默认就是一个BFC
（2）float的值不为none单纯的div不是BFC，如果添加了浮动就是BFC
（3）overflow的值不为visible单纯的div不是BFC，如果添加了overflow: hidden等就是BFC
（4）display的值为inline-block/ table-cell/ table-caption/ flex/ inline-flex
（5）position的值为absolute或fixed
3、BFC的特性及应用
（1） Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠(应用:防止marin重叠)
（2） BFC的区域不会与float box发生重叠(应用:自适应两栏布局
（3) 计算BFC的高度时，浮动元素也参与计算(应用:清除内部浮动)
(4) BFC内部的Box会在垂直方向，一个接一个的放置。
(5) 每个元素的margin box的左边会与包含块border box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此。
(6) BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素