网站建设/网络营销:15810976067点击这里给我发消息

地址:北京朝阳万达广场       中国大陆/7*24小时热线:15810976067

首页 -策- -术- 建站 营销 TOP
首页 > > 网站优化 > 正文

容易被误解的overflow:hidden
2016-07-29 09:34:24   来源:   点击:

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文。但是,很多人对这个属性是存在着一定的误解的。

网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度(或高度)可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时,都认为overflow:hidden造成了特殊情况下的麻烦。但如果认真阅读一下css规范,会发现overflow:hidden其实并不一定隐藏溢出内容。

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

 

对于overflow:hidden的最大误解时:当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时,其内部的任何溢出的内容都将被剪裁(隐藏)。 但事实确实如此吗?答案是“未必”!事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件:

  1. 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式;
  2. 内部溢出的元素是通过position:absolute绝对定位;

如果你只关心结论,那么记住这两点就够了。我这里有个demo,结构如下:

<div class="position">    <h2>position box</h2>    <div class="overflow">        <h3>overflow box</h3>        <div class="static">            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>        </div>        <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div>    </div></div>

我简单截几个图给懒得打开demo的童鞋看一下:

overflow-ie6 overflow-ie8

overflow-chrome overflow-firefox

在demo中,你可以看到绝对定位的元素被定位到了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的元素)的父级元素时,则不受影响。

即使是我重新整理过的语言,还是感觉有点绕。不过在这段话里,出现了一个重要的名词“包含块”(containing block)。包含块是什么呢?这个大家其实比较熟悉,一个绝对定位的元素,其包含块是最近的拥有relative或者absolute定位属性的祖先元素,如果任何一级祖先元素都不符合,则其包含块是body元素。

这就说明,一个绝对定位的元素是否被overflow:hidden隐藏,要看其包

相关热词搜索:overflow:hidden

上一篇:SEOer未来都有哪些出路?
下一篇:最后一页

分享到:
建站套餐
  • A套餐 企业展示经济型
  • B套餐 企业展示销售型
  • C套餐 企业展示营销型
  • D套餐 企业传播型(论坛)
  • E套餐 企业商务型(商城)
营销套餐
  • A套餐 企业推广经济型
  • B套餐 企业推广销售型
  • C套餐 企业推广营销型
  • D套餐 企业推广传播型
  • E套餐 企业推广商务型
  • F套餐 企业推广综合型