Day14

最新推荐文章于 2022-06-03 22:06:17 发布

undyue

最新推荐文章于 2022-06-03 22:06:17 发布

阅读量55

点赞数

本文链接：https://blog.csdn.net/undyue/article/details/105258076

版权

一、表格补充
1.表格的作用：显示数据。

     <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表格标签补充:

1:表格的数据行分组
    <thead></thead>    表头
    <tbody></tbody>    表体
    <tfoot></tfoot>    表尾

    注：一个表格有一个表头和表尾 ，但是可以包含多个表体

2:列标题标签
    <th></th>
    默认的样式：左右居中  文本加粗

3:表格标题
    <caption></caption>
    标题的位置：
        css属性： caption-side:left/right/top/bottom
            注：left/right 有兼容问题：火狐能识别

4：数据列分组（了解：应用率不高）
    <colgroup span="把几列分成一组"></colgroup>

2.表格里面重要的html属性：
colspan=""
rowspan=""
cellspacing=""
cellpadding=""
rules="" 分隔线
属性值：all/rows/cols/groups

3.表格css属性的补充：

1:相邻单元格边框进行合并  
     border-collapse:   (添加在table上面)
        属性值：
            separate  分开状态
            collapse  合并
            
2:相邻单元格之间的间距    (添加在table上面)
    border-spacing:

3: 是否显示单元格区域：（没有内容的时候，让隐藏）
    empty-cells:
        show
        hide

4：table-layout:
    auto    默认值：根据内容分配宽度（优点：灵活   缺点:性能消耗比较大）
    fixed   不再根据内容去分配宽度（优点：性能消耗低  缺点：不灵活）

4.单元格宽度默认状态：根据内容，内容的量多，分配的宽比较多（自动）

二、表单补充

表单的作用：收集用户信息

<form action="数据提交的路径" name="" method="数据提交方式"></form>

表单控件：
    <input type="text">  文本框
    <input type="password">  密码框
    <input type="submit">  提交按钮
    <input type="reset">  重置按钮
    <input type="button">  空按钮

2.补充表单控件：

    1：单选按钮：
        <input type="radio">
        注：在单选按钮里面：每一组单选按钮  保持name属性值一致。

    2: 多选按钮（复选框）
        <input type="checkbox">

    3: 下拉菜单（下拉列表）
        <select>
            <option></option>
            <option></option>
            <option></option>
            ...
        </select>

    4: 多行文本域
        <textarea></textarea>
            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
1.BFC ???( 布局逻辑 ) -> 块级格式化上下文
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2.BFC布局规定：
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边，与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

3.BFC触发条件：
1：html 就是一个BFC
2: float属性不为none
3: position为absolute或fixed
4: display为inline-block, table-cell, table-caption, flex, inline-flex
5: overflow不为visible