高级表单、高级表格、BFC

表单

表单下拉列表：select>option下拉选项，

表单多行文本定义：textarea（name、cols、rows）

多行文本，rows属性和cols属性用来设置文本输入窗口的高度和宽度，

阻止对其窗口的拖动可以设置resize：none属性。

高级表单应用

表单字段集

fieldset标签：

相当于一个方框，可以包含文本和其他属性，还可以嵌套多个fieldset对象。

字段级标题

legend标签：属性align，属性值left、right、center、justify

legend元素可在fieldset对象的方框内插入一个标题，但legen必须是fieldset里面的第一个元素

提示信息标签：

label标签，属性for="绑定的id名字"

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

上次文件框：

input标签，type属性，新增的属性值file文件类型，可对文件进行选择，

新增表格应用：

表格的基本结构table>tr>td。

cellspacing="单元格与单元格之间的间距"

cellpadding=单元格与内容之间的距离

align=表格的水平对齐方式，left、right、center。垂直对齐方式valign=top、bottom、middle。

合并单元格属性，td合并列：colspan=要合并单元格的列数，合并行：rowspan=要合并的单元格行数。

高级表格应用：

单元格间距：

border-spacing：value（距离值），单元格间距必须给table加，表示单元格边框之间的距离，不可设置负值。

合并相邻单元格边框：

birder-collapse：separate，

作用：合并相邻单元格边框必须给table添加，separate为默认值 边框不合并，collapse边框合并。

无内容时的单元格设置：

empty-cells：show/hide

show为显示单元格、hide为隐藏单元格

显示单元格行和列的算法：（加快运行速度）

table-layout：auto默认。列宽度由单元格内容设定。/fixed列宽由表格宽度和列宽度设定。

表格列标题：

th标签，列标题。th标记表示表格内的表头单元格，是单元格的标题。

caption标记表示表格的名称，也叫表格标题，设置表格表格标题

数据行分类：

thead表头标签，tbody表体标签，tfoot表尾标签，一个table只能包含一个thead和tfoot，但可以有多个tbody，

相当于页眉，内容，页脚。

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

BFC：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
5、BFC的区域不会与float box重叠。
6、计算BFC的高度时，浮动元素也参与计算

如何触发BFC：

 1.float的值不为none

 2.overflow的值不为visible

 3.display的值为table-cell、tabble-caption和inline-block之一

 4.position的值不为static或则releative中的任何一个

普通布局规则和BFC布局规则区别：

 普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

 3.margin会传递给父级

  4.两个相邻元素上下margin会重叠

BFC布局规则

1.浮动的元素会被父级计算高度（父级触发了BFC）

 2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

 3.margin不会传递给父级（父级触发了BFC）

4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）