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
So verwalten Sie mehrere Projekte auf dem CentOS SVN-Server
Eine Forderung Im Allgemeinen hat ein Unternehmen...
Teilen Sie die Schatzkammer mit 16 englischen Schriftarten mit brennendem Flammeneffekt
Wir leben in einer visuellen Welt und sind von vi...
XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung
<br />Das sinnvolle Hinzufügen von Bildern k...
Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt
Inhaltsverzeichnis Werkzeug Installieren Sie das ...
Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5
einführen Die RANGE-Partitionierung basiert auf e...
Analysieren Sie die Prinzipien und Methoden der MySQL-Replikation und -Optimierung
1. Einleitung MySQL verfügt über eine Replikation...
MySQL-Serie 9 MySQL-Abfrage-Cache und -Index
Inhaltsverzeichnis Tutorial-Reihe 1. MySQL-Archit...
So installieren Sie den MySQL 5.7.28-Binärmodus unter CentOS 7.4
Linux-Systemversion: CentOS7.4 MySQL-Version: 5.7...
MySQL 5.7.21 Installations- und Konfigurations-Tutorial unter Windows 10
Dieser Artikel zeichnet die Installations- und Ko...
Fragen und Antworten: Unterschiede zwischen XML und HTML
F: Ich weiß nicht, was der Unterschied zwischen XM...
Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung
Inhaltsverzeichnis 1.kvm-Bereitstellung 1.1 KVM-I...
Docker unter Linux installieren (sehr einfache Installationsmethode)
Ich hatte in letzter Zeit ziemlich viel Zeit. Ich...
So verwenden Sie CSS-Pseudoelemente, um den Stil mehrerer aufeinanderfolgender Elemente zu steuern
Wenn Sie CSS-Pseudoelemente zur Steuerung von Ele...
Dieser Artikel zeigt Ihnen die Grundlagen von JavaScript: Deep Copy und Shallow Copy
Inhaltsverzeichnis Flache Kopie Tiefes Kopieren A...
MySQL-Joinpufferprinzip
Inhaltsverzeichnis 1. MySQL-Joinpuffer 2. JoinBuf...