`overflow` 和 `contain` 屬性
本文將解釋 overflow 和 contain 屬性。
您可以學習如何使用 overflow 屬性來描述顯示滾動條和裁剪等內容。
YouTube Video
預覽的HTML
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" style="height: 100px;">
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 和 contain 屬性
overflow
CSS 的 overflow 屬性是一個重要的屬性，用於控制當元素內容超過其盒子大小時如何顯示。它常用於設計網頁的佈局和用戶界面，幫助管理滾動條顯示、裁剪和元素的溢出行為。
overflow 屬性基礎知識
overflow 屬性有四個主要值：visible、hidden、scroll 和 auto。
visible
1section.overflow-visible {
2 border: 2px dashed gray;
3 width: 400px;
4 height: 50px;
5 overflow: visible;
6}visible 是默認值，當元素內容超出盒子大小時，仍然可見，但會溢出盒子外部。溢出的部分可能會覆蓋其他元素，但不會顯示滾動條。
特點：
- 內容無限制地顯示。
- 無滾動條顯示。
hidden
1section.overflow-hidden {
2 border: 2px dashed gray;
3 width: 400px;
4 height: 50px;
5 overflow: hidden;
6}hidden 是當元素內容超出盒子大小時，不顯示溢出的部分的設置。不會顯示滾動條，並且溢出的內容也不可見。
特點：
- 當內容超出元素邊界時，超出的部分會被隱藏。
- 無滾動條顯示。
scroll
1section.overflow-scroll {
2 border: 2px dashed gray;
3 width: 400px;
4 height: 50px;
5 overflow: scroll;
6}當使用 scroll 時，若元素內容超出盒子大小，則強制顯示滾動條。即使內容未溢出，也始終顯示滾動條。
特點：
- 即使內容適合於元素邊界，仍然會顯示滾動條。
- 可以在水平方向和垂直方向進行滾動。
auto
1section.overflow-auto {
2 border: 2px dashed gray;
3 width: 400px;
4 height: 50px;
5 overflow: auto;
6}auto 僅在內容溢出時顯示滾動條；如果內容適合於元素的盒子內，則不顯示滾動條。
特點：
- 僅在內容溢出時顯示滾動條。
- 自動創建可滾動的區域。
overflow-x 和 overflow-y
1section.overflow-xy {
2 border: 2px dashed gray;
3 width: 400px;
4 height: 50px;
5 overflow-x: scroll;
6 overflow-y: hidden;
7}overflow 屬性可以單獨控制水平方向（x 軸）和垂直方向（y 軸）。
通過這種方式，可以使用 overflow-x 和 overflow-y 分別設置垂直和水平滾動條的顯示。
使用 Overflow 的注意事項
在使用 overflow 屬性時，需要注意一些事項。
滾動條顯示對設計的影響
使用 scroll 或 auto 來顯示滾動條可能會破壞頁面的整體設計。特別是當元素位於右側或底部邊緣時，滾動條可能會使它們不太明顯。
瀏覽器的默認行為
滾動條的顯示方式和功能可能因瀏覽器而異。尤其是在 Windows 和 macOS 系統間，滾動條的顯示樣式存在差異，可能導致設計不像預期那樣呈現。進行跨瀏覽器測試非常重要。
子元素的溢出問題
在父元素上設置 overflow: hidden 會隱藏超出父元素框的子元素。這可能導致彈出窗口和模態窗口無法正確顯示。
overflow: clip (CSS Level 3)
1section.overflow-clip {
2 border: 2px dashed gray;
3 width: 400px;
4 height: 50px;
5 overflow: clip;
6}在新的 CSS 規範中，還引入了一個稱為 overflow: clip 的值。這類似於 hidden，但它不允許滾動，只是剪裁內容。
特點：
- 如果內容溢出，溢出的部分將被完全隱藏。
- 無滾動條顯示。
結論
CSS 的 overflow 屬性是控制網頁設計中內容顯示的重要工具。通過處理內容超出元素框的情況，並應用適當的滾動條或剪裁，可以為用戶提供更友好的界面。此外，使用 overflow-x 和 overflow-y 可以進行更精細的控制。
contain
contain 屬性的概覽
CSS 的 contain 屬性限制了一個元素對其他元素及整個頁面的影響，從而優化瀏覽器的渲染過程。具體而言，它通過防止某個元素的樣式或佈局的改變影響到該元素外的內容，從而限制了回流和重繪的範圍。
這對於網頁性能而言非常重要，對於具有複雜佈局或大量內容的網站尤為有效。
contain 屬性的值
contain 屬性包含以下幾個值：。
layout
1section.contain-layout {
2 width: 300px;
3 height: 100px;
4 contain: layout;
5}layout 用於應用與佈局相關的限制。使用該值時，元素的大小和位置不會影響其他元素。例如，即使元素內部的尺寸發生改變，該變化也不會影響外部佈局。
paint
1section.contain-paint {
2 width: 300px;
3 height: 100px;
4 contain: paint;
5}paint 限制了繪製（渲染）的影響範圍。當指定此值時，元素內部的繪製不再影響外部元素，從而限制了重繪計算的範圍。
size
1section.contain-size {
2 width: 300px;
3 height: 100px;
4 contain: size;
5}size 確保元素的大小不依賴於外部元素。具體而言，它防止子元素的尺寸調整影響父元素的大小，從而提高佈局的穩定性。
style
1section.contain-style {
2 width: 300px;
3 height: 100px;
4 contain: style;
5}style 確保元素的樣式不影響外部元素。例如，指定 contain: style; 時，該元素內的樣式更改不會影響其他元素，從而減少重新計算的範圍。
content
1section.contain-content {
2 width: 300px;
3 height: 100px;
4 contain: content;
5}content 是一個複合值，應用了 layout、paint、size 和 style。使用此值可以確保元素的佈局、繪製、大小和樣式完全不影響外部元素。
性能優勢
使用 contain 屬性的主要原因是為了提升網頁性能。尤其在以下情況中非常有效。
-
回流優化：當元素的大小或佈局發生變化時，其影響可以被限制在最小的範圍內。這減少了不必要的回流（佈局重新計算）的範圍，從而降低了瀏覽器的負擔。
-
減少重繪：通過限制繪製區域，可以將元素樣式或內容更改後需要被重繪的部分降至最小。
-
基於組件的開發：由於每個組件或模塊都能獨立於其他元素運行，即使在大型網頁應用中，也能提高每個組件的性能。
注意事項
使用 contain 屬性時，請記住以下幾點。
-
理解應用範圍：
contain屬性有助於性能優化，但不應將其應用於每個元素。在適合的地方適當使用它是很重要的。例如，在頻繁更改的元素或大型 DOM 結構的一部分上使用它可能會反而降低性能。 -
瀏覽器相容性：
contain屬性是一個相對較新的 CSS 功能，並非所有瀏覽器完全支援。其在主要瀏覽器（Chrome、Firefox、Edge、Safari）中受到支援，但可能無法適用於舊版本。
結論
CSS 的 contain 屬性是一個優化網頁和應用程序性能的強大工具。通過限制特定元素對其他元素的影響，它能減少重排和重繪的成本，從而優化整體渲染過程。然而，謹慎考慮其應用場所並適當使用它非常重要。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。