Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen overflow: auto und overflow: scroll in CSS?
Was ist der Unterschied zwischen overflow: auto und overflow: scroll in CSS?
- WBOYnach vorne
- 2023-08-28 11:29:02822Durchsuche
In CSS wird das Attribut „overflow“ verwendet, um den Überlauf des Inhalts eines HTML-Elements anzugeben. Wenn beispielsweise die Höhe des div-Elements „500 Pixel“ und die Höhe des inneren Inhalts „1000 Pixel“ beträgt, müssen wir den Inhalt scrollbar machen.
In diesem Tutorial lernen wir den Unterschied zwischen den Werten „auto“ und „scroll“ der CSS-Eigenschaft „overflow“ kennen.
Überlauf: Automatisch in CSS
In CSS setzt overflow: auto den Überlauf von HTML-Elementen auf „auto“. Das bedeutet, dass bei einem Überlauf des Div-Inhalts „scroll“ auf den Wert der Überlaufeigenschaft gesetzt wird; andernfalls wird „none“ auf den Wert der Überlaufeigenschaft gesetzt.
Grammatik
Benutzer können die CSS-Eigenschaft overflow: auto gemäß der folgenden Syntax verwenden.
overflow: auto;
Beispiel
Im folgenden Beispiel haben wir ein HTML-Div-Element erstellt und ihm den Klassennamen „Haupt“ gegeben. Zusätzlich legen wir eine feste Breite und Höhe für das div-Element fest. Zusätzlich setzen wir die CSS-Eigenschaft „overflow: auto“
In der Ausgabe kann der Benutzer beobachten, dass Bildlaufleisten angezeigt werden, da die Inhaltsgröße größer als die Größe des div-Elements ist.
<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>
Beispiel
Im folgenden Beispiel sind die Abmessungen des inneren Inhalts des div-Elements kleiner als die Abmessungen des div-Elements. In der Ausgabe kann der Benutzer beobachten, dass das div-Element nicht scrollbar ist, da der Inhalt nicht überläuft.
<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>
Überlauf: Scrollen in CSS
„overflow:scroll“ zeigt immer Bildlaufleisten in HTML-Elementen an, auch wenn der Inhalt des Elements nicht überläuft, und zeigt immer horizontale und vertikale Bildlaufleisten an.
Grammatik
Overflow: scroll;
Beispiel
Im folgenden Beispiel haben wir einem div-Element Inhalt hinzugefügt, der zu den Abmessungen des div-Elements passt. Zusätzlich verwenden wir CSS, um „overflow:scroll“ für das div-Element festzulegen.
In der Ausgabe kann der Benutzer beobachten, dass der Inhalt des div-Elements zwar nicht überläuft, die Bildlaufleiste jedoch angezeigt wird.
<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>
Unterschied zwischen overflow:auto und overflow:scroll
Hier ist die Differenztabelle für die CSS-Eigenschaften overflow:auto und overflow:scroll.
Überlauf: Automatisch |
Überlauf:Scrollen |
|---|---|
Bildlaufleisten nur anzeigen, wenn der Inhalt des HTML-Elements überläuft oder nicht zu den Abmessungen des Originalelements passt. |
Es werden immer Bildlaufleisten angezeigt. |
Beispiel
Im folgenden Beispiel demonstrieren wir die Ausgabe von overflow:scroll und overflow:automatic zusammen. Wir setzen overflow:scroll für das div-Element mit dem Klassennamen „scroll“ und overflow:auto für das div-Element mit dem Klassennamen „auto“.
In der Ausgabe kann der Benutzer beobachten, dass overflow:scroll die Bildlaufleiste anzeigt, nicht jedoch overflow: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>
Benutzer haben den Unterschied zwischen den CSS-Eigenschaften „overflow:auto“ und „overflow:scroll“ kennengelernt. Der einzige Unterschied zwischen den beiden besteht darin, dass Bildlaufleisten angezeigt werden.
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen overflow: auto und overflow: scroll in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!