`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 属性时，需要注意一些事项。
滚动条显示对设计造成的影响
使用 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 属性的主要原因是提高网页性能。特别是在以下情况下效果显著：。
-
重排优化：当元素的大小或布局发生变化时，其影响可以被限制在最小的范围内。这样可以减少不必要的重排（布局重新计算）的范围，并减轻浏览器的负担。
-
减少重绘：通过限制绘制区域，可以将因元素样式或内容变化而需要重绘的部分降到最低。
-
基于组件的开发：由于每个组件或模块与其他元素独立运行，即使在大规模的 Web 应用中，也可以提升各组件的性能。
注意
使用 contain 属性时，应牢记以下几点。
-
理解适用范围：
contain属性有助于性能优化，但不应应用于每个元素。在适当的地方合理使用它非常重要。例如，在频繁变化的元素或大型 DOM 结构的某些部分使用，可能会反而降低性能。 -
浏览器兼容性：
contain属性是一个相对较新的 CSS 功能，并未被所有浏览器完全支持。主流浏览器（Chrome、Firefox、Edge、Safari）中已支持，但可能无法在旧版本中适用。
结论
CSS contain 属性是优化网页和应用程序性能的强大工具。通过限制特定元素对其他元素的影响，它可以减少回流和重绘的开销，从而优化整体渲染过程。然而，必须仔细考虑在哪里应用它并合理使用。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。