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

本文操作環境:windows10系統、css 3、thinkpad t480電腦。
要新增滾動條其實很簡單,有一個屬性overflow,它指定如果內容溢出一個元素的框,會發生什麼事。
來看看屬性值:
visible 預設值。內容不會被修剪,會呈現在元素框外。
hidden 內容會被修剪,且其餘內容是看不見的。
scroll 內容會被修剪,但是瀏覽器會顯示捲軸以便查看其餘的內容。
auto 如果內容被修剪,則瀏覽器會顯示捲軸以便查看其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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中文網其他相關文章!