CSS中用于隱藏的屬性是哪個

發(fā)布時間：2022-05-19 09:34:14 來源：億速云閱讀：270 作者：zzz 欄目：web開發(fā)

這篇文章主要介紹“CSS中用于隱藏的屬性是哪個”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“CSS中用于隱藏的屬性是哪個”文章能幫助大家解決問題。

用于隱藏的3個屬性：1、visibility，當(dāng)屬性值為“hidden”時，可占位置的隱藏元素本身；2、display，當(dāng)值為“none”，可不占位置的隱藏元素本身；3、overflow，當(dāng)值為“hidden”時，可隱藏超出盒子的內(nèi)容部分。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS中用于隱藏的屬性和值

visibility:hidden 隱藏元素本身，并且在網(wǎng)頁中占位置
display:none 隱藏元素本身，并且在網(wǎng)頁中不占位置（常用）
overflow:hidden 隱藏超出盒子的內(nèi)容部分（超出的內(nèi)容隱藏但不占位）

示例1：display:none 不占位置隱藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隱藏元素</title>
    <style>
      * {
        /* 去除頁面默認(rèn)的邊距 */
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        float: left;
        background-color: orange;
        margin: 50px 50px;
        /* 默認(rèn)顯示，不隱藏 */
        display: block;
      }
      /* 鼠標(biāo)懸停在box1隱藏box1 */
      .box1:hover {
        display: none;
      }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>box1</p>
      <p>display: none;</p>
    </div>

    <div>普通</div>
  </body>
</html>

CSS中用于隱藏的屬性是哪個

示例2：visibility:hidden，占位置隱藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隱藏元素</title>
    <style>
      * {
        /* 去除頁面默認(rèn)的邊距 */
        padding: 0;
        margin: 0;
      }

      .box2 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px 50px;
        
      }
   /* 鼠標(biāo)懸停在box2隱藏box2 */
  .box2:hover {
  visibility: hidden;
  }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
      }
    </style>
  </head>
  <body>

    <div>
      <p>box2</p>
      <p>
        visibility: hidden; <br />
      </p>
    </div>

    <div>普通</div>
  </body>
</html>

CSS中用于隱藏的屬性是哪個

示例3：overflow:hidden 隱藏超出盒子的內(nèi)容部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隱藏元素</title>
    <style>
      * {
        /* 去除頁面默認(rèn)的邊距 */
        padding: 0;
        margin: 0;
      }
      .box3 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
 
       
      }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      <p>box3</p>
      <p>
        內(nèi)容超出了
      </p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
    </div>
    <div>
<p>box4</p>
<p>
  overflow: hidden;<br />內(nèi)容超出,超出部分隱藏
</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
</div>
  </body>
</html>

CSS中用于隱藏的屬性是哪個

關(guān)于“CSS中用于隱藏的屬性是哪個”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

向AI問一下細(xì)節(jié)

CSS中用于隱藏的屬性是哪個

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽