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 ...
随机推荐
- CSS style 属性
CSS style 属性 定义和用法 必需的 type 属性规定样式表的 MIME 类型. type 属性指示 <style> 与 </style> 标签之间的内容. 值 &q ...
- c++的友元类、方法及其益处
在java中,我们知道除了public和private,protected外,还有默认的包可见性访问级别,虽然如此,很多时候出于早期设计缺陷的原因,我们需要访问一些包或者protected可见性级别的 ...
- c++继承、多态以及与java的行为差异之处
对于面向对象而言,多态是最有用的基本特性之一,相对于函数指针,易用得多.下面看下c++继承和多态行为的基本特性,最后说明下和java的基本差别. 首先定义父类和子类. base.h #pragma o ...
- Nodejs学习笔记（四）与MySQL交互（felixge/node-mysql）
原文链接:http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html 介绍使用felixge/node-mysql进行SQL的增删改查以及断线重连等操作.
- VC++使用服务做守护进程的示例(转载)
转载:http://blog.csdn.net/zdy0_2004/article/details/40461571 #define _WIN32_WINNT 0x502 #define _CRT_S ...
- 如何获取xml循环体报文内容
Xml报文格式如下所示: <body> <FILENAME></FILENAME> <records>20</records> < ...
- HDU 1171 Big Event in HDU（0-1背包）
http://acm.hdu.edu.cn/showproblem.php?pid=1171 题意:给出一系列的价值,需要平分,并且尽量接近. 思路:0—1背包问题. 0-1背包问题也就是有n种物品且 ...
- 安装cartographer
# Build and install Cartographer. git clone https://github.com/hitcm/cartographer.git cd cartographe ...
- telnet不是内部或外部命令的解决方案
telnet主要是为了维护使用,windows默认不打开这个功能,所有无法登陆 按照下面截图,可轻松打开telnet功能 点击控制面板 选择程序和功能 点击左上角打开 turn windows fea ...
- 精通移动app测试实战