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. SQL2005中的事务与锁定（八）- 转载

    ------------------------------------------------------------------------ -- Author : happyflystone - ...

  2. asp.net服务控件的生命周期

    1. 初始化 - Init事件 (OnInit 方法)   2. 加载视图状态 - LoadViewState方法   3. 处理回发数据 - LoadPostData方法           对实现 ...

  3. python: HTML之 鼠标放上去下拉项字体显示不同颜色

    鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  4. hash命令

    什么是hash ? 在网上找了好久都没找到简截有力的说明.hash 我把它当成是集合,一个hash 就是一个集合,里面字段对应一个元素,元素不重复,字段都不一样. 简单hash 命令 1.hset 哈 ...

  5. mac攻略(三) -- apache站点配置

    Mac OS X 中默认有两个目录可以直接运行你的 Web 程序, 一个是系统级的 Web 根目录:/Library/WebServer/Documents/ 此根目录我们平常使用地址http://l ...

  6. [poj2828] Buy Tickets (线段树)

    线段树 Description Railway tickets were difficult to buy around the Lunar New Year in China, so we must ...

  7. Hadoop 2.4.x集群安装配置问题总结

    配置文件:/etc/profile export JAVA_HOME=/usr/java/latest export HADOOP_PREFIX=/opt/hadoop-2.4.1 export HA ...

  8. Sprint(第六天11.19)

    燃尽图

  9. Shiro Security

    手动创建shiro Filter的java代码 // Factory<org.apache.shiro.mgt.SecurityManager> factory = new IniSecu ...

  10. poj2280Amphiphilic Carbon Molecules(极角排序)

    链接 卡了几天的破题,对于hdu的那份数据,这就一神题.. 借助极角排序,枚举以每一个点进行极角排序,然后构造两条扫描线,一个上面一个下面,两条同时走,把上线和下线的点以及上线左边的点分别统计出来,如 ...