Heim >Web-Frontend >CSS-Tutorial >Erstellt overflow:hide in CSS einen neuen Formatierungskontext auf Blockebene?
Erstellt overflow:hide in CSS einen neuen Formatierungskontext auf Blockebene?
- WBOYnach vorne
- 2023-09-10 18:57:02937Durchsuche
Ein Blockformatierungskontext (BFC) ist der Teil des Webseitenlayouts in CSS, in dem Elemente positioniert werden und miteinander interagieren. Kurz gesagt, es ist wie ein Container, der eine Reihe von Regeln dafür definiert, wie sich Elemente innerhalb des Containers verhalten sollen.
In diesem Artikel sehen wir „Erstellt overflow:hidden einen neuen Blockformatierungskontext (BFC) in CSS
“.Die Antwort lautet „Ja“, denn in CSS kann das Attribut „overflow:hidden“ einen neuen Formatierungskontext auf Blockebene (BFC) erstellen. Wenn der Überlaufwert eines HTML-Elements nicht sichtbar ist (Standardwert), wird die Erstellung eines neuen BFC ausgelöst. BFC verhindert, dass Ränder zusammenfallen, hilft bei der Aufrechterhaltung der korrekten Positionierung, verhindert versehentliche Überlappungen und hilft dem Leser, den Kontrast zwischen zwei verschiedenen Elementen wahrzunehmen.
Schauen wir uns nun das folgende Beispiel an, um die Auswirkungen von overflow:hidden auf die BFC-Erstellung zu verstehen −
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Im folgenden Beispiel formatieren wir den „Container“, ohne die CSS-Eigenschaft overflow:hidden zu verwenden.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
Anhand der Ausgabe können wir erkennen, dass der Text im Container die Grenze überschreitet. Daher kann es über den Container hinausragen und andere Elemente auf der Webseite überlappen, wodurch das Layout beschädigt wird.
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Im folgenden Beispiel verwenden wir die CSS-Eigenschaft Overflow:hidden, um den „Container“ zu formatieren –
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
overflow: hidden;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
Durch Hinzufügen des Attributs overflow:hidden zum Container wird ein neuer BFC erstellt. Wenn der Text daher die Höhe des Containers überschreitet, wird er abgeschnitten und nicht mehr sichtbar. Der übergelaufene Text bleibt jedoch im Container.
Das obige ist der detaillierte Inhalt vonErstellt overflow:hide in CSS einen neuen Formatierungskontext auf Blockebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!