`overflow`- und `contain`-Eigenschaften
Dieser Artikel erklärt die overflow- und contain-Eigenschaften.
Sie können lernen, wie Sie mit der overflow-Eigenschaft Dinge wie das Anzeigen von Scrollbalken und das Zuschneiden beschreiben.
YouTube Video
HTML zur Vorschau
css-overflow-contain.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-overflow-contain.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Overflow Content</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Overflow And Contain Properties</h2>
20 </header>
21 <article>
22 <h3>overflow</h3>
23 <section>
24 <header><h4>overflow: visible</h4></header>
25 <section class="sample-view">
26 <section class="overflow-visible">
27 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
28 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
29 </section>
30 </section>
31 <header><h4>overflow: hidden</h4></header>
32 <section class="sample-view">
33 <section class="overflow-hidden">
34 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
35 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
36 </section>
37 </section>
38 <header><h4>overflow: scroll</h4></header>
39 <section class="sample-view">
40 <section class="overflow-scroll">
41 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
42 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
43 </section>
44 </section>
45 <header><h4>overflow: auto</h4></header>
46 <section class="sample-view">
47 <section class="overflow-auto">
48 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
49 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
50 </section>
51 </section>
52 <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
53 <section class="sample-view">
54 <section class="overflow-xy">
55 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
56 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
57 </section>
58 </section>
59 <header><h4>overflow: clip</h4></header>
60 <section class="sample-view">
61 <section class="overflow-clip">
62 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
63 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
64 </section>
65 </section>
66 </section>
67 </article>
68 <article>
69 <h3>contain</h3>
70 <section>
71 <header><h4>contain: layout</h4></header>
72 <section class="sample-view">
73 <section class="contain-layout">
74 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
75 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
76 </section>
77 </section>
78 <header><h4>contain: paint</h4></header>
79 <section class="sample-view">
80 <section class="contain-paint">
81 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
82 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
83 </section>
84 </section>
85 <header><h4>contain: size</h4></header>
86 <section class="sample-view">
87 <section class="contain-size">
88 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
89 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
90 </section>
91 </section>
92 <header><h4>contain: style</h4></header>
93 <section class="sample-view">
94 <section class="contain-style">
95 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
96 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
97 </section>
98 </section>
99 <header><h4>contain: content</h4></header>
100 <section class="sample-view">
101 <section class="contain-content">
102 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104 </section>
105 </section>
106 </section>
107 </article>
108 </main>
109</body>
110</html>overflow- und contain-Eigenschaften
overflow
Die CSS-overflow-Eigenschaft ist eine wichtige Eigenschaft, die steuert, wie der Inhalt eines Elements angezeigt wird, wenn er die Größe seines Rahmens überschreitet. Sie wird häufig verwendet, um das Layout und die Benutzeroberfläche von Webseiten zu gestalten, und hilft dabei, die Anzeige von Scrollbalken, das Zuschneiden und das Überlaufen von Elementen zu verwalten.
Grundlagen der overflow-Eigenschaft
Die overflow-Eigenschaft hat vier Hauptwerte: visible, hidden, scroll und auto.
visible
1section.overflow-visible {
2 width: 400px;
3 height: 100px;
4 overflow: visible;
5}visible ist der Standardwert, bei dem der Inhalt eines Elements über die Größe des Rahmens hinausgeht, jedoch weiterhin sichtbar bleibt. Die überlaufenden Teile können andere Elemente überlappen, aber Scrollbalken werden nicht angezeigt.
Eigenschaften:
- Inhalt wird ohne Einschränkungen angezeigt.
- Es werden keine Scrollbalken angezeigt.
hidden
1section.overflow-hidden {
2 width: 400px;
3 height: 100px;
4 overflow: hidden;
5}hidden ist die Einstellung, bei der der überfließende Teil nicht angezeigt wird, wenn der Inhalt eines Elements die Größe des Rahmens überschreitet. Es werden keine Scrollbalken angezeigt, und der überfließende Inhalt bleibt unsichtbar.
Eigenschaften:
- Wenn der Inhalt die Begrenzung des Elements überschreitet, wird der überschüssige Teil verborgen.
- Es werden keine Scrollbalken angezeigt.
scroll
1section.overflow-scroll {
2 width: 400px;
3 height: 100px;
4 overflow: scroll;
5}Wenn scroll verwendet wird, werden Scrollbalken zwangsweise angezeigt, falls der Inhalt des Elements den Rahmen überschreitet. Auch wenn der Inhalt nicht überläuft, werden Scrollbalken immer angezeigt.
Eigenschaften:
- Scrollbalken werden auch dann angezeigt, wenn der Inhalt innerhalb der Begrenzung des Elements passt.
- Scrollen ist in horizontaler und vertikaler Richtung möglich.
auto
1section.overflow-auto {
2 width: 400px;
3 height: 100px;
4 overflow: auto;
5}auto zeigt Scrollbalken nur an, wenn der Inhalt überläuft; passt der Inhalt in den Rahmen des Elements, werden keine Scrollbalken angezeigt.
Eigenschaften:
- Scrollbalken erscheinen nur, wenn der Inhalt überläuft.
- Erstellt automatisch einen scrollbaren Bereich.
overflow-x und overflow-y
1section.overflow-xy {
2 width: 400px;
3 height: 100px;
4 overflow-x: scroll;
5 overflow-y: hidden;
6}Die overflow-Eigenschaft kann auch individuell für die horizontale (x-Achse) und die vertikale (y-Achse) Richtung gesteuert werden.
Auf diese Weise können Sie overflow-x und overflow-y verwenden, um die Anzeige der vertikalen und horizontalen Scrollleisten individuell einzustellen.
Überlegungen zu Overflow
Bei der Verwendung der overflow-Eigenschaft gibt es einige Punkte, auf die man achten muss.
Auswirkungen auf das Design durch die Anzeige von Scrollleisten
Die Verwendung von scroll oder auto zur Anzeige von Scrollleisten kann das Gesamtdesign der Seite stören. Insbesondere wenn Elemente am rechten oder unteren Rand platziert sind, können Scrollleisten diese weniger sichtbar machen.
Standardverhalten des Browsers
Die Art und Weise, wie Scrollleisten angezeigt und funktionieren, kann zwischen Browsern variieren. Insbesondere zwischen Windows und macOS gibt es Unterschiede in den Anzeigearten von Scrollleisten, die dazu führen können, dass Designs nicht wie gewünscht erscheinen. Es ist wichtig, Cross-Browser-Tests durchzuführen.
Überlauf von Kindelementen
Das Setzen von overflow: hidden auf ein Elternelement verbirgt Kindelemente, die über die Begrenzung des Elternelementes hinausragen. Dies kann dazu führen, dass Pop-ups und modale Fenster nicht richtig angezeigt werden.
overflow: clip (CSS Level 3)
1section.overflow-clip {
2 width: 400px;
3 height: 100px;
4 overflow: clip;
5}In der neuen CSS-Spezifikation wurde auch ein Wert namens overflow: clip eingeführt. Dies ist ähnlich wie hidden, erlaubt jedoch kein Scrollen und schneidet den Inhalt nur ab. Derzeit wird es nur von einigen Browsern unterstützt.
Eigenschaften:
- Wenn der Inhalt überläuft, wird dieser Teil vollständig ausgeblendet.
- Es werden keine Scrollbalken angezeigt.
Fazit
Die CSS-Eigenschaft overflow ist ein wichtiges Werkzeug zur Steuerung der Darstellung von Inhalten im Webdesign. Durch die Verwaltung von Situationen, in denen der Inhalt über die Begrenzung des Elements hinausgeht, und die Anwendung geeigneter Scrollleisten oder Abschneidemechanismen wird den Benutzern eine benutzerfreundlichere Oberfläche geboten. Darüber hinaus ermöglicht die Verwendung von overflow-x und overflow-y eine fein abgestimmte Steuerung.
Mit diesem Wert werden Scrollleisten erzwungen angezeigt, wenn der Inhalt des Elements die Begrenzung überschreitet. Auch wenn der Inhalt nicht überläuft, werden Scrollbalken immer angezeigt.
contain
Überblick über die Eigenschaft contain
Die CSS-Eigenschaft contain begrenzt den Einfluss, den ein Element auf andere Elemente und die gesamte Seite hat, und optimiert den Rendering-Prozess des Browsers. Konkret werden Reflows und Repaints eingeschränkt, indem Stil- oder Layoutänderungen eines Elements den Inhalt außerhalb dieses Elements nicht beeinflussen.
Dies ist wichtig für die Leistung von Webseiten und besonders effektiv für Websites mit komplexen Layouts oder großen Inhaltsmengen.
Werte für contain
Die Eigenschaft contain hat die folgenden Werte:.
layout
1section.contain-layout {
2 width: 300px;
3 height: 300px;
4 contain: layout;
5}layout wendet Einschränkungen im Zusammenhang mit dem Layout an. Durch die Verwendung dieses Wertes beeinflussen die Größe und Position eines Elements keine anderen Elemente. Zum Beispiel wirkt sich eine interne Größenänderung eines Elements nicht auf das externe Layout aus.
paint
1section.contain-paint {
2 width: 300px;
3 height: 300px;
4 contain: paint;
5}paint begrenzt die Auswirkungen des Zeichnens (Rendering). Wenn dieser Wert angegeben wird, beeinflusst das Zeichnen innerhalb des Elements keine externen Elemente mehr, wodurch der Bereich der Repaint-Berechnungen begrenzt wird.
size
1section.contain-size {
2 width: 300px;
3 height: 300px;
4 contain: size;
5}size stellt sicher, dass die Größe des Elements nicht von externen Elementen abhängt. Konkret verhindert es, dass die Größenänderung von Kindelementen die Größe des Elternelements beeinflusst, was die Layout-Stabilität verbessert.
style
1section.contain-style {
2 width: 300px;
3 height: 300px;
4 contain: style;
5}style stellt sicher, dass der Stil eines Elements externe Elemente nicht beeinflusst. Die Angabe von contain: style; stellt beispielsweise sicher, dass Stiländerungen in diesem Element andere Elemente nicht beeinflussen und den Bereich der Neuberechnungen reduzieren.
content
1section.contain-content {
2 width: 300px;
3 height: 300px;
4 contain: content;
5}content ist ein kombinierter Wert, der layout, paint, size und style anwendet. Damit wird sichergestellt, dass das Layout, die Zeichnung, die Größe und der Stil des Elements keinerlei Einfluss auf externe Elemente haben.
Leistungsvorteile
Der Hauptgrund für die Verwendung der Eigenschaft contain ist die Verbesserung der Leistung von Webseiten. Insbesondere ist sie in den folgenden Situationen effektiv:.
-
Reflow-Optimierung: Wenn sich die Größe oder das Layout eines Elements ändert, kann sein Einfluss auf den kleinstmöglichen Bereich begrenzt werden. Dies reduziert den Umfang unnötiger Reflows (Layout-Neuberechnungen) und entlastet den Browser.
-
Reduzierung von Repaints: Durch die Begrenzung des Zeichenbereichs kann der Bereich minimiert werden, der neu gezeichnet werden muss, wenn sich der Stil oder Inhalt eines Elements ändert.
-
Komponentenbasierte Entwicklung: Da jede Komponente oder jedes Modul unabhängig von anderen Elementen arbeitet, wird die Leistung jeder Komponente auch in groß angelegten Webanwendungen verbessert.
Notizen
Beim Verwenden der Eigenschaft contain sollten Sie die folgenden Punkte beachten.
-
Anwendungsbereich verstehen: Die Eigenschaft
containist nützlich für Leistungsoptimierung, sollte jedoch nicht auf jedes Element angewendet werden. Es ist wichtig, sie angemessen an geeigneten Stellen einzusetzen. Zum Beispiel könnte die Verwendung bei häufig wechselnden Elementen oder Teilen einer großen DOM-Struktur die Leistung verschlechtern. -
Browser-Kompatibilität: Die Eigenschaft
containist eine relativ neue CSS-Funktion und wird nicht von allen Browsern vollständig unterstützt. Sie wird von den wichtigsten Browsern (Chrome, Firefox, Edge, Safari) unterstützt, könnte jedoch in älteren Versionen nicht anwendbar sein.
Fazit
Die CSS-Eigenschaft contain ist ein leistungsstarkes Werkzeug zur Leistungsoptimierung von Webseiten und Anwendungen. Durch die Begrenzung des Einflusses eines spezifischen Elements auf andere werden Reflow- und Repaint-Kosten reduziert und der gesamte Rendering-Prozess optimiert. Es ist jedoch wichtig, sorgfältig abzuwägen, wo sie angewendet werden soll, und sie angemessen zu nutzen.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.