表格标签补充“
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)
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%—宽度)