• 测开之路九十六:css进阶之元素显示和可见性


    元素显示效果:display

    块级元素,会导致换行:p、div、h...
    内联元素,不会导致换行:span、strong...

    修改属性

    让span标签换行

    让指定div不换行

    元素可见性:visibility

    一:影藏内容和位置:display: none

    二:正常显示:visibility: visible

    三:影藏内容,不影藏位置:visibility: hidden

    css

    /* 元素显示 */
    /*让span标签换行*/
    /*span{ display: block; }*/

    /*让div不换行*/
    #div_2{ display: inline; }


    /*元素可见性 visibility*/

    /*none:位置和内容不显示*/
    /*display: none*/


    /*visible正常显示*/
    /*visibility: visible*/

    /*hidden元素内容不显示,位置显示*/
    /*visibility: hidden*/

     html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>文字样式</title>
    <link rel="stylesheet" href="../css/css08.css">
    </head>
    <body>
    <h1>元素显示和可见性</h1>

    <p>这是<strong>p标签</strong>的内容</p>
    <div>
    这是 <span style="color: red">第一层div</span>的内容
    <div id="div_2">
    这是 <span style="color: blue; visibility: hidden">第二层div</span>的内容
    </div>
    </div>

    </body>
    </html>
  • 相关阅读:
    什么是CMS
    TP3.2项目—微信推广页
    《实用技巧》——让你的网站变成响应式的3个简单步骤
    thinkphp分页带数据
    tp框架表单验证 及ajax
    tp框架做留言板
    随时修改添加,thinkphp小知识
    thinkphp使用ajax
    thinkphp修改和删除数据
    tp框架查询
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/11408149.html
Copyright © 2020-2023  润新知