css表格表单和统筹

css：表格表单和统筹

学习目标

• 1、表单标签及属性高级
• 2、表格标签及属性高级
• 3、CSS统筹
• 4、BFC概念和应用场景

一、表单标签及属性高级

回顾：

表单的作用：用来收集用户的信息的; 
表单的组成：

表单域： <form name="" method="get/post" action="">
</form>
表单控件 ： <input type="text" value=""/>

提示信息

1）表单字段集

语法：<fieldset disabled="disabled"></fieldset>

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

2）字段级标题：

语法：<legend align="left/center/right/justify"></legend>
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。

3)提示信息标签：

语法：<label for="绑定控件id名"></label>

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

4）上传文件框：

语法：<input type="file" multiple="multiple" />
说明：type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属性可实现多选

5）图像域

语法：<input type="image" src="" width="" height="" alt="图片" />

二、表格标签及属性高级

回顾： 表格的作用：显示数据;

表格的基本结构：

<table>
<tr>
<td></td> 
</tr>
</table>

1、单元格间距：border-spacing:value;

说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2、合并相邻单元格边框：border-collapse:separate/collapse;

说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

3、无内容时单元格的设置：empty-cells:show/hide;

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

4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

定义表格的布局算法，设置fixed，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配；设置auto时，则随内容宽度而定；火狐浏览器存在兼容。
(fixed：固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化)

5、隔行变色设置：

双数行： tr:nth-child(2n even){ }
单数行： tr:nth-child(2n+1 odd){ }
设置单数单元格的样式和双数单元格的样式

表格标题

<caption>标题内容</caption>
caption:表格标题
表格标题位置：caption-side:top/right/bottom/left
说明：left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top

A、表格的重要属性：

1）colspan="value" 合并列
2）rowspan="value" 和并行
3）valign="top/bottom/middle/baseline" 垂直对齐方式 
4）rules="groups/rows/cols/all/none" 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条

B、数据列分组

(1) <colgroup span="value"></colgroup>

(2) <col span="value" />

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。

注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。

C、数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。
它们的出现次序是：thead、tbody/tfoot、，这样浏览器就可以在收到所有数据前呈现页脚了。必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。

详细描述：
thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

三、CSS统筹

CSS统筹     CSS滤镜

四、BFC概念和应用场景

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。

一、BFC是什么？ 

　　在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化） Context（上下文）==块级格式化上下文 的概念。

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

二、BFC布局规则：

一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

三、每个元素的margin box的左边， 与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。六、计算BFC的高度时，浮动元素也参与计算

三、哪些元素或属性能触发BFC?

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

返回顶部