高级表单表格

表格表单及统筹

回顾表单

1. 表单域：<form name=“”  method=“”     action=“”></form>
2. 表单控件<input type="text(文本）"value=""/>  文本
3. <input type（表单属性） ="password" value=""/>输入密码
4. <inpu type=""button"value=""/>空按钮
5. <input type=""submit" value=""/>提交
6. <input type="reset" value=""/>重置
7. <input type=""checkbox"checked="checked"disabled="disdbled"/>复选按钮（多选按钮）
8. <input type=""radio"name="rel">单选按钮（需要在单选按钮name里输入一各相同属性）

表单域下拉列表

1. 语法：<select>

                      <option></option>（下拉列表选项）

                             

2.表单域多行文本定义

<textarea name=""  cols=""    rows=""    ></textarea>

多行文本rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。阻止浏览器对窗口的拖到设置{resize：none}

3.字段集

<fiedeset></fieldset>相当于一个方框，可以包含其他文本和其他元素，fieldset元素可以嵌套，在其内部可以设置多个

fieldset对象

4.字段级标题

<legend align="left（左）“/"right(右）/center（中间）/justify(两端对齐）></legend>

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

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

1、上传文件框

语法：<input type="file"/>

说明：type属性值新增的类型有：file文件类型，可进行文件的选择。

表格的基本结构

《bable》

    《tr》

     《td》《/td》

《tr》

《/table》

2.cellspacing=“单元格与单元格之间的距离”

3.cellpadding=“单元格与内容之间的距离”

4。align="表格水平对齐方式”取值：left、right、center、valign=“垂直对齐”

5.合并单元格属性：{td}合并列：colspan=“所要合并的单元格的列数”

6.合并行：rowspan=“所要合并单元格的行数”

高级表格的应用

单元格间距：

语法：border-spacing：value

说明：单元格间距{该属性必须给table添加}

表示单元格边框之间的距离

不可以取负值

1.合并相邻单元格边框：

语法：border-collapse：separate（边框分开）

       border-collapse：collapse{边框合并}

2.无内容时单元格的设置：

语法：empty-cells：show/hide

说明：定义当单元格无内容时，是否显示该单元格的边框区域；

show：显示；

hide：隐藏

3.显示单元格行和列的算法{加快运行的速度}

语法：table-layout（表格布局的属性）：auto（自动）/fixed(固定）

说明：自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。

缺点：较慢（因为他需要在确定最终的布局前访问表格中的所有内容）

优点：灵活 固定表格布局，加快运行的速度，允许浏览器更快的对表格进行布局

4.表格列标题

语法：<th></th>列标题

说明：th标记表示表格内的表头单元格，是单元格标题；给表格加列标题（列如表格中的序号，姓名等）

5.<caption></caption>caption标记表示表格的名称，也叫表格标题。

设置表格标题的位置：

caption-side：top/right/bottom/left浏览器更新 属性值会有错误提示

说明：定义表格的caption对象放于表格的哪个位置，与caption对象一起使用；top为默认值；

数据列分组

<colgroup span="value"></colgroup>双标签

<col span="value"/>单标签

说明：

1.col和colgrup元素会根据从左到右的顺序依次对数据表格进行分组。

2.span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。

firefox、chrome以及safari仅支持colgroup元素的span和width属性。

BFC的布局规则

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

  ----块级元素的布局规则就是从上到下排序的，独占一行

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

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

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

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

6.计算bfc的高度时，浮动元素也参与计算

移动端布局非常重要的属性

display：fiex   弹性盒