| css overflow属性及使用方法（场景） | 您所在的位置：网站首页 › overflow属性说法错误的是 › css overflow属性及使用方法（场景） |
css overflow属性及使用方法（场景）
|
overflow这个属性还是挺实用的比如，一个div展示文字，想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll; 1.overflow的属性 值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。浏览器支持 所有主流浏览器都支持 overflow 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 定义和用法overflow 属性规定当内容溢出元素框时发生的事情。 说明这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值：visible继承性：no版本：CSS2JavaScript 语法：object.style.overflow="scroll" 2.overflow使用及效果1.visible(默认值) div { background-color:#00FFFF; width:150px; height:150px; overflow:visible; }如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
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 |
【本文地址】