视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
overflow:hidden_html/css
2020-11-27 16:15:41 责编:小采
文档

原来以为overflow:hidden能隐藏所有溢出的子元素,但今天发现我错了。

对于overflow:hidden的最大误解时:当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时,其内部的任何溢出的内容都将被剪裁(隐藏)。

同时满足以下条件就无效:

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

这里引用网上对overflow的css2.1规范的解释:

原文

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并不是万能的,要想彻底剪裁它的所有子元素,它不但要有overflow:hidden,而且还要作为所有子元素的包含块。

下载本文
显示全文
专题