• css中的display(显示)和visibility(可见性)


    display定义和用法

    display 属性规定元素应该生成的框的类型。

    说明

    这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

    注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。

    默认值: inline
    继承性: no
    版本: CSS1
    JavaScript 语法: object.style.display="inline"

    可能的值

    描述
    none 此元素不会被显示。
    block 此元素将显示为块级元素,此元素前后会带有换行符。
    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block 行内块元素。(CSS2.1 新增的值)
    list-item 此元素会作为列表显示。
    run-in 此元素会根据上下文作为块级元素或内联元素显示。
    compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row 此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column 此元素会作为一个单元格列显示(类似 <col>)
    table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption 此元素会作为一个表格标题显示(类似 <caption>)
    inherit 规定应该从父元素继承 display 属性的值。

    visibility定义和用法

    visibility 属性规定元素是否可见。

    提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

    说明

    这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

    默认值: visible
    继承性: yes
    版本: CSS2
    JavaScript 语法: object.style.visibility="hidden"

    可能的值

    描述
    visible 默认值。元素是可见的。
    hidden 元素是不可见的。
    collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
    inherit 规定应该从父元素继承 visibility 属性的值。
  • 相关阅读:
    痞子衡嵌入式:并行NAND接口标准(ONFI)及SLC Raw NAND简介
    痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(6)- Bootable image格式与加载(elftosb/.bd)
    痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(5)- 再聊eFUSE及其烧写方法
    痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(4)- Flashloader初体验(blhost)
    Hystrix完整配置列表
    使用Redis实现UA池
    使用Redis实现延时任务(二)
    使用Redis实现延时任务(一)
    一文彻底理解Redis序列化协议,你也可以编写Redis客户端
    一个低级错误引发Netty编码解码中文异常
  • 原文地址:https://www.cnblogs.com/wgbs25673578/p/5065238.html
Copyright © 2020-2023  润新知