2021-05-21

表单表格的补充 &BFC补充

select 下拉列表；子级元素 option

高级表单应用

<fieldset></fieldset> 相等于一个方框，在字段集中可以包含文本和其他元素，该元素可以嵌套，在浏览器中有默认样式；

disabled 禁止使用所有fieldest的所有下级元素；

legeng 字段集标题 ；legeng aling="方向"，（一般只能接上下）；justify 两端对齐，对标题字数有要求；

form在表单中是最大的，所以form 嵌套所有表单属性；

提示信息标签 label fol=" " ;上传文本框<input type="file"/文件>；

高级表格。

border-spacing:value ;给table 添加 ，不可取负值；

border-collapse:separate; separate:边框分开； collapse:边框合并

无内容时单元格的设置：

empty-cells:show/hide; 显示、隐藏

table-layout:auto/fixed;

1. auto 默认自动表格布局，列表宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
2. 、fixed 固定表格布局，水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比，允许浏览器更快地对表格进行布局。通过固定表格布局用户代理在接收到第一行后就可以显示表格。

表格列标题

th 列标题 单元格标题

caption 表格标题 caption side 接方向 选择出现在表格的什么方向；

thead:表格 头部 与tfoot绑定 只能出现一次；

tbody：可以多次出现 ，表示主体部分；

tfoot：表格尾部 与thead绑定 只能出现一次；

数据列分组

<colgrounp span=value></colgrounp>双标签； <col span=valu>单标签；有俩个 属性值 span/列 width/行；

---

BFC概念和应用场景

1. 只针对块级元素
2. 独立区域，与外部区域布局毫不相干

BFC的布局规则：

1. 内部的box会在垂直方向，一个接一个放置。

块级元素的布局规则

1. box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的margin会发生重叠。（margin错误解析 BFC布局有问题）
2. 每个元素Margin左边与包含border box的左边相接触；
3. BFC就是页面上一个隔离的独立容器，里面的元素不影响外面。
4. BFC的区域不会与float box重叠
5. 计算BFC的高度，浮动元素也参与。