本文摘自PHP中文网,作者V,侵删。
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怎么加滚动条的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
10款好看且实用的文字动画特效,让你的页面更吸引人!
css border-left-style属性怎么用
css怎么控制不换行
详解css中优先级和stacking context等高级特性,带你更深入了解css!!
css背景图片怎么自适应
css hack是什么意思
css中text-align什么意思
利用css来画出各种样式不同的梯形
css animation-play-state属性怎么用
css div不随滚动条移动的实现方法
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么加滚动条