`
robinqu
  • 浏览: 90284 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Overflow属性

    博客分类:
  • css
阅读更多
引用
overflow

Values:
visible | hidden | scroll | auto | inherit

Initial value:
visible

Applies to:
Block-level and replaced elements

Inherited:
No

Computed value:
As specified


If scroll is used, the panning mechanisms (e.g., scrollbars) should always be rendered. To quote the specification, "this avoids any problem with scrollbars appearing or disappearing in a dynamic environment." Thus, even if the element has sufficient space to display all of its content, the scrollbars should still appear. In addition, when printing a page or otherwise displaying the document in a print medium, the content may be displayed as though the value of overflow were
declared as visible.

Scroll 意味着滚动条始终被显示,那么就可以避免在动态文本的容器中滚动条显示、出现造成的种种问题。当在打印介质中,Scroll会默认编程visible,即自动溢出。

If overflow is set to hidden, the element's content is clipped at the edges of the element box, but no scrolling interface should be provided to make the content outside the clipping region accessible to the user.

hidden代表隐藏超出高度的部分

Finally, there is overflow: auto. This allows user agents to determine which behavior to use, although they are encouraged to provide a scrolling mechanism when necessary. This is a potentially useful way to use overflow since user agents could interpret it as "provide scrollbars only when needed." (They may not, but they certainly could and probably should.)

auto是让浏览器自动选择是否显示滚动条


来自CSS Definitive Guide
分享到:
评论

相关推荐

    overflow属性的使用小例子

    在本案例中,“overflow属性的使用小例子”将展示如何运用`overflow`属性来实现不同的视觉效果。 `overflow`属性主要有以下几个值: 1. `visible`:这是默认值,表示内容可以超出元素的边框,不会出现滚动条。 2. ...

    详解CSS3:overflow属性

    overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来; 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto; overflow:auto 属性如果超出就出现...

    css使用overflow属性控制滚动条的样式

    滚动条样式主要涉及到如下overflow属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 overflow: auto; 在需要时内容会自动添加滚动条 overflow: ...

    使用CSS `overflow` 属性打造完美圣诞树

    通过使用 CSS 的 overflow 属性,我们可以确保圣诞树在不同设备和屏幕尺寸上都能完美显示,而不会被裁剪或破坏。这不仅增强了用户的体验,也保持了页面的整洁和布局的完整性。此外,通过添加装饰和使用媒体查询,...

    页面内容overflow代码

    1. **CSS中的overflow属性** CSS的`overflow`属性允许我们指定当内容溢出其容器时的行为。主要的值有`visible`(默认值,内容会溢出容器)、`hidden`(隐藏溢出内容,不显示)、`scroll`(显示滚动条以便查看所有...

    css中text-overflow属性与文本截断详解

    在CSS中,`text-overflow`属性是用来处理文本溢出情况的一个重要工具,尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用,来实现文本的截断和省略。本文将深入探讨`...

    用margin和overflow属性实现div间距的方法

    ### 使用margin和overflow属性实现div间距的方法 在网页布局中,如何优雅地处理元素之间的间距是一门艺术。本文将深入探讨一种使用`margin`和`overflow`属性来实现div间距的技术,这种方法不仅能够提高开发效率,还...

    美工之路 网页设计视频教程CSS篇-33.盒子Box:overflow属性.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    标签增加CSS的overflow属性来清除浮动

    为了解决这个问题,我们可以使用CSS的`overflow`属性来清除浮动,而无需依赖传统的`clear:both`方法。 `overflow`属性在CSS中主要用于控制内容溢出元素边界时的行为。当设置为`overflow:auto`或`overflow:hidden`时...

    浅谈css溢出机制探究

    如果和上的overflow属性设置为visible,那么overflow属性会传递到视口(viewport)。但如果元素设置了overflow,而没有设置,那么的overflow值不会被冒泡。此外,html元素本身不会产生滚动条,其overflow属性永远是...

    全面阐述overflowhidden属性

    ### 全面阐述 `overflow: hidden` 属性 在网页设计与开发中,CSS(层叠样式表)作为控制HTML元素布局与样式的强大工具,其提供的诸多属性中,`overflow` 属性对于控制元素内内容的显示方式具有重要作用。其中,`...

    CSS浮动属性Float详解 什么是CSS Float?

    空 div 方法是使用一个空的 div 元素来清除 Float,而 overflow 方法是使用 overflow 属性来扩展父元素以包含浮动。 Float 属性是 CSS 中非常重要的一部分,掌握 Float 属性可以帮助我们创建复杂的网页布局。但是,...

    细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果

    值得一提的是,CSS3中的overflow属性也可以一次性指定overflow-x和overflow-y的值,使用逗号分隔,如overflow: scroll auto;。这为开发者提供了更多的便利和控制。 综上所述,通过适当地使用overflow-x和overflow-y...

    使用CSS的overflow属性防止float撑开div的方法

    为了解决这个问题,我们可以利用CSS的`overflow`属性,特别是`overflow: hidden`这一值,来防止浮动元素撑开其父容器。 首先,让我们理解`float`属性的工作原理。`float`属性可以设置为`left`、`right`或`none`,...

    HTML5&CSS3网页制作:文本外观属性.pptx

    省略标记可以通过text-overflow属性设置,例如ellipsis等。设置省略标记需要将包含文本的对象定义宽度,应用“white-space:nowrap;”样式强制文本不能换行,应用“overflow:hidden;”样式隐藏溢出文本,最后应用...

    CSS属性探秘系列(二):overflow及相关属性text-overflow

    一、overflow指定盒中...3.说明:对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    CSS中关于溢出隐藏的知识点包含了多个方面,具体包括overflow属性的使用、其各个值的含义、以及如何优雅地处理内容溢出的情况。 首先,CSS中的overflow属性是用于控制元素溢出内容的显示方式。这个属性可以指定当...

    CSS控制文本的长度 超过一行显示省略号的实现方法

    text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏

Global site tag (gtag.js) - Google Analytics