CSSで非表示にするために使用されるプロパティは何ですか-フロントエンドQ&A-php.cn

CSSで非表示にするために使用されるプロパティは何ですか

青灯夜游

リリース： 2022-05-18 17:59:05

オリジナル

3586 人が閲覧しました

非表示に使用される 3 つの属性: 1. 可視性、属性値が「hidden」の場合、非表示要素自体がその位置を占有することができます; 2. 表示、値が「none」の場合、占有されません位置要素自体を非表示にする; 3. オーバーフロー、値が「非表示」の場合、ボックスの外のコンテンツを非表示にすることができます。

CSSで非表示にするために使用されるプロパティは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS での非表示に使用される属性と値

visibility:hidden Hidden要素自体を非表示にし、Web ページ内の位置を占有します
display:none 要素自体を非表示にし、Web ページ内の位置を占有しません (一般的に使用されます)
overflow:hidden ボックスを超えたコンテンツを非表示にします (ボックスを超えたコンテンツは非表示になりますが、スペースを占有しません)

例 1: 表示: 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で非表示にするために使用されるプロパティは何ですか

#例 2: 表示: 非表示、位置を占有します、 hiddens

<!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で非表示にするために使用されるプロパティは何ですか

例 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 ビデオチュートリアル
、Web フロントエンド)
以上がCSSで非表示にするために使用されるプロパティは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。