CSS属性之--overflow
overflow可以实现隐藏超出对象内容,同时也有显⽰与隐藏滚动条的作⽤,overflow属性有四个值:visible (默认), hidden, scroll, 和auto。同样有两个overflow的类似属性overflow-y 和overflow-x。
定义
overflow : visible | auto | hidden | scroll
当然overflow可以单独设置X(overflow-x )和Y(overflow-y)⽅向的滚动条样式其值与应⽤与overflow语法⽤法结构相同。
说明
这个属性定义溢出元素内容区的内容会如何处理。
overflow属性值:
1.visible:默认值。内容不会被修剪,会呈现在元素框之外。
2.hidden:内容会被修剪,并且其余内容是不可见的。
3.scroll:内容会被修剪,但是浏览器会显⽰滚动条以便查看其余的内容。
4.auto:如果内容被修剪,则浏览器会显⽰滚动条以便查看其余的内容。
5.inherit:规定应该从⽗元素继承 overflow 属性的值。
总结:overflow属性值中visible和hidden是对⽴的,scroll和auto是对⽴的。inherit是继承⽗元素的overflow属性值,默认是scroll.
通过⼏个实例来讲解上述的样式属性:
1.让浏览器窗⼝永远都不出现滚动条
没有⽔平滚动条
<body >
没有垂直滚动条
<body >
没有滚动条
<body >或<body >
2.设定多⾏⽂本框的滚动条
没有⽔平滚动条
<textarea ></textarea>
没有垂直滚动条
<textarea ></textarea>
没有滚动条
<textarea ></textarea>
或<textarea ></textarea>
3.设定窗⼝滚动条的颜⾊
设置窗⼝滚动条的颜⾊为红⾊<body >
scrollbar-base-color设定的是基本⾊,⼀般情况下只需要设置这⼀个属性就可以达到改变滚动条颜⾊的⽬的。
加上⼀点特别的效果:css设置表格滚动条
<body >
Overflow特别解释说明
1、设置textarea对象为hidden值将隐藏其滚动条。
2、对于table来说,假如table-layout属性设置为fixed,则td对象⽀持带有默认值为hidden的overflow属性。如果设为 hidden,scroll或者auto,那么超出td尺⼨的内容将被剪切。如果设为visible,将导致额外的⽂本溢出到右边或左边(视 direction属性设置⽽定)的单元格。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论