知识总结
一、表单补充
1:表单作用:显示数据。
< table>
< tr>
< t d>< / t d>
< t d>< / t d>
< t d>< / t d>
</ tr>
< / table>
2:表格标签补充:
(1)表格的数据行分组
< t head>< / t h ea d> 表头
</ t b o by> 表体
</t foot> 表尾
注:一个表格有一个表头和表尾,但是可以包含多个表体。
(2)列表题标签
< t h></ t h >
默认的样式:左右居中,文本加粗。
(3)表格标题
< caption>< /caption>
标题的位置:
C s s属性:caption-side:left/right/top/bottom
注:left/right有兼容问题:火狐能识别。
(4)数据列分组(了解,应用率不高)
< col g r o up span=”把几列分成一组”></co lg r ou p>
3:表单里面重要的html属性:
Colspan=“”合并列
Rowsapn=“”合并行
Cellspacing=“”清除边距
Cellpadding=“”清除间距
Rules=””分隔线
属性值:all/rows/cils/groups
4:表格css属性的补充:
(1)相邻单元格边框进行合并
Border-collapse:(添加在table上面)
属性值:separate(分开状态)/collapse(合并)
(2)相邻单元格之间的间距(添加在table上面)
Border-spacing:
(3)是否显示单元格区域(没有内容的时候,让其隐藏)
Empty-cells:show/hide
(4)table-layout:(表格宽度设置)
属性值:auto(默认值,根据内容分配宽度)优点:灵活。 缺点:性能消耗比较大。
Fixed(不再根据内容去分配宽度)优点:性能消耗低。缺点:不灵活
注:单元格宽度默认状态:根据内容,内容的量越多,分配的宽比较多(自动)
二、表单补充
1:表单的作用:收集用户信息
< form cation=”数据提交的路径” name=”” method=”数据提交方式”>
2:表单控件:
< input type=”text”> 文本框
< input type=”password”> 密码框
< input type=”submit”> 提交按钮
< input type=”reset”> 重置按钮
< input type=”button”> 空按钮
表单控件的补充:
(1)单选按钮
< input type=”radio”>
注:在单选按钮里面:每一组单选按钮,保持name一致。
(2)多选按钮(复选框)
< input type=”checkbox”>
(3)下拉菜单(下拉列表)
< select>
< option>< /option>
< option>< /option>
< option>< /option>
…
< /select>
(4)多行文本域
</t ex tar ea>
Cols和rows以字符为单位
注:阻止用户进行缩放 css属性:resize:none;
(5)上传文本框
< input type=”file”>
3:补充表单的html属性
(1)默认选中:checked=“checked”
(2)表单控件的禁用:disabled=“disabled”
(3)下拉列表里面的默认选中:selected=“selected”
4:表单里面的标签
Fieldset(表单字段集)
作用:给表单做分组。
特点:默认情况下,自带边框。可以进行互相嵌套。
Legend(字段集标题)
作用:是fieldset一组里面的一个标题
特点:一般情况下,放在fieldset第一个子元素位置。
< label for=””>< /label>
说明:label里面放的是提示信息
For属性:绑定对应控件的ID名。
三、BFC(布局逻辑)会计格式化上下文
BFC( block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有block-level box(块)参与,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干。
BFC布局规定:
一:内部的box 会在垂直方向,一个接一个的放置。
二:box 垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠(按最大值设置)
三:每个元素的margin box的左边,与包含块margin box的左边相接触。
四:BFC的区域不会与float box重叠。
五:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
六:计算BFC的高度时,浮动元素也参与计算
BFC触发条件:
1:html就是一个BFC
2:float属性不为none
3:position为absolute或fixed
4:display为inline-block,table-caption,flex,inline-flex
5:overflow不为visible