首頁 > 文章 > web前端 > css怎麼加捲軸

css怎麼加捲軸

王林原創: 2021-07-12 16:48:055489瀏覽

css新增捲軸的方法是，為div新增overflow屬性，並且設定屬性值為scroll，如【overflow: scroll;】。 overflow屬性指定了內容溢出時，會發生什麼。

css怎麼加捲軸

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

要新增滾動條其實很簡單，有一個屬性overflow，它指定如果內容溢出一個元素的框，會發生什麼事。

來看看屬性值：

visible 預設值。內容不會被修剪，會呈現在元素框外。

hidden 內容會被修剪，且其餘內容是看不見的。

scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。

auto 如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。

inherit 規定應該從父元素繼承 overflow 屬性的值。

範例：

<!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>

大家可以將上面的程式碼複製到本地，然後在本地運行看看效果。

相關影片教學分享：css影片教學

以上是css怎麼加捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何設定斜體下一篇：css如何設定斜體

看更多