overflow属性-摘自网友
CSS Overflow 属性
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。
overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。
让我们分别看一下这几个值，并讨论一写共同用法和技巧。
Visible
如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。
这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：
一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。
Hidden
默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。
这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……
Scroll
设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。
值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。
Auto
overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。
清除浮动
设置overflow的一个更流行的用处是，说也奇怪，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：
对于此问题，经过测试，IE6会自动扩展父层元素的高度，而IE8和FF等浏览器加上overflow:auto后，即可清除浮动。——神飞
这里有更多关于浮动的细节文章关于浮动的一切。
跨浏览器的烦恼
就像CSS中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。比如这些：
滚动条在盒子里面还是外面?
Firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。
看清楚这个明显的不同。
IE 8 扩展盒子的bug
IE8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。
破坏浮动布局
IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！
事实上，这个我在验证的时候发现，只有IE6才会出现这种情况，而IE7、IE8和其它浏览器表现一致。如果大家在使用IE7或IE8时有遇到这种情况，请告诉我，多谢！——神飞
滚动条能用CSS控制吗？
IE过去在较老的版本中允许这样，但是之后就收敛了。比如许多表单元素，滚动条就不允许使用CSS控制。我在它是否是件好事情上没有任何具体的意见，但是我可以说，在网站的所有内容上使用滚动条是很丑陋的和俗气的。如果你需要一个美化的滚动条，你或许需要寻找JavaScript来模拟。
IE 技巧
无论是否需要，IE都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。要想在IE中移除它，可以在body元素中设置overflow为auto。PS:此种情况也较少发现，不过在body的样式中添加overflow:auto的方法，建议考虑采用——神飞
演示
本文的演示页面，可以查看这个页面。
作者: 13 个评论
ie7的visible在某些情况下有bug，比如子元素为inline元素，该元素有上下padding，这个时候子元素的背景并不会overflow到父元素的外面去
不过我也没弄清到底是“上下padding”的bug还是“overflow:visible“的bug，过两天做个demo再试试-
ie6的visible bug似乎是这么解决的，外层元素使用overflow:hidden，然后子元素使用position:relative，这样可以达到ie6下呈现overflow:visible;的效果。但是我纳闷的是OOCSS下的template.css为什么这么写.body{overflow:hidden; _overflow:visible; _zoom:1;} 这个_zoom:1还好理解ie6下让.body元素触发Haslayout，这个_overflow:visible是什么意思，ie6下overflow默认不是visible？帮忙解答下吧，神飞。
- gylpm 发表于Sep 2, 2010 at 20:59
【滚动条在盒子里面还是外面?
Firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。】
怎么改正Firefox的滚动条放置在盒子里面啊？
- 锋华 发表于Sep 25, 2010 at 15:25
『这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。』
这句话欠妥，在visible的情况下，只有ie7会这么干，ie6自动延展父元素，ie8和标准浏览器都将超出的内容在正常的文档流里面显示出来，不会重叠覆盖。
微信上关注我们
请扫描上面的二维码
或者在微信中搜索"iqianduan"添加好友
推荐微信机器人高级版
热门文章
- LESS/Sass/CoffeeScript编译工具推荐 – Koala
- 扁平化设计美学
- Chrome 28发布——hello Blink
- 移动端webapp开发必备知识
- 扁平化网页设计展示
- 有用的:nth-child秘方
- CSS实现垂直居中的5种方法
- 【校园招聘】腾讯ISUX招募前端开发实习生
- HTML5 中 div section article 的区别
- 腾讯ISUX急招前端开发
- 前端界网站上线
- 明天的CSS
- font-face在移动终端的支持
- 别了，Presto，Opera新版本将采用Webkit内核
- 你需要知道的CSS3 动画技术
- 60多个超炫的视差滚动效果网站设计欣赏
- iPhone 5/iOS 6前端开发指南
- Zen Coding: 一种快速编写HTML/CSS代码的方法
- CSS简写指南
- 关于z-index的那些事儿
友情链接
- 99CSS
- CSS HOUSE
- CSS9.NET
- CSS库吧
- GaoWhen高H温
- GBin1
- Hiro技术站
- ibaoland
- IE浏览器
- learntome
- Linode VPS
- poor
- Smallni's blog
- suta
- Time Machine
- V2EX
- Web 标准化交流会
- WEB前端开发
- WhyIDC 双线全能空间
- 中文最佳网站设计
- 前端博客导航
- 前端界
- 启良工作室
- 堂主
- 大猫の意淫网志
- 我爱互联网
- 我爱水煮鱼
- 笨笨剥壳
- 米随随s5s5
- 腾讯AlloyTeam
- 芒果
- 裁纸刀下
- 觉唯前端
- 车周边
- 软件开发网
- 进步博客
- 飘飘的生活空间
- 黄老湿
Meta
overflow属性-摘自网友的更多相关文章
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- overflow属性
css属性overflow属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制. 参数是scroll时候,必会出现滚动条. 参数是auto时候,子 ...
- CSS overflow 属性
值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性及其在ios下卡顿问题解决
overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...
- CSS3对于盒中容纳不下的内容的显示——overflow属性
overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...
- div包裹页面后多余部分没有显示，也没滚动条 overflow 属性设置
今天弄个div套着一个页面结果那个页面超出范围后页面没有滚动条可以滚动浏览下面的内容,原来是设置了overflow的hidden属性 visible 默认值.内容不会被修剪,会呈现在元素框之外. hi ...
随机推荐
- JS获取周、月、季度日期
效果: 代码: //用于获取日期本周.本月.本季度的js //Author : guanghe //文件引用方法:<script src="${staticPath}/common/j ...
- Node.js读取文件内容
原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...
- 20145106java实验四
实验名称:Java网络编程 实验内容: 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 结对小伙伴 20145109竺文君 博客地址: 在本次实验中,是以我作为服务 ...
- Android实践项目汇报（四）
全国天气客户端 本周学习计划 添加修改功能,完成项目 实际完成情况 1.成功显示当天及后几天的天气信息 通过修改chaxun.java程序,比较JSON数据格式中JSONObject("to ...
- liunx查询进程下的线程
问题:一个进程下面会启动多个线程,通过top命令可以查出某个进程cpu,内存使用情况等信息,但无法知道是哪个线程. 解决方法: 1. 用jstack打印出给定的java进程ID的Java堆栈信息(js ...
- startActivityForResult( )用法
一.与startActivity( )的不同之处 1, startActivity( ) 仅仅是跳转到目标页面,若是想跳回当前页面,则必须再使用一次startActivity( ). 2, start ...
- ubuntu16.04下无线网卡无法正常连网
背景:无线网卡初次连接可以正常上网,但是用了一会儿就会出现无法上网的情况 版本: Ubuntu 16.04 一.分析: 1.使用ifconfig命令发现不会显示无线网卡,说明无线网卡被关闭,笔者输出的 ...
- P4396 [AHOI2013]作业
题目链接 luogu4396 思路 唯有水题暖人心 咕了4天,今天跟着std对拍才做出来不得不说题解真的水的一批 先离散化一下 第一问差分询问,权值树状数组套一套就好了 \(nlog_{n}\) 第二 ...
- 小Z的袜子（莫队分块）题解
小Z的袜子(hose) 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把这N只袜 ...
- Oracle 存储过程入门（一）
一,基本入门介绍 公司系统需要用到oracle,可是还没在项目用过oracle,好吧,从基本学起.有问题的地方,欢迎指导啊. 看创建存储过程的基本定义.注意,带有[]的都是可选的,可有可无的.只是语法 ...