dudo博客

5月
28

即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过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://dudo.org/?p=289



共有(5)条评论

maybelove 发表于 2009-5-29 at 13:04 #1楼

firefox滚动条也是放在盒子里面的吧
[reply=dudo,2009-05-31 09:53 AM]测试了是放在外面的~~难倒和版本有关系?[/reply]

[回复]


宝儿 发表于 2009-5-31 at 10:44 #2楼

To:dudo

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

你对CSS2.1的overflow model定义可能存在一些误区,当然是特指滚动条自身的放置位置这个问题,一年以前在蓝色论坛上我就同学们对此FF3.0的解析疑问做过阐述(该帖我一时还没翻着)。

我们来简化一下模型:

——这时视觉上应该是一个400px宽、100px高的容器(包含padding,border除外),这点应该毫无疑问,接下来:

[回复]


宝儿 发表于 2009-5-31 at 10:46 #3楼

To:dudo

——如果这样还不太明白的话,可以再翻一下规范原文:
http://www.w3.org/TR/CSS21/visufx.html#overflow

11.1.1 Overflow: the 'overflow' property
……
In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
……

我想这段应该不难理解了,包括为什么要这样的渲染问题?

[回复]


宝儿 发表于 2009-5-31 at 10:47 #4楼

To:dudo

OK,如果你理解了,但还有一个可能存在的问题——浏览器的根元素的滚动条如何放置?对此,原文特别做了强调:
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

我最后想要说的是:
通过长期的浏览器应用实践,CSS2.1在原CSS2的规范原文上做了相当多的修正和补充,特别是一些细节上CSS2留下来的悬疑,而这些不完善的部分是当初CSS2规范的制定者们很难确定或预见到的(那时完全缺乏浏览器的实践)。
CSS2.1虽非完美,当就目前的浏览器实践来说,已是相当的严谨了。
而mozzilla为标准的实现做出了相当多的贡献,包括“得罪”那些开发者的已有实现经验和直觉经验——毕竟严谨的工程学规范最终是依赖细致和甚微的模型推导,而不是直觉经验。

[回复]


老生常谈:CSS overflow 那些事儿 | MAGICALBOY 发表于 2010-6-20 at 00:13 #5楼

[…] 快速认识CSS中的overflow属性 | dudo博客 […]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量