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
Die am häufigsten verwendete HTML-Escape-Sequenz
In HTML haben <, >, & usw. eine speziell...
So installieren Sie ELK in Docker und implementieren die Protokollanalyse im JSON-Format
Was ist ELK? ELK ist ein vollständiger Satz von L...
Erste Schritte mit MySQL Sharding
Vorwort Relationale Datenbanken werden eher zu Sy...
So fügen Sie Tastenkombinationen in Xshell hinzu
Als nützlicher Terminalemulator wird Xshell häufi...
Tutorial zur Installation von MySQL 5.6 mit RPM in CentOS
Alle vorherigen Projekte wurden in der Windows-Sy...
Vergleichstabelle für HTML-Sondersymbole auf Webseiten
Sondersymbole Benannte Entitäten Dezimalkodierung...
So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank
MySql ist eine Datenquelle, die wir häufig verwen...
So verwenden Sie Docker-Compsoe zum Bereitstellen eines Projekts mit Front-End- und Back-End-Trennung
Sag es im Voraus Wir alle wissen, dass Docker ein...
2017 neueste Version der Windows-Installation MySQL-Tutorial
1. Laden Sie zunächst die neueste Version von MyS...
Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl
Ich glaube, dass viele Programmierer mit MySQL ve...
Detaillierte Erklärung, wie MySQL bestimmt, ob eine InnoDB-Tabelle ein unabhängiger Tablespace oder ein gemeinsam genutzter Tablespace ist
Vorwort InnoDB speichert Daten in Tablespaces. In...
So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server
Inhaltsverzeichnis Hintergrund erreichen Ergänzun...
Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung
Inhaltsverzeichnis Domänenübergreifende Gründe JS...
Html+CSS-Zeichnungsdreiecksymbol
Schauen wir uns zunächst die Renderings an: XML/H...
Tutorial zur Installation von phpMyAdmin unter Linux centos7
yum install httpd php mariadb-server –y Notieren ...