开发者社区> 技术小大人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS Overflow属性详解

简介:
+关注继续查看

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。

overflow属性有四个值:visible (默认), hiddenscroll, 和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(autohidden)的元素,将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(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。

演示

本文的演示页面,可以查看这个页面

英文原文:The CSS Overflow Property
中文译文:CSS Overflow 属性


本文转自    风雨萧条 博客,原文链接:   http://blog.51cto.com/1095221645/1811254     如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
css 选择器学习笔记
css 选择器学习笔记
53 0
css4—第4代选择器
<p><img src="http://www.script-tutorials.com/demos/370/thumb.png" alt=""></p> <p><br></p> <p>        历史前进的步伐是不会停止的,紧跟着CSS3,新的CSS4也即将问世,它正由W3C编辑团队研发中。从历史的角度看,CSS的发展和web浏览器的发展是相互独立的,它们是并行进步的。这就导致不
1535 0
Centos7.6安装 TensorFlow2.1.0
Centos7.6安装 TensorFlow2.1.0
92 0
《TensorFlow技术解析与实战》——2.4 从源代码安装
本节书摘来自异步社区《TensorFlow技术解析与实战》一书中的第2章,第2.4节,作者李嘉璇,更多章节内容可以访问云栖社区“异步社区”公众号查看 第2章 TensorFlow环境的准备 2.4 从源代码安装 从源代码编译安装,需要使用Bazel编译工具。
2401 0
1558
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载