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. jquery一个按钮全选和反选

    1.jquery实现复选框全选和反选的方式有好几种,今天遇到一个问题,只用下边的方式生效:function checkAll(){ var check=$('#check_all').is(':che ...

  2. awk改变了OFS，$0却没变化

    一个文件1.txt,内容如下 a b c d e 目的把列变行,输出为: a b c d e 脚本如下: awk 'BEGIN{RS="";FS="\n";OF ...

  3. ASP.NET MVC学习系列(一)-WebAPI初探

    由于即将要接手的新项目计划用ASP.NET MVC3来开发,所以最近一段时间一直在看相关的书或文章.因为之前在大学里也曾学习过MVC2开发,也做过几个简单的MVC2的小型测试项目,不过在后来工作以后主 ...

  4. RecyclerView使用总结

    遇到的异常: java.lang.ExceptionInInitializerError静态块初始化异常 NetworkOnMainThreadException访问网线不能在主线程中进行 我的参考资 ...

  5. ajax用法流程

    这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...

  6. 有向图的强连通分量——Tarjan

    在同一个DFS树中分离不同的强连通分量SCC; 考虑一个强连通分量C,设第一个被发现的点是 x,希望在 x 访问完时立刻输出 C,这样就可以实现 在同一个DFS树中分离不同的强连通分量了. 问题就转换 ...

  7. 【Python】我的Python学习笔记【2】【using Python 3】

    ... 1. 在语法上,返回一个tuple可以省略括号,而多个变量可以同时接收一个tuple,按位置赋给对应的值, 所以,Python的函数返回多值其实就是返回一个tuple,但写起来更方便. 2. ...

  8. linux内核3.4基于wakeup_source的autosleep机制分析

    点击打开链接 一:wakeup_source简介: linux 3.4内核PM使用了wakeup_source来保持唤醒状态,也就是keep awake.之前android一直是基于Linux加入了w ...

  9. 运用EasyUI中datagrid读取数据库数据实现分页

    1dao层 package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate ...

  10. 【Android】解析Json数据

    Json数据:"{\"UserID\":\"Allen\",\"Dep\":IT,\"QQ\":\" ...