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 ...
随机推荐
- Centos7.5 安装Netdata
切为root, yum install zlib-devel gcc make git autoconf autogen guile-devel automake pkgconfig -y yum i ...
- 一些应该使用mongodb或者其他文档存储而不是redis或mysql、oracle json的情形(最近更新场景)
通常来说,我们应该使用应用的特性而不是自己的爱好或者规定而去选择一种合适的组件,选择的标准应该是这个组件最适合或者本身其设计就是为了解决这个问题,而不是这个组件能够做这事情为标准.就拿存储来说,任何时 ...
- 20145307陈俊达《网络对抗》Exp 8 Web基础
20145307陈俊达<网络对抗>Exp 8 Web基础 基础问题回答 1.什么是表单? 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据采 ...
- keil5配置stm32库函数开发
在将模板文件添加到工程中后, 1.点击魔术棒,选择C/C++,添加头文件的路径: 2.C/C++里面的define内填入:STM32F10X_MD,USE_STDPERIPH_DRIVER: 3.Ou ...
- Linux slab分配器【转】
本文转载自:https://www.ibm.com/developerworks/cn/linux/l-linux-slab-allocator/ 良好的操作系统性能部分依赖于操作系统有效管理资源的能 ...
- HDU 1043 Eight（双向BFS+康托展开）
http://acm.hdu.edu.cn/showproblem.php?pid=1043 题意:给出一个八数码,求出到达指定状态的路径. 思路:路径寻找问题.在这道题里用到的知识点挺多的.第一次用 ...
- A start job is running for Raise network interface（5min 13s ）问题解决方法
命令:sudo vim /etc/systemd/system/network-online.target.wants/networking.service将里面的TimeoutStartSec=5m ...
- MongoDB（课时18 修改器）
3.4.3.2 修改器(原子操作) 对MongoDB数据库而言,数据的修改会牵扯到内容的变更,结构的变更(包含数组),所以在MongoDB在设计的时候就提供有一系列的修改器的应用,那么像之前使用的“$ ...
- 对当前JAVA流行框架的一些小感悟
这几年,蹦出了不少各种JAVA框架,像是spring boot.spring cloud 和spring mvc或者是mybatis等等. 不断有人感慨,技术更新的太快,自己学都学不过来了. 但是,这 ...
- Android蓝牙通信功能开发
1. 概述 Bluetooth 是几乎现在每部手机标准配备的功能,多用于耳机 mic 等设备与手机的连接,除此之外,还可以多部手机之间建立 bluetooth 通信,本文就通过 SDK 中带的一个聊天 ...