高级表单、表格+bfc讲解与使用

高级表单、表格、bfc

1.表单新增标签及属性值类型

1.1表单字段集<fieldset></fieldset>

描述：相当于一个方框，可以嵌套，在内部可设多个。

1.2 字段集标题<legend></legend>

描述：插入标题，必须是fieldset标签的第一个元素。

1.3 提示信息标签<label></label>

描述：点击文字时，会跳到被绑定id的input方框中；

例：<label for=”demo”></label>  < input type=”text” id=”demo”/>

1.4 上传文件框

描述：type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属性可实现多选

例：<input type="file" multiple="multiple" />

1.5 图像域

描述：可以作为提交按钮

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

 

2.表格新增标签及属性

2.1添加分割线 rules

rows添加行与行之间的分割线  

cols添加列与列之间的分割线   

all添加行列之间的分割线   

none没有

groups行组或列组之间的分割线

 

2.2 添加分组  colgroup || col

 描述：colgroup列| |col列组   span该列组占据的列数

区别：colgroup 可以加分割线，col不行

<colgroup span="2"></colgroup>

<colgroup span="2"></colgroup>

<col span="2"></colgroup>

 

2.3 添加行分组 thead tbody tfoot（可有多个tbody）

顺序：<!-- 1.thead表头>tr>th-->

      <!-- 3.tfoot表尾>tr>td -->

      <!-- 2.tbody表体>tr>td -->

//tbody是固定的值加载时需要时间，所以放在后面，先把表头表尾先加载

2.4 添加表格标题 <caption></caption>

 

必须放在表格第一个元素

2.5 新增属性

2.5.1 单元格间距 (该属性必须给table添加)

border-spacing:value;

2.5.2 合并相邻单元格边框 (该属性必须给table添加)

border-collapse:separate(边框分开) || collapse(边框合并);

2.5.3 表格标题的位置

caption-side：top/right/bottom/left

 

3.bfc介绍与使用

3.1 bfc描述:

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

3.2 BFC的布局规则

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

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

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

盒模型=content+padding+border+margin。Width指的是content的宽，height=content的高。

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

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

6、计算BFC的高度时，浮动元素也参与计算

3.3 什么时候会触发BFC

1、float属性不为none

2、position为absolute（有定位的父元素或者html）或fixed（可视窗口）

3、display为inline-block, table-cell, table-caption, flex, inline-flex（css3）

4、overflow不为visible

3.4 bfc的使用

1、自适应两栏布局（左边定宽+浮动，右边不定宽+overflow：hidden）

2、防止margin合并（给当前元素建立一个子元素，把margin-bottom给子元素添加，当前元素在添加overflow：hidden；）

3、清除浮动（子元素添加浮动后，父元素没有高度，这时需要给清除子元素的浮动。需要给父元素添加）

方法一：overflow：hidden；优点：方便简洁 缺点：有部分想要显示的内容无法显示

方法二：在父元素的最后一个子元素后面添加一个元素；优点：兼容性好 缺点：创建时麻烦，多了很多标签，可读性低；

方法三：给父级添加一个伪元素（优点：万能清除，没有顾虑 缺点：创建时麻烦些）

例：.clear::after{

content:'';

display:block;

height:0;

overflow:hidden;

clear:both;

}