Das Überlaufattribut gibt an, was passiert, wenn Inhalt die Elementbox überläuft
①visible Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
②hidden Der Inhalt wird gekürzt und der verbleibende Inhalt ist unsichtbar.
③scroll Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
④auto Wenn der Inhalt zugeschnitten wird, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
⑤inherit gibt an, dass der Wert des Überlaufattributs vom übergeordneten Element geerbt werden soll.
Beispiel 1: Tabelle wird als Container verwendet und die Bildlaufleiste [versteckt]
Hinweis: {①Die Anzeige der Tabelle ist auf Blockieren eingestellt, sonst erscheint die Bildlaufleiste nicht 🎜>
Sie müssen zuerst Die Tabelle wird in einem p platziert und die Länge und Breite von p müssen festgelegt werden Wenn Sie nur in vertikaler Richtung scrollen möchten, können Sie den Überlauf des äußeren p-Attributs festlegen. x: versteckt; Beispiel:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style type="text/css">
*{margin: 0;padding: 0}
.area{width: 300px;height: 600px;background-color: #BFEFFF;
overflow-x: hidden;position: relative}
.area table{display: block;width: 320px;height: 600px;
background-color: #00D685;overflow-y: auto;}
.area table tr td{height: 200px;width: 300px}
</style>
</head>
<body>
<p class="area">
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style type="text/css">
*{margin: 0;padding: 0}
.area{width: 300px;height: 600px;background-color: #BFEFFF;
overflow-x: hidden;
position: relative}
.area ul{height: 100%;width: 320px;background-color: #00D685;list-style: none;
overflow-x: hidden;overflow-y: auto}
.area ul li{height: 200px;width: 100%;background-color: #cccccc}
</style>
</head>
<body>
<p class="area">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonCodebeispiel für das Ausblenden der Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
