表单元素的补充、BFC

select>option，下拉框

设置当前多行文本域的宽高：textarea（cols，rows），设置resize时不能拖拽

自带边框的标签：input、hr、select、textarea

置换元素与非置换元素

置换元素：有自身初始宽高，通过改变属性值在浏览器中也会发生改变

非置换元素：除置换元素外都是

常见的行内块：img、input、textarea、select

新增表格应用：

1、cellspacing="单元格与单元格之间的间距"
2、cellpadding=“单元格与内容之间的距离"
3、align="表格水平对齐方式"    取值：left、right、center、 valign=“垂直对齐” top\bottom\middle
4、合并单元格属性：(td)   合并列： colspan=“所要合并的单元格的列数"   合并行： rowspan=“所要合并单元格的行数”

高级表单

fieldset：收集信息，一个方框，相当于form，里面可以嵌套多个标签

legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素

disabled：定义不能选中；

<colgroup span="value"></colgroup>双标签
<col span="value" />单标签
说明：
col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性

提示信息标签

语法：<label for="绑定的id名字"></label>

说明:
label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

设置文件提交框：type=file

单元格的计算属性

table-layout：auto/fixed；auto：自动伸缩，fixed固定

th标题标签，

单元格间距：语法:border-spacing:value

合并相邻单元格边框：

border-collapse:separate
作用：合并相邻单元格边框 (该属性必须给table添加)

separate(边框分开)默认值；

collapse(边框合并)

BFC

全程：Box、Formatting（格式化） Context（上下文）

概念：块级格式化上下文、只针对块级元素、是一个独立的渲染区域，与外面的布局不相干，

BFC布局规则：

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

元素类型中的块级元素特点

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

margin的错误解析，解析之间的最大值设置

3、每个元素的margin box的左边， 与包含块border box的左边相接触

设置margin值时要有包含框的接触

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

BFC独立的渲染区域

5、BFC的区域不会与float box重叠。

实现常见的后台布局（两栏布局、左侧固定，右侧自适应）

6、计算BFC的高度时，浮动元素也参与计算

高度塌陷 overflow：hidden

哪些元素会触发BFC?
- display为flex
- overflow不为visible; auto hidden scroll；为hidden