表格表单及统筹
回顾表单
- 表单域:<form name=“” method=“” action=“”></form>
- 表单控件<input type="text(文本)"value=""/> 文本
- <input type(表单属性) ="password" value=""/>输入密码
- <inpu type=""button"value=""/>空按钮
- <input type=""submit" value=""/>提交
- <input type="reset" value=""/>重置
- <input type=""checkbox"checked="checked"disabled="disdbled"/>复选按钮(多选按钮)
- <input type=""radio"name="rel">单选按钮(需要在单选按钮name里输入一各相同属性)
表单域下拉列表
- 语法:<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 弹性盒