高级表单
总结:
1.哪些标签自带边框 input、hr、select、textarea
2.置换元素与非置换元素
- 置换元素: 有自身初始的宽高,通过改变html属性的属性值在浏览器中显示的样式也会发生改变
input(type)、textarea、select
非置换元素: 除了置换元素 其他都是非置换
div
3.常见的行内块
- img、input、textarea、select
表单的组成：
<form name=“” method=“” action=“ "></form>
表单控件
<input type="text" value=""/> 文本
<input type="password" value=""/> 密码
<input type="button" value=""/> 空按钮
<input type="submit" value=""/> 提交
<input type="reset" value=""/> 重置
<input type="checkbox" checked="checked" disabled="disabled"/> 复选按钮
<input type="radio" name="rel"/> 单选按钮
表单域下拉列表
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
</select>
表单域多行文本定义：
语法：
<textarea name="" cols="" rows="" > </textarea>
说明：
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。 阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
1、表单字段集
<fieldset></fieldset>
说明：
相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
语法：<legend align="left/right/center/justify"></legend>
说明：
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素
3、提示信息标签
语法：<label for="绑定的id名字"></label>
说明:
label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
4、上传文件框：
语法：<input type="file"/>
说明：type属性值新增的类型有：file文件类型，可进行文件的选择
高级表格
1、cellspacing="单元格与单元格之间的间距"
2、cellpadding=“单元格与内容之间的距离"
3、align="表格水平对齐方式" 取值：left、right、center、 valign=“垂直对齐” top\bottom\middle
4、合并单元格属性：(td) 合并列： colspan=“所要合并的单元格的列数" 合并行： rowspan=“所要合并单元格的行数
1、单元格间距：
语法:border-spacing:value
说明：
单元格间距(该属性必须给table添加)
表示单元格边框之间的距离
不可取负值
2、合并相邻单元格边框：
语法：border-collapse:separate
合并相邻单元格边框 (该属性必须给table添加)
separate(边框分开)默认值；
collapse(边框合并)
3、无内容时单元格的设置：
empty-cells:show/hide;
定义当单元格无内容时，是否显示该单元格的边框区域； show：显示 ；hide：隐藏
4、显示单元格行和列的算法(加快运行的速度)：
语法：table-layout:auto/fixed
说明：
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
5、表格列标题
语法：<th></th>列标题
说明：
th标记表示表格内的表头单元格,是单元格标题
6、<caption></caption>
caption标记表示表格的名称，也叫表格标题。
设置表格标题的位置
caption-side:top/right/bottom/left
说明：
定义表格的caption对象放于表格的哪个位置，与caption对象一起使用；
top为默认值；
数据行分组
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
数据列分组
<colgroup span="value"></colgroup>双标签
<col span="value" />单标签
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性
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
