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. mongodb备份与恢复

    一.备份:mongodump -d mailaccess -c Mail -q ‘{user:”zhaoxy1@szdep.com”}’ -o /data/dump备份mailaccess datab ...

  2. SQL Server 利用批量(batchsize)提交加快数据生成/导入

    在最小化日志操作解析,应用的文章中有朋友反映生成测试数据较慢.在此跟大家分享一个简单的应用,在生成数据过程中采用批量提交的方式以加快数据导入. 此应用不光生成测试数据上,在BCP导入数据中,复制初始化 ...

  3. OBD K线抓包 II

    9141的激活过程是先发WakeUp, 然后用Link: const u8 LinkCmd9141[7]  = {6,0x68,0x6A,0xF1,0x01,0x00,0xC4}; 14230的Lin ...

  4. Java堆栈的应用1----------堆栈的自定义实现以及括号匹配算法的Java实现

    接下篇:http://www.cnblogs.com/fuck1/p/5995857.html 堆栈的应用1:括号匹配算法 括号匹配问题 假设算术表达式中包含圆括号,方括号,和花括号三种类型.使用栈数 ...

  5. oneKey 系统备份

    oneKey系统备份,系统进入不了备份ghost界面 原因:备份文件名中有括号"()"

  6. 普华永道高级JAVA面试记录

    最近在考虑换个工作 原因?咱能不逗吗? 一面感觉发挥不错  二面之后累觉不爱  基本上浪费了半天的工资(好多钱啊~~~) PWD上海地址在浦东软件园  工作环境说实话没我现在工作的环境好,不过里面的人 ...

  7. 2016年江西理工大学C语言程序设计竞赛（初级组）

    问题 A: 木棒根数 解法:把所有的情况保存下来,加一下就好 #include<bits/stdc++.h> using namespace std; map<char,int> ...

  8. Oracle求连续的年份

    SELECT ('2013') + ROWNUM year FROM dualCONNECT BY ROWNUM <= 2;

  9. MXNet 学习 (1) --- 最易上手的深度学习开源库 --- 安装及环境搭建

    安装环境:Win 10 专业版 64位 + Visual Studio 2015 Community. 记录下自己在有GPU的环境下安装配置MXNet的过程.该过程直接使用MXNet release ...

  10. golang 文件读取

    Golang 的文件读取方法很多,刚上手时不知道怎么选择,所以贴在此处便后速查. 一次性读取 小文件推荐一次性读取,这样程序更简单,而且速度最快. 复制代码 代码如下: func ReadAll(fi ...