Die Einstellung der Webseite soll in vielen Fällen nicht genau auf eine Seite passen. Beispielsweise verwenden einige Nachrichten-Websites das Seitenladen von Daten. Wenn Sie mehr Text sehen möchten, müssen Sie weiter nach unten blättern. Auf der rechten Seite des Browsers befindet sich immer eine Bildlaufleiste. Dies ist das in diesem Artikel erläuterte Element. Wenn eine Seite nicht alle Daten aufnehmen kann, verwenden wir häufig einen Überlauf, um sie festzulegen.
Die Rolle des Überlaufattributs besteht darin, anzugeben, was passiert, wenn Inhalt über die Elementbox hinausläuft, und zu definieren, wie mit Inhalten umgegangen wird, die über den Inhaltsbereich des Elements hinauslaufen.
1.Überlauf
Um Überlaufinhalte besser verarbeiten zu können, stellt CSS ein Attribut namens „Overflow“ bereit. Dieses Attribut kann festlegen, wie mit dem Inhalt des Überlaufelement-Inhaltsbereichs umgegangen wird. Die optionalen Werte des Attributs sind in der folgenden Tabelle aufgeführt:
Beispiel:
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>Die Webseite ist für die intuitive Anzeige eingerichtet. In vielen Fällen handelt es sich beispielsweise nicht um genau eine Seite Bei einigen Nachrichten-Websites müssen Sie, um das Laden von Daten zu nutzen, weiter nach unten scrollen. Auf der rechten Seite des Browsers wird immer eine Bildlaufleiste angezeigt Auf einer Webseite kann eine Seite nicht alle aufnehmen. Beim Sammeln von Daten verwenden wir häufig einen Überlauf für Einstellungen. Die Rolle des Überlaufattributs besteht darin, anzugeben, was passiert, wenn Inhalt über die Elementbox hinausläuft, und zu definieren, wie mit Inhalten umgegangen wird, die über den Inhaltsbereich des Elements hinauslaufen. <div> Beim Schieben wird auf der rechten Seite des Browsers immer eine Bildlaufleiste angezeigt. Dies ist das in diesem Artikel erläuterte Element. Wenn eine Seite nicht alle Daten aufnehmen kann, verwenden wir häufig einen Überlauf, um ihn festzulegen. Die Rolle des Überlaufattributs besteht darin, anzugeben, was passiert, wenn Inhalt über die Elementbox hinausläuft, und zu definieren, wie mit Inhalten umgegangen wird, die über den Inhaltsbereich des Elements hinauslaufen. <div> Beim Schieben wird auf der rechten Seite des Browsers immer eine Bildlaufleiste angezeigt. Dies ist das in diesem Artikel erläuterte Element. Wenn eine Seite nicht alle Daten aufnehmen kann, verwenden wir häufig einen Überlauf, um ihn festzulegen. Die Rolle des Überlaufattributs besteht darin, anzugeben, was passiert, wenn Inhalt über die Elementbox hinausläuft, und zu definieren, wie mit Inhalten umgegangen wird, die über den Inhaltsbereich des Elements hinauslaufen. </div></body></html>Laufergebnisse:
2.Überlauf-x, Überlauf-y
CSS3 stellt außerdem zwei Attribute bereit, overflow-x und overflow-y. Ihre Funktionen ähneln denen des overflow-Attributs. Die optionalen Werte des Attributs sind die gleichen wie die des overflow-Attributs, wobei:
overflow-x: Legen Sie fest, wie mit dem Überlaufinhalt umgegangen werden soll, wenn der Inhalt des Inhaltsbereichs des Elements das Element in horizontaler Richtung überläuft.
overflow-y: Legen Sie fest, wie mit Überlaufinhalten umgegangen werden soll, wenn der Inhalt des Inhaltsbereichs des Elements das Element in vertikaler Richtung überläuft.
3. Die magische Verwendung von Überlauf
Die erste Verwendung: Lösen Sie das Problem der Margin-Top-Lieferung
Problem bei der Übertragung des oberen Rands: Der obere Rand des untergeordneten Elements bringt das übergeordnete Element zusammen. Dies kann durch Hinzufügen von overflow:hidden zum übergeordneten Element gelöst werden.
Zweite Verwendung: Beseitigen Sie die Auswirkungen des Schwebens – die Höhe des übergeordneten Elements wird reduziert
universelle Entfernungsmethode
Überlauf:versteckt
klar: beides
Die dritte Verwendung: Animationen enthüllen und verbergen – jenseits des Versteckens
Vierte Verwendung: Einzeiliger Text geht über Auslassungen hinaus
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>dotcpp programming</title><styletype=text/css>#{margin:0px;padding:0px;}section{width:800px; height:460px;margin:auto;}article{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px;}p{margin :10px50px;}.chapter_1{background-color:#A3A3A3;}.chapter_2{background-color:#81559d;}.chapter_3{background-color:#54709d;}.chapter_4{background-color:#4f9d89;}Abschnitt: hover>article{overflow:hidden;width:50px;}section>article:hover{width:650px;}</style></head><body><section><articleclass=chapter_1><h3>Volume 1< / h3><p>Willkommen in der Welt der C-Sprache! Die C-Sprache ist eine leistungsstarke und spezialisierte Programmiersprache, die bei Amateur- und Profiprogrammierern beliebt ist. Lassen Sie es uns verstehen und erkennen, bevor wir lernen! Der Prototyp der C-Sprache ist die A-Sprache (ALGOL60-Sprache). </p></article><articleclass=chapter_2><h3>Band 2</h3><p>Willkommen in der Welt der C-Sprache! Die C-Sprache ist eine leistungsstarke und spezialisierte Programmiersprache, die bei Amateur- und Profiprogrammierern beliebt ist. Lassen Sie es uns verstehen und erkennen, bevor wir lernen! Der Prototyp der C-Sprache ist die A-Sprache (ALGOL60-Sprache). </p></article><articleclass=chapter_3><h3>Band 3</h3><p>Willkommen in der Welt der C-Sprache! Die C-Sprache ist eine leistungsstarke und spezialisierte Programmiersprache, die bei Amateur- und Profiprogrammierern beliebt ist. Lassen Sie es uns verstehen und erkennen, bevor wir lernen! Der Prototyp der C-Sprache ist die A-Sprache (ALGOL60-Sprache). </p></article><articleclass=chapter_4><h3>Band 4</h3><p>Willkommen in der Welt der C-Sprache! Die C-Sprache ist eine leistungsstarke und spezialisierte Programmiersprache, die bei Amateur- und Profiprogrammierern beliebt ist. Lassen Sie es uns verstehen und erkennen, bevor wir lernen! Der Prototyp der C-Sprache ist die A-Sprache (ALGOL60-Sprache). </p></article></section></body></html>Laufergebnisse:
