表格补充 表单补充 BFC

表格标签补充“

A，数据行分组

<thead></thead>表头

<tbody></tbody>表体

<tfoot></tfoot>表尾

每一个表格只能有一个表头和表尾

B，数据列分组

<colgroup></colgroup>有span=“把几列分成几组”

C，列标题标签

<th></th>

默认样式;左右居中，文本加粗

D，表格标题标签

<caption></capyion>

默认显示的位置，表格的上方了解caption-side控制标题的位置

属性值：

right

left

top

bottom

right和left只有火狐能识别

补充表格的css属性

A，相邻单元格边框是否合并（添加table上面）

border-collaose：；

separate  默认值：分开

collapse 合并（细线）

B，相邻单元格的间距

border-spacing：；（九宫格）

border-bottom：1px；底边框 （一条线）

B，是否显示，没有内容的td的区域

empty-cells：

属性值：hide 隐藏   show 显示

C，单元格的宽度的问题：

默认情况：

每个td的宽自动状态，先去判断内容的量，如果内容量多变大，内容量少，宽度就会显示的比较小

table-layout：；

主要是控制单元格固定或自动

属性值：

auto（默认值）

auto执行逻辑，根据内容多少来设置td的内容

弊端：性能消耗比较大

优点：灵活

fixed（固定）

fixed执行逻辑，当td的宽度确定后，不再受到内容的影响，宽度可以设置

弊端：不灵活

优点：性能消耗少

三，补充表格html属性

rules=”groups/rows/cols/all/none”

组分/ 单线/竖线/井字

表单的作用收集用户信息

表单元素：

<input type=”text”>

“password”

“sumbint”

“button”

“reset”

补充表单元素：

1，单选按钮：

<input type=”radio”>

注：同一组的单选按钮保持name属性值相同

男<input type=”radio” name=”aaa”>

女<input type=”radio” name=”aaa”>

默认选择：checked=”checked”  重点要记

禁用选择（所有表单元素）：

disabled=”disabled”

2，多选按钮：

<input type=”checkbox” name=”可以写很多个”>

3,下拉菜单:

<select name=”id”>

<option value=”1990”>

</option>

</select>

4,多行文本域

<textarea></textarea>

col=”30” 以字符为单位

row=”10” 以字符为单位

禁止textarea拖拽：css属性

resize：none；

5，上传文件框：

<input type=”file”>

6，隐藏input

type=”hidden”

<input type=”hidden”>

补充form里面的标签

fieldset：表单字段集

给表单元素做分组

fieldset可以相互嵌套并且自带边框

lefend 表单字段集标题，一般作为fieldset第一个子元素出现

label 提示信息

<table for=”绑定对应表单元素的id名称”>

</table>

BFC:：纯概念-》布局逻辑规定

直译：块状格式化上下文（就是一个独立的渲染区域）

注：只有块状元素参与BFC布局逻辑

一，BFC的布局规则

A,内部的box会垂直方向一个接一个的放置

B，box垂直方向的距离由margin决定属于同BFC的两个相邻的盒子上下margin会重叠

C，每个元素的margin左侧与包含块border，box的左边接触

D，BFC的区域不会与float box重叠

E，BFC就是页面上一个隔离独立渲染的容器，容器里面的子元素不会影响到盒子外面的元素

F，计算BFC高度时，浮动元素也参与计算

二，BFC触发条件

A，根元素（html） 其它元素，其display属性值为block、list-item、table、flex、grid。

B，Float属性不为none

C，Position为absolute或fixed

D，Display为inline-block，table-cell，table-caption，flex，inline-flex

E，Overflow为visibiel（默认值）

三，BFC的应用

1，解决高度坍塌

2，放置margin上下重叠

3，完成自适应二栏布局（左侧宽度固定 右侧宽度自适应）

width：calc（100%—宽度）

可以使用以下方法解决BFC两个相邻的盒子上下margin会重叠的问题：

1. 使用clearfix清除浮动。

2. 为两个相邻的盒子添加负边距。

3. 为两个相邻的盒子添加overflow:hidden;。

4. 为两个相邻的盒子添加position:relative;。