根据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的方法,建议考虑采用——神飞
演示
本文的演示页面,可以查看这个页面。
原文链接:http://www.qianduan.net/css-overflow-property.html
分享到:
相关推荐
滚动条样式主要涉及到如下overflow属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 overflow: auto; 在需要时内容会自动添加滚动条 overflow: ...
overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来; 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto; overflow:auto 属性如果超出就出现...
通过使用 CSS 的 overflow 属性,我们可以确保圣诞树在不同设备和屏幕尺寸上都能完美显示,而不会被裁剪或破坏。这不仅增强了用户的体验,也保持了页面的整洁和布局的完整性。此外,通过添加装饰和使用媒体查询,...
在本案例中,“overflow属性的使用小例子”将展示如何运用`overflow`属性来实现不同的视觉效果。 `overflow`属性主要有以下几个值: 1. `visible`:这是默认值,表示内容可以超出元素的边框,不会出现滚动条。 2. ...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...
#### CSS Overflow 属性详解 `overflow`属性用于控制溢出内容的显示方式,常见的值有`visible`、`hidden`、`scroll`和`auto`。 #### CSS Position 详解 `position`属性定义元素的定位方式,包括`static`、`...
1. **盒模型属性**:包括`box-sizing`改变盒模型的行为,`outline`定义元素轮廓,以及`overflow`处理溢出内容。 2. **过渡和动画**:`transition`定义元素在不同状态间的平滑过渡,`animation`允许创建复杂的动画...
本篇将详细阐述CSS3中的关键知识点,包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧,定义了从一种样式到另一种样式的...
在CSS中,`text-overflow`属性是用来处理文本溢出情况的一个重要工具,尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用,来实现文本的截断和省略。本文将深入探讨`...
CSS overflow-wrap 属性其实就是以前的 word-wrap 属性,MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持,而其他现代浏览器依然支持老的 word-wrap...
1. CSS Overflow 属性:这是控制元素溢出内容的关键。`overflow`属性可以设置为`visible`(默认值,内容溢出元素边界)、`hidden`(隐藏溢出内容)、`scroll`(始终显示滚动条)或`auto`(仅在需要时显示滚动条)。...
CSS3 常用属性大全 CSS3 是 Cascading Style Sheets(层叠样式表)的第三个版本,是一种用于描述网页样式的语言。它对CSS2进行了扩展,添加了一些新的特性和功能。本文档总结了 CSS3 中的常用属性,涵盖了动画、...
1. **CSS Overflow属性**: CSS中的`overflow`属性是实现滚动功能的基础。它可以设置为`auto`或`scroll`,当内容超过容器的大小时,会自动添加滚动条。`overflow-x`和`overflow-y`则分别控制水平和垂直方向的滚动。...
CSS 属性查询以及用法 CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签,以及其对应的属性和用法。 字体属性(Font) * font-...
在网页设计与开发中,CSS(层叠样式表)作为控制HTML元素布局与样式的强大工具,其提供的诸多属性中,`overflow` 属性对于控制元素内内容的显示方式具有重要作用。其中,`overflow: hidden` 是一个非常实用且常见的...
CSS中关于溢出隐藏的知识点包含了多个方面,具体包括overflow属性的使用、其各个值的含义、以及如何优雅地处理内容溢出的情况。 首先,CSS中的overflow属性是用于控制元素溢出内容的显示方式。这个属性可以指定当...
下面我们将深入探讨在描述中提到的一些常用CSS属性。 字体属性: `font-size` 用于定义字体的大小,可以使用像素(PX)或其他相对单位如em、rem等。例如:`font-size: 16px;`。 `line-height` 设置行高,同样可以...