overflow溢出内容区的解释

最新推荐文章于 2024-08-10 12:02:24 发布

孤枫_J

最新推荐文章于 2024-08-10 12:02:24 发布

阅读量2.6k

点赞数 3

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_35809245/article/details/53648650

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一定义：overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

二重点理解内容被修剪的时候是以那个为基准：
走一段代码：

    <style>
            .one {
                width: 300px;
                height: 300px ;
                border: 50px solid black ;
                overflow: hidden;
                padding: 50px;
            }
            .two {
                width: 1500px;
                height: 150px ;
                background-color: pink;
            }

        </style>
    </head>
    <body>
        <div class="one">
            <div class="two"></div>
        </div>
    </body> 

这个属性定义溢出    元素内容区     的内容会如何处理。注意  内容区包括   内容(height + width)+padding，并不包括border 和margin.

看效果：

不设置 overflow :hidden 时候：

这里写图片描述