• 技术文章 >web前端 >css教程

    CSS的元素的隐藏与显示

    不言不言2018-04-24 16:49:48原创1123

    显示与隐藏

    1、介绍:

    display:使段落生出行内框

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

    2、display属性

    描述
    none此元素不会被显示。
    block此元素将显示为块级元素,此元素前后会带有换行符。
    inline默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block行内块元素。(CSS2.1 新增的值)
    list-item此元素会作为列表显示。
    run-in此元素会根据上下文作为块级元素或内联元素显示。
    compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    markerCSS 中有值 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 属性的值。

    3、visibility 属性

    描述
    visible默认值。元素是可见的。
    hidden元素是不可见的。
    collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
    inherit规定应该从父元素继承 visibility 属性的值。

    4、“display:none”和“visibility:hidden"

    (1)display:none:元素被隐藏之后,不占用原来的位置

    (2)visibility:hidden:元素隐藏之后,占原来的位置

    5、例

      h1{
              visibility: hidden;//隐藏占用元素空间
              display: none;//隐藏不占用空间
          }
      p{
              display: inline;//改变为内联元素
          }
      h2{
              display: block;//改变块级元素
          }

    相关推荐:

    详解CSS元素居中布局的简单方法

    以上就是CSS的元素的隐藏与显示的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:样式表 css 显示
    上一篇:css基础多栏布局 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 实例详解CSS渐变锯齿问题如何解决!• 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网