Heim > Artikel > Web-Frontend > So fügen Sie eine Bildlaufleiste in CSS hinzu
So fügen Sie eine Bildlaufleiste in CSS hinzu
- 王林Original
- 2021-07-12 16:48:055489Durchsuche
Die Möglichkeit, eine Bildlaufleiste in CSS hinzuzufügen, besteht darin, das Überlaufattribut zum Div hinzuzufügen und den Attributwert auf Scrollen festzulegen, z. B. [overflow: scroll;]. Das Überlaufattribut gibt an, was passiert, wenn der Inhalt überläuft.
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.
Das Hinzufügen einer Bildlaufleiste ist eigentlich sehr einfach. Es gibt ein Attributüberlauf, das angibt, was passiert, wenn der Inhalt über die Box eines Elements hinausläuft.
Werfen wir einen Blick auf die Attributwerte:
visible Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
Versteckte Inhalte werden gekürzt und die verbleibenden Inhalte werden unsichtbar.
scrollen Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den Rest des Inhalts anzuzeigen.
auto Wenn der Inhalt gekürzt 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>
<h2>overflow: hidden:</h2>
<div class="ex2">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>
<h2>overflow: auto:</h2>
<div class="ex3">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>
<h2>overflow: visible (默认):</h2>
<div class="ex4">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>
</body>
</html>Sie können den obigen Code lokal kopieren und lokal ausführen, um den Effekt zu sehen.
Verwandte Video-Tutorial-Freigabe: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo fügen Sie eine Bildlaufleiste in CSS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!