So verwenden Sie CSS-Overflow: Hidden (Überlauf ausblenden und Floats löschen)
|
Überlauf ausblenden Damit ist gemeint, dass Text- oder Bildinformationen ausgeblendet werden, die die angegebene Höhe überschreiten.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<style type="text/css">
div {Hintergrundfarbe: gelb;Breite: 350px;Höhe: 100px;Überlauf: versteckt;}
</Stil>
</Kopf>
<Text>
Überschreitet der Inhalt im <p>-Element die angegebenen Breiten- und Höhenattribute, kann über das Overflow-Attribut<br> die Art der Darstellung und ggf. die Anzeige einer Scrollleiste bestimmt werden. </p>
<div> Dieses Attribut definiert, was mit Inhalten passiert, die den Inhaltsbereich eines Elements überschreiten. <br>Wenn der Wert ausgeblendet ist, wird der Teil außerhalb des Bereichs ausgeblendet. <br>Wenn der Wert „scroll“ ist, wird eine Bildlaufleiste angezeigt. <br>Wenn der Wert sichtbar ist, wird der überschüssige Teil außerhalb des Elementfelds gerendert. <br>Wenn der Wert „auto“ lautet, erfolgt die Ausführung automatisch; wenn der Text das Elementfeld überschreitet, wird die Bildlaufleiste angezeigt; wenn er es nicht überschreitet, wird die Bildlaufleiste nicht angezeigt. <br>Wenn der Wert geerbt wird, wird der Wert des Überlaufattributs des übergeordneten Elements geerbt. </div>
</body>
</html>Die folgenden Zahlen werden jeweils abgefangen, wenn der Wert ausgeblendet ist und der Wert automatisch ist
Eine andere Möglichkeit besteht darin, Textinformationen in einer einzigen Zeile anzuzeigen und den überschüssigen Teil durch Auslassungspunkte kenntlich zu machen (Betonung: um wirksam zu sein, muss der Text in einer Zeile angezeigt werden!).
div {
Hintergrundfarbe: gelb;
Breite: 350px;
Rand: 100px automatisch;
white-space: nowrap;/*hervorgehobener Text wird in einer Zeile angezeigt*/
overflow: hidden;/*Überlaufinhalt ist versteckt*/
text-overflow: ellipsis;/*Überlaufender Text zeigt Auslassungspunkte an*/
}
Clear Float <br /> Dieses Links-Rechts-Layout wird häufig im Layout verwendet: eine übergeordnete Box, die zwei untergeordnete Boxen enthält, links und rechts. Da jedoch die Anzahl und Größe des Inhalts des untergeordneten Felds nicht bekannt ist, kann die übergeordnete Box keine feste Höhe haben. Die Höhe der übergeordneten Box muss sich entsprechend der Höhe der untergeordneten Box ändern. Lassen Sie es uns unten herausfinden! Unten ist der übergeordneten Box eine Höhe von 200 Pixeln zugewiesen, und die beiden untergeordneten Boxen schweben links und rechts, sodass es kein Anzeigeproblem gibt.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<style type="text/css">
* {Rand: 0;Padding: 0}
.header {Hintergrundfarbe: #333;Farbe: #fff;Textausrichtung: Mitte;Höhe: 80px;Zeilenhöhe: 80px;}
.father_box {Breite: 500px;Höhe: 200px;Rand: 0 auto;Hintergrundfarbe: gelb;}
.child_left {Breite: 100px;Höhe: 100px;Hintergrundfarbe: blau;Float: links;}
.child_right {Breite: 200px;Höhe: 150px;Hintergrundfarbe: blau;Float: rechts;}
.footer {Hintergrundfarbe: #333;Farbe: #fff;Textausrichtung: Mitte;Höhe: 80px;Zeilenhöhe: 80px;}
</Stil>
</Kopf>
<Text>
<div class="header">Header hier</div>
<div Klasse="Vaterbox">
<div Klasse="Kind_links">Kind_links</div>
<div class="Kind_Recht">Kind_Recht</div>
</div>
<div class="footer">Fußzeile ist hier</div>
</body>
</html>
Wenn der Inhalt der Box rechts zunimmt, sollte auch die Höhe der übergeordneten Box zunehmen. Zu diesem Zeitpunkt löschen wir normalerweise die Höhe der übergeordneten Box, damit sich die übergeordnete Box an die Höhe anpasst. Das Ergebnis ist jedoch wie folgt. Die beiden untergeordneten Boxen decken die Fußzeile ab. Dies liegt daran, dass die beiden untergeordneten Boxen aufgrund des Schwebens außerhalb des Standardflusses liegen, die übergeordnete Box jedoch keine Höhe hat und daher denkt, dass sie keinen Inhalt hat. Daher wird die Höhe nicht durch den Inhalt gestreckt, was einer Höhe der übergeordneten Box von 0 Pixeln entspricht. Anschließend wird die Fußzeilenbox auf derselben Ebene gemäß dem Standardfluss angeordnet und neben der gelben übergeordneten Box auf derselben Ebene angeordnet, was zu einem ungeordneten Layout der Seite führt (auch als Seitenkollaps bezeichnet).
Zu diesem Zeitpunkt fügen wir der übergeordneten Box einen Überlauf: Hiffen hinzu. Dann sieht die Seite so aus und die Höhe der übergeordneten Box nimmt mit der Größe der untergeordneten Box zu.
Wenn overflow:hidden; diesen Effekt in einer früheren Version von IE nicht erzielt, fügen Sie zoom:1; hinzu. Das heißt: overflow:hidden;zoom:1; Dieses Prinzip ist eigentlich ein Konzept namens BFC (Block Formatting Context), was „Blockformatierungskontext“ bedeutet. BFC definiert einen unabhängigen Rendering-Bereich und legt die Rendering-Regeln der darin enthaltenen Blockebenenelemente fest. Sein Rendering-Effekt wird nicht von der externen Umgebung beeinflusst.
Freunde, die sich für BFC interessieren, können mehr darüber erfahren! Lösen Sie das Problem des leeren Raums am unteren Rand des Bildes nach dem Einfügen. <br /> Da das Feld nach dem Einfügen des Bildes keine vorgegebene Höhe hat, wird es um die Höhe des Bildes gestreckt und hinterlässt eine Lücke von mehreren Pixeln (roter Teil).
<!DOCTYPE html>
<html lang="de">
<Kopf>
<style type="text/css">
* {Rand: 0;Padding: 0;Listenstil: keiner;}
.box {Breite: 200px;Hintergrundfarbe: rot;Rand: 0 auto;}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<img src="img02.jpg" width="200" height="200" alt="">
</div>
</body>
</html>
Es gibt zwei Lösungen: 1. Fügen Sie der übergeordneten Box eine Höhe hinzu, die der des Bildes entspricht, und fügen Sie overflow:hidden; hinzu (das Hinzufügen dieser beiden Elemente verbessert die Kompatibilität!)
2. Es ist nicht erforderlich, der Box Höhe hinzuzufügen. Passen Sie sie einfach der Bildhöhe an und fügen Sie „display:block“ zu „img“ hinzu.
Das Obige ist mein Verständnis von overflow:hidden, basierend auf dem Teilen der Großen im Internet und Online-Artikeln. Ich hoffe, es kann mehr Menschen helfen. |
>>: Detaillierte Erläuterung des Vue-Router-Routings
Artikel empfehlen
Beispielschritte zur Verwendung von AntV X6 mit Vue.js
Inhaltsverzeichnis 0x0 Einführung 0x1 Installatio...
Analyse der Prinzipien verschiedener Möglichkeiten zur Nachahmung des Lupeneffekts in CSS3
Warum lautet der Titel des Artikels „Imitierte Lu...
So lassen sich Python-Skripte direkt unter Ubuntu ausführen
Nehmen wir als Beispiel das Übersetzungsprogramm....
Das Erlebnis gestalten: Was auf dem Knopf liegt
<br />Vor Kurzem hat UCDChina eine Artikelse...
JavaScript-Grundlagenobjekte
Inhaltsverzeichnis 1. Gegenstand 1.1 Was ist ein ...
Vue verwendet GraphVis, um einen unendlich erweiterten Beziehungsgraphen zu entwickeln
1. Gehen Sie zur offiziellen GraphVis-Website, um...
Vue implementiert ein Beispiel für eine verschachtelte Routing-Methode
1. Verschachteltes Routing wird auch als Sub-Rout...
Docker verwendet ein einzelnes Image zum Zuordnen zu mehreren Ports
brauchen: Der Ressourcenserver der offiziellen We...
Beispielcode zum Generieren eines QR-Codes mit js
Vor einiger Zeit musste das Projekt die Funktion ...
Zusammenfassung verschiedener Methoden zur MySQL-Datenwiederherstellung
Inhaltsverzeichnis 1. Einleitung 2. Direkte Wiede...
CentOS7-Installations-GUI-Schnittstelle und Implementierung der Remote-Verbindung
Verwenden Sie zum Crawlen von Daten die browserba...
Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript
Die Browserkompatibilität ist der wichtigste Teil...
Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS
Inhaltsverzeichnis Fügen Sie dem GitHub+Jekyll-Bl...
Docker-Fallanalyse: Erstellen eines Redis-Dienstes
Inhaltsverzeichnis 1 Mount-Verzeichnisse und Date...
HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen
Manchmal müssen wir steuern, ob HTML-Elemente auf ...