資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學CSS 中 `overflow: auto` 和 `overflow: scroll` 的區別是什麼？
在 CSS 中，`overflow` 屬性用於指定 HTML 元素內容的溢位方式。例如，如果 div 元素的高度為 `500px`，而內部內容的高度為 `1000px`，我們需要使內容可滾動。
在本教程中，我們將學習 CSS `overflow` 屬性的 `auto` 和 `scroll` 值之間的區別。
CSS 中的 `overflow: auto`
在 CSS 中，`overflow: auto` 將 HTML 元素的溢位設定為自動。這意味著如果 div 的內容溢位，它將 `scroll` 設定為 `overflow` 屬性的值；否則，它將 `none` 設定為 `overflow` 屬性的值。
語法
使用者可以按照以下語法使用 `overflow: auto` CSS 屬性。
overflow: auto;
示例
在下面的示例中，我們建立了 HTML div 元素並賦予了 `main` 類名。此外，我們還為 div 元素設定了固定寬度和高度。此外，我們設定了 `overflow: auto` CSS 屬性。
在輸出中，使用者可以觀察到它顯示了捲軸，因為內容尺寸大於 div 元素的尺寸。
<html>
<head>
<style>
.main {
height: 100px;
width: 500px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
示例
在下面的示例中，div 元素內部內容的尺寸小於 div 元素的尺寸。在輸出中，使用者可以觀察到 div 元素不可滾動，因為內容沒有溢位。
<html>
<head>
<style>
.main {
height: 200px;
width: 100px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
CSS 中的 `overflow: scroll`
`overflow: scroll` 始終在 HTML 元素中顯示捲軸，即使元素的內容沒有溢位，並且它始終顯示水平和垂直捲軸。
語法
Overflow: scroll;
示例
在下面的示例中，我們在 div 元素中添加了適合 div 元素尺寸的內容。此外，我們使用 CSS 為 div 元素設定了 `overflow: scroll`。
在輸出中，使用者可以觀察到即使 div 元素的內容沒有溢位，它也顯示了捲軸。
<html>
<head>
<style>
.main {
height: 200px;
width: 300px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2> <i> overflow: scroll </i> in CSS </h2>
<div class = "main">
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
</div>
</body>
</html>
`overflow: auto` 和 `overflow: scroll` 的區別
以下是 `overflow: auto` 和 `overflow: scroll` CSS 屬性的區別表。
`overflow: auto` |
`overflow: scroll` |
|---|---|
僅當 HTML 元素的內容溢位或不適合原始元素的尺寸時，才會顯示捲軸。 |
始終顯示捲軸。 |
示例
在下面的示例中，我們演示了 `overflow: scroll` 和 `overflow: auto` 的輸出。我們為類名為 `scroll` 的 div 元素設定了 `overflow: scroll`，為類名為 `auto` 的 div 元素設定了 `overflow: auto`。
在輸出中，使用者可以觀察到 `overflow: scroll` 顯示了捲軸，但 `overflow: auto` 沒有顯示。
<html>
<head>
<style>
.scroll {
height: 220px;
width: 500px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
.auto {
height: 200px;
width: 500px;
overflow: auto;
border: 3px dotted red;
margin: 10px;
}
</style>
</head>
<body>
<h2> Difference between overflow: scroll and overflow: auto in CSS</h2>
<div class = "scroll">
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
</div>
<div class = "auto">
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
</div>
</body>
</html>
使用者學習了 `overflow: auto` 和 `overflow: scroll` CSS 屬性之間的區別。兩者之間唯一的區別在於何時顯示捲軸。
409 次檢視
