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 style="overflow-x:hidden">

没有垂直滚动条

<body style="overflow-y:hidden">

没有滚动条

<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条

<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条

<textarea style="overflow-y:hidden"></textarea>

没有滚动条

<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>

或<textarea style="overflow:hidden"></textarea>

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">

scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

加上一点特别的效果：

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

Overflow特别解释说明

1、设置textarea对象为hidden值将隐藏其滚动条。

2、对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为
hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视
direction属性设置而定）的单元格。

CSS属性之 -- overflow的更多相关文章

  1. CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

    常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...

  2. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  5. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  6. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

  7. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  8. 第六篇、CSS属性

    <!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...

  9. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

随机推荐

  1. ruby on rails on windows

    这次想系统学会rails,最终目标是将redmine改造成顺手的工具,主要的手段就是开发redmine插件.虽然网上都推荐使用类Unix系统,可手头只有win7系统,就安装了. 难免会遇到这样那样的问 ...

  2. [转]http://m635674608.iteye.com/blog/1750833

    转载地址:http://m635674608.iteye.com/blog/1750833 在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个 ...

  3. hdu 5749 Colmerauer

    题意:对于给定的$n \times m$矩阵$M$,定义$S(a,b)$为$M$的所有$a \times b$子矩阵的权重之和.一个矩阵的权重是指矩阵中所有马鞍点权值之和,在一个矩阵中某点是马鞍点当且 ...

  4. 如何使用VS2013对C++进行编程

    https://msdn.microsoft.com/zh-cn/library/bb384842.aspx

  5. java 字符串split有很多坑，使用时请小心！！

    System.out.println(":ab:cd:ef::".split(":").length);//末尾分隔符全部忽略 System.out.print ...

  6. Statement returned more than one row, where no more than one was expected

    Statement returned more than one row, where no more than one was expected <resultMap id="Stu ...

  7. 学习从零开始写jQuery框架

    随着时代发展,javascript阵营里面出现了越来越多的优秀的框架,大大简化了我们的开发工作,在我们使用这些框架的时候是不是也应该饮水思源想想它们都是怎样构建起来的呢?如果你不满足于仅仅是使用一些现 ...

  8. js原生实现淡入淡出

         转自http://kb.cnblogs.com/page/90854/ 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, ...

  9. Linux高级权限管理 - ACL

    传统权限模型缺点: 传统的UGO权限模型无法应对负责的权限设置要求,如对于一个文件只能设置一个组,并且对该组进行权限控制,但是如果该文件有多个组合会对其进行访问,并且都要要求权限限制时,传统的UGO模 ...

  10. Nginx模块之————RTMP模块的FFmpeg的配置问题是FFmpeg的连续退出

    rtmp { server { listen ; application live { allow publish all; allow play all; live on; exec /root/b ...