我的筆記1：display與visibility用法

時間 2019-11-05

原文原文鏈接

有人會將CSS中的屬性display和visibility混淆，他們看似沒什麼不一樣，其實區別是很大的。css

visibility屬性控制定位的元素是否可見，取值包括：visible（可見）、hidden（隱藏）、inherit（繼承），默認值是inherit。visibility屬性與display屬性的不一樣之處在於：當元素被隱藏時，visibility屬性定義的元素任然爲保留原有的顯示空間。html

例如如下代碼：code

<html>
  <head>
      <title>display和visibility</title>
      <style type="text/css">
         #dis{
              boder:2px solid red;
              width:100px;
              margin:10px;
         }
         #vis{
              border:2px solid red;
              margin:10px;
              width:100px;
        }
     </style>
  </head>
  <body>
       <div id="dis">這是案例1</div>
       <div id="vis">這是案例2</div>
  </body>
</html>

若是咱們要隱藏案例1，同時案例2衝上來佔據案例1的位置，咱們能夠使用以下代碼對案例1進行格式化：htm

#dis{
    border:2px solid red;
    width:100px;
    margin:10px;
    display:none;
}

若是要隱藏案例2，但保留其位置爲空白，咱們能夠使用如下代碼對案例1進行格式化：繼承

#dis{
     border:2px solid red;
     width:100px;
     margin:10px;
     visibility:hidden;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。