20200401知识总结

知识总结

一、表单补充
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