之前没有get到的overflow知识点

最近写一个移动端的活动页的的时候被overflow 戏弄一番，戏弄的点就是在pc上用浏览器调试一切正常，在手机上真机实测的时候就不行。想要隐藏的元素没有被隐藏掉。略显尴尬。查明之后确实发现这个知识点趋确实之前没有get到。

有的时候我们为了一些需求和页面的健壮性，经常使用overflow:hidden。使用其帮我们裁剪一下元素等。有时为了避免页面或者元素被撑开我们也会使用overflow属性。但是有些人（比如我）会对overflow:hidden 有一些误解，此属性并不能隐藏所有你想要隐藏裁剪的元素。

正常的使用：一般是一个元素我们给其设定固定的宽高。外加overflow属性。使其隐藏超出其范围的子元素。

But！！

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

在我之前的认知中，只要一个元素设置了固定的宽高和overflow，这样就可以将任何溢出当前元素的子元素裁剪掉，事实证明：too young too simple 。真正的事实是拥有overflow:hidden 样式的块级元素的子元素不一定都会被隐藏。

以下情况是不会被隐藏的。

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

也就是说

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .out {
        height: 200px;
        width: 200px;
        background: darkgreen;
        overflow: hidden; // 虽然设置了，但是不能隐藏子元素
    }

    .in {
        width: 300px;
        height: 100px;
        background: red;
        position: absolute;
    }
</style>
</head>
<body>
<div class="out">
    <div class="in">22</div>
</div>
</body>
</html>

再来一个对比的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .out {
        height: 200px;
        width: 200px;
        background: darkgreen;
        overflow: hidden;
    }

    .in {
        width: 300px;
        height: 100px;
        background: red;
        position: absolute;
    }
    .in2{
        width: 250px;
        background: yellow;
    }
</style>
</head>
<body>
<div class="out">
    <div class="in2">Being neither jealous nor greedy, being without desires, and remaining the same under all circumstances, this is nobility.</div>
    <div class="in">22</div>
</div>
</body>
</html>

可以看到绝对定位的元素没有被隐藏，普通元素是被隐藏的。普通元素符合我们预期，而绝对定位元素并不如很多人想当然的那样被隐藏。

在css 2.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.

（该属性指定当元素的框溢出时是否修剪块Container元素的内容。它影响所有元素的内容的剪辑，除了其包含块是元素的视口或祖先的任何后代元素（及其各自的内容和后代））

包含块的意思就是当前元素的最近的包含position:absolute 或者 relative 属性的元素，如果一直没有那就是body。

整理一下的意思就是：一个绝对定位的元素是否被隐藏，取决于其包含块是否含有 overflow:hidden 。

如果一个爷爷元素为relative，父级元素正常，并且规定了overflow，子集元素是absolute。这个时候父级元素的overflow是无法对子级元素进行裁切。

这个问题大体就是这个样子，在工作中的实际应用就是：一个元素要想彻底剪裁它的所有子元素，它不但要有overflow:hidden，而且还要作为所有子元素的包含块(position定位)。

get!

之前没有get到的overflow知识点

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

文章评论