Apakah sifat yang digunakan untuk bersembunyi dalam CSS-Soal Jawab bahagian hadapan-php.cn

Apakah sifat yang digunakan untuk bersembunyi dalam CSS

青灯夜游

Lepaskan： 2022-05-18 17:59:05

asal

3588 orang telah melayarinya

3 atribut yang digunakan untuk menyembunyikan: 1. keterlihatan, apabila nilai atribut "tersembunyi", elemen tersembunyi itu sendiri boleh menduduki kedudukan 2. paparan, apabila nilai "tiada", ia tidak menduduki kedudukan Sembunyikan elemen itu sendiri 3. limpahan, apabila nilai "tersembunyi", kandungan di luar kotak boleh disembunyikan.

Apakah sifat yang digunakan untuk bersembunyi dalam CSS

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Sembunyikan sifat dan nilai dalam CSS

visibility:hidden Sembunyikan elemen itu sendiri dan dalam web page Occupy position
display:none Sembunyikan elemen itu sendiri dan jangan menduduki kedudukan dalam halaman web (biasa digunakan)
overflow:hidden Sembunyikan elemen di luar kotak Bahagian kandungan (melebihi kandungan disembunyikan tetapi tidak menempati ruang)

Contoh 1: paparan:tiada yang tidak menempati ruang, menyembunyikan

<!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>

Salin selepas log masuk

Apakah sifat yang digunakan untuk bersembunyi dalam CSS

Contoh 2: keterlihatan:tersembunyi, menduduki kedudukan tersembunyi

<!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>

Salin selepas log masuk

Apakah sifat yang digunakan untuk bersembunyi dalam CSS

Contoh 3: limpahan: tersembunyi Sembunyikan kandungan di luar kotak

<!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>

Salin selepas log masuk

Apakah sifat yang digunakan untuk bersembunyi dalam CSS

(Mempelajari perkongsian video: tutorial video css , bahagian hadapan web)

Atas ialah kandungan terperinci Apakah sifat yang digunakan untuk bersembunyi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!