Overflow属性详解(转载)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
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)),假设未定义高度。就像这样:
这里有更多关于浮动的细节文章关于浮动的一切。
跨浏览器的烦恼
就像CSS中的很多东东,overflow有很多的跨浏览器的蹊跷的事情。比如这些:
滚动条在盒子里面还是外面?
Firefox将其放到盒子外面,而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。
看清楚这个明显的不同。
IE 8 扩展盒子的bug
IE8有很多有趣的新bug,包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。
破坏浮动布局
IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦,而且单个扩展的列就能够将其它列挤下去并使布局乱掉!
滚动条能用CSS控制吗?
IE过去在较老的版本中允许这样,但是之后就收敛了。比如许多表单元素,滚动条就不允许使用CSS控制。我在它是否是件好事情上没有任何具体的意见,但是我可以说,在网站的所有内容上使用滚动条是很丑陋的和俗气的。如果你需要一个美化的滚动条,你或许需要寻找JavaScript来模拟。
IE 技巧
无论是否需要,IE都会一直显示一个垂直的滚动条,这对预防水平跳动是有些作用的,但并非总是可取的。要想在IE中移除它,可以在body元素中设置overflow为auto。
演示:
本文的演示页面,可以查看这个页面。
浮动和清理是CSS中的重难点。
可以参考文章:http://www.w3school.com.cn/css/css_positioning_floating.asp。这篇文章开头两句话总结的很好:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
本文转载自:http://paranimage.com/css-overflow-attribute/
转载于:https://www.cnblogs.com/purplefox2008/archive/2009/12/15/1624514.html
Overflow属性详解(转载)相关推荐
- overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性 原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...
- html中overflow是什么标签,CSS中Overflow的属性是什么?Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
- CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
- html元素的overflow属性详解
最近更新时间:2018年6月20日11:39:55 <我的博客地图> 最近接手一个老项目,该项目是用EasyReport这个Web报表工具在web页面动态展示数据库数据,在开发调试过程中遇 ...
- CSS3:overflow属性详解
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
- Meta http-equiv属性详解
Meta http-equiv属性详解 博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
- JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
- vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...
最新文章
- pku The Windy's KM最小权匹配 or 最小费用最大流
- 北大校友马里千:计算机视觉商用的下一个十年,AI 生成应占有一席之地
- 原来Transformer就是一种图神经网络,这个概念你清楚吗?
- DirectSound的应用
- Union和Union All到底有什么区别
- C#实现窗口最小化到系统托盘
- druid不能close mysql连接_alibaba druid mysql连接问题
- input ios问题
- dht11温湿度传感器_Arduino不调用库实现DHT11数据读取
- java编写一个人的类,statement到底是个什么东西?接口、类,谁能说明白它的原理,100分只给一个人...
- nb信号和4g信号_nb信号和4g信号_NB-IoT的网络如何组成,以及数据如何传输?
- php调用人脸识别接口,PHP实现人脸识别
- 2017人人都是产品经理年度作家评选结果公告
- 【五线谱】重音记号、渐强记号、渐弱记号
- c盘中的软件怎么转到D盘,将c盘软件转移到d盘
- oneapi安装CMAQ
- 圣剑传说 玛娜传奇(Legend of Mana)(LOM)主原料取得方法
- 流行于大学里的30个脑筋急转弯
- 计算机技术调剂控制工程,控制工程294求调剂 - 考研 - 小木虫 - 学术 科研 互动社区...
- SWFObject是什么