CSS中用于隐藏的属性是哪个

蜗牛互联网技术资讯2022-05-191850

这篇文章主要介绍“CSS中用于隐藏的属性是哪个”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS中用于隐藏的属性是哪个”文章能帮助大家解决问题。

用于隐藏的3个属性：1、visibility，当属性值为“hidden”时，可占位置的隐藏元素本身；2、display，当值为“none”，可不占位置的隐藏元素本身；3、overflow，当值为“hidden”时，可隐藏超出盒子的内容部分。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS中用于隐藏的属性和值

visibility:hidden 隐藏元素本身，并且在网页中占位置
display:none 隐藏元素本身，并且在网页中不占位置（常用）
overflow:hidden 隐藏超出盒子的内容部分（超出的内容隐藏但不占位）

示例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>
      * {
        /* 去除页面默认的边距 */
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        float: left;
        background-color: orange;
        margin: 50px 50px;
        /* 默认显示，不隐藏 */
        display: block;
      }
      /* 鼠标悬停在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中用于隐藏的属性是哪个 css 第1张

示例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>
      * {
        /* 去除页面默认的边距 */
        padding: 0;
        margin: 0;
      }

      .box2 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px 50px;
        
      }
   /* 鼠标悬停在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中用于隐藏的属性是哪个 css 第2张

示例3：overflow: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>
      * {
        /* 去除页面默认的边距 */
        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>
        内容超出了
      </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 />内容超出,超出部分隐藏
</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中用于隐藏的属性是哪个 css 第3张