day10高级表单表格bfc

最新推荐文章于 2023-12-09 09:46:38 发布

417545911

最新推荐文章于 2023-12-09 09:46:38 发布

阅读量90

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_44718740/article/details/119058457

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、表单补充

1.textarea标签

定义多行的文本输入控件

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体，可以通过cols(宽，列数)和rows(行数)属性来规定textarea的尺寸,不过更好的办法是使用css的height和width属性。

属性：属性值

resize:none;/清除文本控件右下角的放大按钮；

2.select>opion标签

select元素可创建单选或多选菜单

select元素中的option标签用于定义列表中的可用选项。

（下拉列表选项）

3.自带边框的标签

input hr select textarea

4.fiedset标签

    <form action="">
        <!-- 收集用户信息的 就是一个方框 相当于form标签框 -->
        <fieldset>
            <legend align="center">传国个人信息表</legend>
            姓名: <input type="text" placeholder="请输入您的姓名"> <br> <br>
            密码: <input type="password" placeholder="请输入您的银行卡密码"> <br><br>
            性别:
            <label for="nan">
                <input type="radio" name="box" id="nan">男
            </label>
            <label for="nv">
                <input type="radio" name="box" id="nv">女
            </label> <br><br>

            <input type="file"> <br><br>
            <input type="submit">

        </fieldset>
    </form>

fieldset元素可将表单内的相关元素分组，当一组表单元素放到标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素标签没有必需的或唯一的属性。

legend标签为fieldset元素定义标题

运行结果图：在这里插入图片描述

5.lable标签

为input元素定义标记

lable元素不会向用户呈现任何特殊效果。不过，它会为鼠标用户改进了可用性。如果您在lable元素内点击文本，就会触发此控件。就是说，当用户选择中该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

标签的 for 属性应当与相关元素的 id 属性相同。

注释：“for” 属性也可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。

6.上传文件

<input type="file">

二、表格补充

1.border-spacing

单元格之间的间距

2.border-collapse:

单元格边框合并

属性值：

1.separate 默认值。边框会被分开，不会忽略border-spacing和empty-cells属性

2.collapse 如果可能，边框会合并为一个单一的边框。

3.inherit 规定应该从父元素继承border-collapse属性的值

3.empty-cells

是否显示表格中的空单元格（仅用于“分离边框”模式）

属性值

1.hide 不在空单元格周围绘制边框。

2.show 默认在空单元格作为绘制边框

3.inherit 规定应该从父元素继承empty-cells属性的值

4.table-layout

用来显示表格单元格、行、列的算法规则

属性值

1.auto 默认。列宽度由单元格内容设定

2.fixed 列宽由表格宽度和列宽度设定

3.inherit 继承父元素

5.caption标签

定义表格标题

caption标签必须紧随table标签之后。默认会居中于表格之上

caption{
      caption-side: top
       /* 上下在所有的浏览器中都可以显示,左右浏览器会有问题 */
       }/

6.数据的行分组

thead 标签定义表格的表头

tbody 标签用于对表格中的主体内容进行分组

thfoot标签用于对表格中的页脚内容进行分组

如果要使用这些元素，必须同时使用这3个元素，且必须在table标签内部使用这些标签

<body>
    <table>
        <colgroup span="1" width="400"></colgroup>
        <caption>新闻列表</caption>
       <thead>
            <tr>
                    <th>新闻列表</th>
                    <th>时间</th>
                </tr>
       </thead>
       <tbody>
        <tr>
            <td>新闻新闻新闻新闻新闻新闻</td>
            <td>2021-07-23</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>新闻新闻新闻新闻新闻新闻</td>
            <td>2021-07-23</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>新闻新闻新闻新闻新闻新闻</td>
            <td>2021-07-23</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>新闻新闻新闻新闻新闻新闻</td>
            <td>2021-07-23</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>新闻新闻新闻新闻新闻新闻</td>
            <td>2021-07-23</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>新闻新闻新闻新闻新闻新闻</td>
            <td>2021-07-23</td>
            <!-- <td>3</td> -->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>新闻的条数</td>
            <td>时间的变化</td>
        </tr>
    </tfoot>
    </table>
</body>

	    <style>
        table {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 单元格与单元格之间的间距 */
            /* border-spacing: 0; */
            /* 合并单元格属性 */
            /* border-collapse: collapse */
            /* 无内容时候 单元格的显示方式 */
            /* empty-cells:hide */
            /* 单元格的计算属性: 安检 */
            /* table-layout: fixed */
        }
        td,th{
            border: 1px solid #000
        }
        caption{
            caption-side: bottom
            /* 上下在所有的浏览器中都可以显示 */
        }
        thead{
            background: pink
        }
        tbody{
            background: skyblue
        }
        tfoot{
            background: greenyellow
        }
    </style>

运行结果图：在这里插入图片描述

7.数据的列分组

col标签为表格中一个或多个列定义属性值。

**提示：**请为标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等

<col align="left" />
  <col align="left" />
  <col align="right" />

colgroup标签用于对表格中的列进行整合，以便对其进行格式化。

<colgroup span="2" align="left"></colgroup>/*第一个colgroup元素横跨两列*/
<colgroup align="right" style="color:#0000FF;"></colgroup>

三、置换元素和非置换元素

1.置换元素

有自身初始的宽高，类似设置了行内块元素。不受 css 格式化范围控制的元素，css 渲染模型并不考虑对此内容的渲染

input(type)、textarea、select

2.非置换元素

除了置换元素其他都是非置换

div等

3.常见的行内块元素

img input textarea select

四、BFC

1.概念：

Box、Formatting(格式化)、Context(上下文)—块级格式化上下文。BFC是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2.BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3、每个元素的margin box的左边，与包含块border box的左边相接触

4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

5**、BFC的区域不会与float box重叠。**

6、计算BFC的高度时，浮动元素也参与计算

3.哪些元素会触发BFC

- 根元素 HTML

- float属性不为none ; left&&right

- position为absolute或fixed

- display为inline-block, flex

- overflow不为visible; auto hidden scroll

五.BFC的应用

1.防止高度塌陷

父元素的高度不确定的时候，如果子元素中有浮动元素，这时候在父元素上添加一个overflow:属性值（默认值visible除外)可以触发BFC;依据：计算BFC的高度时，浮动元素也参与计算

2.解决margin上下间距的重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠（按照最大margin值设置）.可以让两个元素处于不同的BFC中，这样就不会发生重叠；


  <style>  
    #father {  
      background-color: pink;  
      overflow: hidden;  
    }  
    #father .child {  
      background-color: red;  
      margin: 15px auto 20px;  
    }  
  </style>  

  <div class="child">这是第一个div</div>  
  <div class="child">这是第二个div</div>  
</section>

上面例子就是会发生上下间距重叠的例子，下面是在为第一个div在套一个可以出发BFC的盒子，比如

<div style="overflow:hidden">  
  <div class="child">这是第一个div</div>  
</div>

依据：1.属于同一个BFC的两个相邻Box的margin会发生重叠 2‘BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

3.两栏自适应布局

（参考11千峰后台两栏自适应布局）

问题：元素浮动后发生重叠的问题。

做法：让千锋教育后台oa左边选项栏的元素浮动，由于脱离了标准文档流，下一个元素会和它发生重叠，为了不重叠，把右边的元素设置成BFC（overflow:auto）

**依据：**BFC的区域不会与float box重叠。

417545911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录