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
CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)
Der Code sieht folgendermaßen aus: .Verfahren{ Ra...
Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus
Verwenden von mock.js im Vue-Projekt Auswahl des ...
Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen
Tomcat8-Image herunterladen [root@localhost ~]# D...
Konfiguration der Fensterumgebung Mysql 5.7.21 windowx64.zip kostenlose Installationsversion Tutorial detaillierte Erklärung
1. Laden Sie mysql-5.7.21-windowx64.zip von der o...
Implementierung einer nicht geheimen SSH-Kommunikation in Linux
Was ist SSH? Administratoren können sich remote a...
Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann
1. Docker zieht das Image Docker Pull MySQL (stan...
Detaillierte Erläuterung der Galera-Cluster-Bereitstellung im Clustermodus von MySQL
Inhaltsverzeichnis 1: Einführung in Galera-Cluste...
Ausführliche Erläuterung des globalen Status des WeChat-Applets
Vorwort Im WeChat-Applet können Sie globalData vo...
Quellcode der HTML-Einstellungen für die Benutzerregistrierungsseite
Gestalten Sie die oben gezeigte Webseite: <!DOC...
Analyse des Prinzips und der Methode zur Implementierung einer Linux-Festplattenpartition
erinnern: IDE-Festplatte: Die erste Festplatte is...
CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts
Panther begann als Anfänger und ich bin immer noc...
Wartungsmethode für den Innodb-Systemtabellenbereich
Umweltbeschreibung: Es gibt eine laufende MySQL-U...
Mit vsftp einen FTP-Server unter Linux aufbauen (mit Parameterbeschreibung)
einführen In diesem Kapitel wird hauptsächlich de...
Detaillierte Schritte zur Installation von RabbitMQ im Docker
Inhaltsverzeichnis 1. Finde den Spiegel 2. Laden ...
Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten
Hintergrund: Tablespace: Alle INNODB-Daten werden...