CSS中overflow属性介绍

原文地址：http://blog.sina.com.cn/s/blog_51048da701017yyp.html

overflow属性规定当内容溢出元素框时发生的事情，有四个参数，分别是：

visible：内容不会被修剪，会呈现在元素框之外，这是默认的值。

hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：由浏览器决定如何显示。如果需要，则显示滚动条。

下面分别说一下各个参数的用法：

1.visible

如果你不设置overflow属性，则默认的属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其他地方设定的值。请看下图：

2.hidden

关于hidden要说的比较多，因为用到它的地方还比较多。

首先，我们知道hidden，顾名思义，就是要隐藏掉超出盒子的所有内容，在网页构建的过程中，hidden的使用也比较多，有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的。

overflow:hidden并不隐藏所有溢出的子元素

在css2.1规范中，对overflow的定义如下：

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body元素）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。

这里出现了一个重要的概念即“包含块”，其实包含块就是：一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素。

这段话就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。

实际上在css2.1规范的11.1节，还有更明确的说明：

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。

一个绝对定位的后代块元素，部分位于容器之外。这样的元素是否剪裁并不总是取决于定义了overflow属性的祖先容器；尤其是不会被位于他们自身和他们的包含块之间的祖先容器的overflow属性剪裁。

理论明白了，我们看下在实际的工作中，怎么应用呢？

如果要彻底隐藏掉容器的所有子元素，不仅要设置overflow:hidden,还要让容器作为所有子元素的包含块，也就是为容器设置position属性。

举个例子：

<div class="outer" style="width:100px; height:100px;"><div class="inner" style="overflow:hidden;"><span style="position:absolute; top:-20px;"></span></div></div>

如果把position:relative属性加在inner里，绝对定位的元素会被隐藏；如果加在标签outer里，绝对定位的元素将不会受到影响。这样的话，如果我们想让inner里的子元素正常被隐藏，又不希望绝对定位的子元素被隐藏，就可以在inner的父标签上添加position属性。

overflow:hidden+zoom:1清除浮动

此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden;是个小炸弹，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。

3.scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

我们可以通过控制overflow-x:hidden;overflow-y:hidden;来控制滚动条的隐藏。

4.auto

overflow的auto值很像scroll，不同的是auto属性只在盒子需要的时候给它一个滚动条。

CSS中overflow属性介绍相关推荐

css中overflow:hidden的属性可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
overflow属性html5,什么是css中overflow属性
什么是css中overflow属性发布时间:2020-07-11 16:06:42 来源:亿速云阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...
html中overflow是什么标签,CSS中Overflow的属性是什么？Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
关于css中overflow的一些理解
在做移动端开发的时候,遇到过这么个问题:要把图片进行放大,但有时候图片比较长,一个手机的版面看不了,于是需要用到overflow的属性,刚开始用了overflow-y:scroll, 于是问题来了,如 ...
css中overflow属性失效，页面始终不能滚动显示溢出的内容
如果overflow设置正确,出现这种问题大抵是因为position属性的设置为了fixd,这导致页面中的内容相对于页面是一定的,包括溢出的内容,他也在页面的某一个位置.而页面滚动本质上页面这个pan ...
css中overflow、overflow-x、overflow-y使用
overflow:当内容超出容器时的处理: 值:(1)visible:默认值,如果超出为显示: (2)auto:如果超出就出现滚动条,没有超出则不出现滚动条这样就可以出现滚动条: (3)hidden: ...
css 中的position
CSS中position属性介绍(新增sticky) position的含义是指定位类型,取值类型可以有:static.relative.absolute.fixed.inherit和sticky,这 ...
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...

CSS中overflow属性介绍

CSS中overflow属性介绍相关推荐

最新文章

热门文章