2021.7.23 表格表单B F C

1.表格相关的

表格相关的CSS属性
个数	用法	意义	说明
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:top/right/bottom/left	表格标题位置	left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top

表格相关的HTML标签和属性
个数	用法	意义	说明
1	表格标题	<caption>标题内容</caption>
2	表格列分组	<colgroup span="数字"></colgroup> <col span="数字" /> 如果用rules添加组分割线的话，列分组必须用colgroup	col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组 span属性显示指定相邻几列组成一组，span属性值默认为1
3	表格行分组	<thead></thead> 表头 <tbody></tbody> 表体 <tfoot></tfoot> 表尾
4	添加组分隔线	rules="groups/rows/cols/all/none"	必须给table标签添加属性

---

2.表单相关

回顾： 表单的作用：用来收集用户的信息的; 表单的组成：

1） 表单域： <form name="" method="get/post" action=""></form>

2）表单控件 ： <input type="text" value=""/> 提示信息

表单相关的
个数	标签和属性	说明
1	<fieldset></fieldset>	fieldset表单字段集，相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象
2	<legend></legend>	字段级标题
3	<label for="box"></label>	label 提示信息标签  for="绑定控件id名"
4	<input type="file"/>	上传文件框   multiple="multiple"   multiple属性可实现多选
5	<input type="hidden"/>	隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改
6	<input type="radio" name=”sex”/>	type="radio"单选按钮  单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。

表单相关的
个数	标签和属性	说明
7	<input type="checkbox"  name="like" disabled="disabled" checked="checked"/>	type="checkbox" 多选按钮  name可加可不加   checked="checked"(选中) disabled="disabled"禁用
8	<select>   <option>北京</option>   <option>上海</option> </select>	下拉菜单
9	<textarea cols="40" rows="5">文本域</textarea>	文本域    cols="字符宽度"    rows="行数"

---

3.BFC概念和应用

        BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

根元素 html默认就是一个BFC

float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC

overflow的值不为visible  单纯的div不是BFC，如果添加了overflow：hidden等就是BFC

display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex

position的值为absolute或fixed

1.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）

2.BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

3.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

4、BFC内部的Box会在垂直方向，一个接一个的放置。

5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

---

1、数据表格的创建

 

 Colspan=“所要合并的单元格的列数” 必须给td

Rowspan=“所要合并的单元格的行数” 必须给td。