当前时间:Saturday 2018年06月23日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> javascript >> 正文

CSS中的overflow属性

即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时 的表现。例如,如果你没有给一个盒模型指定一个高度,那么它就会随着内容的增加变得越来越高。但是如果当你为盒模型指定一个高度、而其内部的内容不能与其 完全匹配时又会怎么样呢?这时就要用到CSS中的overflow属性了,它允许你来设定如何处理多余的内容。

overflow有四个属性:visible(默认属性)、hidden、scroll和auto。此外它还有两个姊妹属性:overflow-x和overflow-y,这两个使用的相对较少。

让我们看看每个属性的具体使用方法。

Visible

如果你没有设定overflow属性,其默认值就是visible。因此,一般意义上说没有必要刻意声明其属性值为visible,除非是要覆盖基之前继承的属性。

overflow设定为visible时的页面表现

需要注意的一点是,虽然盒模型内部的内容溢出到外围,但是不影响其它元素的浮动。

溢出的内容不会影响后继布局

一般说来,对于内部有文本内容的盒模型来说不能简单地设定一个固定高度。

Hidden

和默认属性visible功能恰恰相反的属性是hidden,它会隐藏掉所有超出盒模型之外的内容。

overflow设定为hidden时的页面表现

对于动态内容和解决可能由于overflow影响布局的问题,它显得十分有用。但是,在大脑中一定要有这样一个意识,就是使用方法来隐藏文字不利于页面的可用性。例如,用户将默认字体设置到比你预计得要大时,就会有内容溢出,这些内容将会从用户的视野中消失。

Scroll

把overflow的值设为scroll,可以防止盒模型内的内容溢出到外围,但是它提供了一个滚动条,通过它可以查看盒内部的所有内容。

overflow设定为scroll时的页面表现

需要注意的是,设定此值后,在盒模型的水平、垂直两个方向都会出现滚动条,即使其内容只需要一个就足够了。

auto

overfollow的auto值和scroll差不多,不过它只在需要的时候才会出现滚动条。

overflow设定为auto时的页面表现

浮动清除

最不可思议的是,使用overflow属性的多数情况不是为了处理溢出内容,而是用来清除浮动。设置overflow并不会清除元素本身的浮动,元 素是自身来清除浮动的。这就意味着,设置了overflow属性(auto或者hidden)的元素,在其高度未设定的情况下会随着其内部浮动元素的增大 而增大。

使用overflow清除浮动元素

更多细节可以参照这篇 All About Floats.

跨浏览器问题

和约大多数CSS规则一样,overflow也存在着跨浏览器的问题。

滚动条在盒模型内部还是外部

Firefox是放置在盒模型的外部,而IE则是内部。我相信在这一点上只有IE才是正确的(它的确应该出现在盒模型的内部)。

IE中滚动条在内部,而Firefox在外部

一定要留意这个差别。

IE8扩展盒模型中的bug

IE 8 有很多新的bug,其中包括非常严重的一个,它会让整个页面都隐藏起来。

更多细节

破坏浮动布局

IE 6、7、8中,overflow为visible时,它会在水平方向扩展宽度直到显示出所有的内容为止(例如一张图片)。在浮动多栏布局中这是一个让人头疼的问题,一栏的自动扩展会把其它栏挤到下去,更严重的情况下会打乱整个布局。

IE中overflow的bug

滚动条可以使用CSS定制样式吗?

在老式的IE中是可以的,但是现在不行了。像多数表单元素一样,滚动条不能使用CSS来设定样式。我不能说这样是好还是不好,但是整个网站的内容都被滚动条包围着的确很难看。如果你需要设定滚动条的样式,那么你最好使用JavaScript

IE中的“技巧”

无论是否必要,IE总会显示垂直滚动条。这里可以完美解决这个问题,但并不是任何情况下都需要。想在IE中移除掉它,可以给body设置overflow为auto。

示例

本文中的演示可以在这个页面中找到。

转载请注明出处:
英文地址:http://css-tricks.com/the-css-overflow-property/
中文地址:http://www.dudo.org/article/CSSJS/289.htm

作者:夜阑小雨
原文链接:CSS中的overflow属性
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

所在分类:javascript

评论信息

0 条评论 发表评论

发布评论

您必须登录才能发表评论。

网站客户端下载