前端学习第十天——高级表单及统筹

1、表单

自带边框的标签

        input、hr、select、textarea

置换元素与非置换元素

        置换元素：有自身初始宽高，通过改变html属性的属性值，可以改变在浏览器中显示样式。如：input、textarea、select

        非置换元素：除了置换元素

常见行内块

        img、input、textarea、select

        select：表单域下拉列表(菜单)

        textarea：多行文本域

        语法：<textarea  name=""  cols=""  rows="" > </textarea>

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

 2、高级表单的应用

1、表单字段集  fieldset

        作用：收集用户信息，就是一个方框，相当于form标签。

        可以嵌套，可以包含文本和其他元素

        属性值：disable 禁用空间，不能输入

2、字段级标题

         语法：<legend align="left/right/center/justify"></legend>

        在fieldset 对象上边方框插入一个标题

        legend 必须是fieldset的第一个元素

3、提示信息标签

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

        包含单选框的点击范围(更方便点击)

3、高级表格

1、单元格间距        border-spacing:0

2、合并相邻单元格边框

        属性：border-collapse

        属性值：collapse 边框合并，separate 边框分开(默认值)

3、无内容时单元格显示方式 

        属性：empty

        属性值：show 显示，hide 隐藏

4、单元格计算属性：显示单元格行和列的算法

        属性：table-layout

        属性值：auto 默认，宽度随内容变化；fixed 固定宽度

5、单元格列标题

        th

6、表格标题

        属性：caption

        属性值：caption-side：top/bottom        可以在表格上下添加，左右不能

7、数据行分组

 <thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾

一个table中，只能有一个thead和一个tfoot，但可以有多个tbody

8、数据列分组

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

        只有span和width属性，span

4、css统筹

5、BFC 块级格式化上下文

1、BFC概念：

        BFC：Box Formatting Context ，块级格式化上下文

只针对块级元素，是一个独立的渲染区域，与外面布局无关

2、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