Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara limpahan: auto dan limpahan: tatal dalam CSS?
Apakah perbezaan antara limpahan: auto dan limpahan: tatal dalam CSS?
- WBOYke hadapan
- 2023-08-28 11:29:021009semak imbas
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;
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>
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>
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;
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>
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>
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!