zoukankan      html  css  js  c++  java
  • HTML中visibility:hidden 和 display:none 的区别及实例?

    visibility:hidden   和    display:none   的区别

    都是隐藏
      但是visibility:hidden隐藏以后还会继续保留位置
      display:none   隐藏以后就不会占位置

    关于display:none 隐藏如下实例的

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
       div{
        100px;
        height:100px;
        border: 1px solid #f00;
        display: inline-block;
       }
       .div01{
        /*visibility: hidden;*/
        display: none;
       }
      </style>
     </head>
     <body>
      <div>1</div>
      <div class="div01">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
     </body>
    </html>

    结果如图

     

    关于visibility:hidden隐藏如下实例的

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
       div{
        100px;
        height:100px;
        border: 1px solid #f00;
        display: inline-block;
       }
       .div01{
        visibility: hidden;
        /*display: none;*/
       }
      </style>
     </head>
     <body>
      <div>1</div>
      <div class="div01">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
     </body>
    </html>

    结果如图


    以上两个实例可以看到visibility:hidden   和    display:none   的明显区别

  • 相关阅读:
    [ZZ]终极期望
    推荐一部好电影
    读书笔记:《Java2 教程》(五)
    波音飞机的消息
    雪景
    [ZZ]候捷谈Java反射机制
    关于J2ME开发的感想(20060505更新)
    读书笔记:《Java2 教程》(七)
    读书笔记:《Java2 教程》(六)
    注册了Bloglines
  • 原文地址:https://www.cnblogs.com/zxy52/p/10942886.html
Copyright © 2011-2022 走看看