Apakah perbezaan antara limpahan: auto dan limpahan: tatal dalam CSS?-html tutorial-php.cn

Apakah perbezaan antara limpahan: auto dan limpahan: tatal dalam CSS?

WBOY

Lepaskan： 2023-08-28 11:29:02

ke hadapan

821 orang telah melayarinya

overflow: auto 和 overflow: scroll 在CSS中有什么区别？

Dalam CSS, atribut 'overflow' digunakan untuk menentukan limpahan kandungan elemen HTML. Contohnya, jika ketinggian elemen div ialah "500px" dan ketinggian kandungan dalaman ialah "1000px", kita perlu menjadikan kandungan itu boleh ditatal.

Dalam tutorial ini, kita akan mempelajari perbezaan antara nilai "auto" dan "tatal" dari sifat "limpahan" CSS.

Limpahan: Automatik dalam CSS

Dalam CSS, limpahan: auto menetapkan limpahan elemen HTML kepada auto. Ini bermakna jika kandungan div melimpah, ia akan menetapkan 'tatal' kepada nilai sifat limpahan jika tidak, ia akan menetapkan 'tiada' kepada nilai sifat limpahan.

Tatabahasa

Pengguna boleh menggunakan limpahan: ciri CSS auto mengikut sintaks berikut.

overflow: auto;

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah mencipta elemen div HTML dan memberikan nama kelas "utama". Selain itu, kami menetapkan lebar dan ketinggian tetap untuk elemen div. Selain itu, kami menetapkan sifat CSS "overflow: auto"

Dalam output, pengguna boleh melihat bahawa ia menunjukkan bar skrol kerana saiz kandungan lebih besar daripada saiz elemen div.

<html>
<head>
   <style>
      .main {
         height: 100px;
         width: 500px;
         font-size: 1rem;
         overflow: auto;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2> <i> overflow: auto </i> in CSS </h2>
   <div class = "main">
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, saiz kandungan dalaman elemen div adalah lebih kecil daripada saiz elemen div. Dalam output, pengguna boleh melihat bahawa elemen div tidak boleh ditatal kerana kandungan tidak melimpah.

<html>
<head>
   <style>
      .main {
         height: 200px;
         width: 100px;
         font-size: 1rem;
         overflow: auto;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2> <i> overflow: auto </i> in CSS </h2>
   <div class = "main">
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
   </div>
</body>
</html>

Salin selepas log masuk

Limpahan: Tatal dalam CSS

"overflow:scroll" sentiasa memaparkan bar skrol dalam elemen HTML, walaupun kandungan elemen tidak melimpah, dan ia sentiasa memaparkan bar skrol mendatar dan menegak.

Tatabahasa

Overflow: scroll;

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah menambahkan kandungan pada elemen div yang sesuai dengan dimensi elemen div. Selain itu, kami menggunakan CSS untuk menetapkan "overflow:scroll" untuk elemen div.

Dalam output, pengguna boleh melihat bahawa walaupun kandungan elemen div tidak melimpah, ia memaparkan bar skrol.

<html>
<head>
   <style>
      .main {
         height: 200px;
         width: 300px;
         font-size: 1rem;
         overflow: scroll;
         border: 2px solid blue;
      }
   </style>
</head>
<body>
   <h2> <i> overflow: scroll </i> in CSS </h2>
   <div class = "main">
      <p> This is a content. </p>
      <p> This is a content. </p>
      <p> This is a content. </p>
      <p> This is a content. </p>
   </div>
</body>
</html>

Salin selepas log masuk

Perbezaan antara limpahan:auto dan limpahan: tatal

Berikut ialah jadual perbezaan untuk sifat CSS limpahan:auto dan limpahan: tatal.

Limpahan: Automatik	Limpahan:Tatal
Tunjukkan bar skrol hanya apabila kandungan elemen HTML melimpah atau tidak sesuai dengan dimensi elemen asal.	Ia sentiasa menunjukkan bar skrol.

Contoh

Dalam contoh di bawah, kami menunjukkan output overflow:scroll dan overflow:automatic bersama-sama. Kami menetapkan overflow:scroll untuk elemen div dengan nama kelas "scroll" dan tetapkan overflow:auto untuk elemen div dengan nama kelas "auto".

Dalam output, pengguna boleh melihat bahawa limpahan:skrol menunjukkan bar skrol, tetapi bukan limpahan:auto.

<html>
<head>
   <style>
      .scroll {
         height: 220px;
         width: 500px;
         font-size: 1rem;
         overflow: scroll;
         border: 2px solid blue;
      }
      .auto {
         height: 200px;
         width: 500px;
         overflow: auto;
         border: 3px dotted red;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h2> Difference between overflow: scroll and overflow: auto in CSS</h2>
   <div class = "scroll">
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
   </div>
   <div class = "auto">
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
   </div>
</body>
</html>

Salin selepas log masuk

Pengguna mengetahui perbezaan antara sifat CSS "overflow:auto" dan "overflow:scroll". Satu-satunya perbezaan antara keduanya ialah apabila ia menunjukkan bar skrol.

Atas ialah kandungan terperinci Apakah perbezaan antara limpahan: auto dan limpahan: tatal dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!