overflow这个属性还是挺实用的比如,一个div展示文字,想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll;
1.overflow的属性
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
浏览器支持
所有主流浏览器都支持 overflow 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
默认值: | visible |
---|---|
继承性: | no |
版本: | CSS2 |
JavaScript 语法: | object.style.overflow="scroll" |
2.overflow使用及效果
1.visible(默认值)
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:visible;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
visible就是不做任何修改(不过多解释)
2.hidden(超出部分被隐藏)
hidden就是设置了宽高,超出部分会被隐藏。
3. scroll(滚动)
scroll会给其容器加上一个滚动条(x,y都加上)。如果不想显示x轴可用下列方法控制。
verflow-x: hidden; 不显示横向的滚动条
overflow-y: hidden; 不显示纵向的滚动条
overflow-x: scroll; 显示横向的滚动条
overflow-y: scroll; 显示纵向滚动条
3.auto(自动)
这个很长见一般都用这个(会根据文字长度自动来动态的来显示隐藏);
4.inherit
规定应该从父元素继承 overflow 属性的值。如果父元素有overflow属性就会继承父元素的overflow的属性。
3.修改滚动条样式
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
- ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
- ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
具体设置滚动条样式可参考https://blog.csdn.net/cysear/article/details/70264148
点击这里去实践一下可看效果代码https://www.w3school.com.cn/tiy/t.asp?f=csse_overflow