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%—宽度)

     

     

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    CodeForces 734F Anton and School
    CodeForces 733F Drivers Dissatisfaction
    CodeForces 733C Epidemic in Monstropolis
    ZOJ 3498 Javabeans
    ZOJ 3497 Mistwald
    ZOJ 3495 Lego Bricks
    CodeForces 732F Tourist Reform
    CodeForces 732E Sockets
    CodeForces 731E Funny Game
    CodeForces 731D 80-th Level Archeology
  • 原文地址:https://www.cnblogs.com/ht955/p/13781876.html
Copyright © 2011-2022 走看看