父元素overflow:hidden对子元素的影响

最新推荐文章于 2023-11-02 16:25:02 发布

这个昵称没有被占用吧

最新推荐文章于 2023-11-02 16:25:02 发布

阅读量4.7k

点赞数 1

分类专栏：疑难问题解惑文章标签： overflow:hidden

本文链接：https://blog.csdn.net/csm0912/article/details/82661136

版权

疑难问题解惑专栏收录该内容

30 篇文章 0 订阅

订阅专栏

结论：如果这个父元素是body，则子元素不受影响；如果这个父元素是body之外的其他元素，则子元素会受overflow:hidden;的影响，即，子元素超出父元素部分会被隐藏。

如：

<style>
    body {
        width: 50px;
        height: 50px;
        overflow: hidden;
        border: 1px solid blue;
    }
    .son {
        width: 150px;
        height: 50px;
        background: yellow;
    }
</style>
<body>
    <div class="son"></div>
</body>

页面效果：
这里写图片描述

<style>
    .father {
        width: 50px;
        height: 50px;
        overflow: hidden;
        border: 1px solid blue;
    }
    .son {
        width: 150px;
        height: 50px;
        background: yellow;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

页面效果：
这里写图片描述

这个昵称没有被占用吧

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
父元素overflow:hidden对子元素的影响

结论：如果这个父元素是body，则子元素不受影响；如果这个父元素是body之外的其他元素，则子元素会受overflow:hidden;的影响，即，子元素超出父元素部分会被隐藏。如：&lt;style&gt; body { width: 50px; height: 50px; overflow: hidden; bo...
复制链接

扫一扫

专栏目录