表单表格标签补充

Day17
1、 表格标签补充
a. 表格的数据行分组

表头 表体 表尾 注：一个表格有一个表头和表尾，但是可以包含多个表体 b. 列标题标签 默认的样式：作用居中 文本加粗 c. 表格标题 标题的位置： Css属性：Caption-side:left/right/top/bottom 注：left/right 有兼容问题：火狐能识别，谷歌不能识别。 d. 数据列分组（了解，应用率不高） 表格里重要的html属性： Colspan=”” Rowspan=”” Cellspacing=”” Cellpadding=”” Rules=”” 分割线 属性值：all/rows/cols/groups

2、 表格css属性的补充
a. 相邻单元格边框进行合并（边框塌陷）
Border-collapse: (添加在table上面)
属性值：
Sperate 分开状态
Collapse 合并状态（发生崩塌）
b. 相邻单元格之间的间距 （添加在table上面）
Border-spacing:;
c. 是否显示单元格区域：（没有内容的时候，隐藏）
Empty-cells:show/hide;
d. Table-layout:
Auto 默认值：根据内容分配宽度（优点：灵活 缺点：性能消耗较大）
Fixed 不再根据内容去分配宽度（优点：性能消耗低 缺点：不灵活）
3、 表单控件补充
a. 单选按钮

注：在单选按钮里面，每一组单选按钮，保持name相同
b. 多选按钮（复选框）

c. 下拉菜单（下拉列表）

  … d. 多行文本域 Cols和rows以字符为单位 注：组织用户进行缩放 css属性：resize：none； e. 上传文件框

4、补充表单的html属性
a. 默认选中欧冠
checked=”checked”
b. 表单控件的禁用
disabled=”disabled”
c. 下拉列表默认选中
selected=”selected”
4、 表单里面的标签
a. Fieldset(表单字段集)
作用：给表单做分组
特点：
默认情况下自带边框
可以相互进行嵌套
b. Legend (字段集标题)
作用：是fieldset 一组里面的一个标题
特点：一般情况下，放在fieldset第一个子元素的位置。
c. Label

说明：
Label里面放的是提示信息
For属性：帮i的那个对应控件的id名称

5、 BFC
BFC（block formatting context） 块级格式化上下文

BFC布局规定：
a. 内部的box会在垂直方向，一个接一个的放置；
b. Box垂直方向的距离由 margin决定。属于同一个BFC的两个相邻box的margin会发生重叠（按照最大的margin值设定）；
c. 每个元素的margin box的左边，与包含块border box的左边相接触；
d. BFC的区域不会与float box重叠；
e. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
f. 计算BFC高度时，浮动元素也参与计算；
BFC触发条件：
a. Html就是一个BFC；
b. Float属性不为none；
c. Position为absolute或fixed；
d. Display为inline-block，table-cell,table-caption,flex,inline-flex;
e. Overflow不为visible。