zoukankan      html  css  js  c++  java
  • 表格补充 表单补充 BFC

    表格标签补充

    A,数据行分组

    <thead></thead>表头

    <tbody></tbody>表体

    <tfoot></tfoot>表尾

    每一个表格只能有一个表头和表尾

    B,数据列分组

    <colgroup></colgroup>span=“把几列分成几组”

    C,列标题标签

    <th></th>

    默认样式;左右居中,文本加粗

    D,表格标题标签

    <caption></capyion>

    默认显示的位置,表格的上方了解caption-side控制标题的位置

    属性值:

    right

    left

    top

    bottom

    rightleft只有火狐能识别

    补充表格的css属性

    A,相邻单元格边框是否合并(添加table上面)

    border-collaose:;

    separate  默认值:分开

    collapse 合并(细线)

    B,相邻单元格的间距

    border-spacing:;(九宫格)

    border-bottom1px;底边框 (一条线)

    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属性

    resizenone

    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左侧与包含块borderbox的左边接触

    D,BFC的区域不会与float box重叠

    E,BFC就是页面上一个隔离独立渲染的容器,容器里面的子元素不会影响到盒子外面的元素

    F,计算BFC高度时,浮动元素也参与计算

     

    二,BFC触发条件

    A,根元素(html

    B,Float属性不为none

    C,Positionabsolutefixed

    D,Displayinline-blocktable-celltable-captionflexinline-flex

    E,Overflowvisibiel(默认值)

     

    三,BFC的应用

    1,解决高度坍塌

    2,放置margin上下重叠

    3,完成自适应二栏布局(左侧宽度固定 右侧宽度自适应)

    widthcalc100%—宽度)

     

     

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    深入理解幂等性(转)
    Mysql数据库表结构设计准则
    nodejs以对象做对象的key导致value一直被覆盖
    数组常用方法
    css选择器总结
    CSS 选择器权重计算规则
    ElementUI select
    linux-sed命令
    vue 组件数据传递:
    vue视频: 自定义指令 && 拖拽 && 自定义键盘信息
  • 原文地址:https://www.cnblogs.com/ht955/p/13781876.html
Copyright © 2011-2022 走看看