overflow属性，此溢出非彼溢出

最新推荐文章于 2024-10-05 06:00:00 发布

G018_star sky♬

最新推荐文章于 2024-10-05 06:00:00 发布

阅读量3.8k

点赞数 1

分类专栏： CSS 前端页面设计文章标签： CSS 前端

本文链接：https://blog.csdn.net/qq_42526440/article/details/99659405

版权

CSS 同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

前端

46 篇文章 0 订阅

订阅专栏

页面设计

12 篇文章 0 订阅

订阅专栏

页面上的每个元素都是一个盒子。如果没有设置盒子的高度，那么盒子的高度将随着所需的内容的增大而变大。

overflow属性

有四个值：visible（默认值），scroll，hidden和auto。
scroll值能阻止内容溢出，但会增加出滚动条，通过拉动滚动条可以浏览所有内容。
auto - 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。
hidden - 隐藏掉内容溢出的部分，溢出的内容将不可见。

那么问题来了，scroll与auto有什么区别呢？

当文本超出时，overflow:scroll; 与 overflow:auto; 都会出现滚动条。
当文本没有超出元素区域时，overflow:auto; 并不会出现滚动条，
而overflow:scroll; 依旧会显示滚动条。

示例代码：

<html>
<head>
       <style>
        div {
           width: 150px;
           height: 150px;
           background-color: LightBlue;
           float: left;
        }
        #scroll{
            background-color: red;
            overflow: scroll;
        }
        #auto{
            background-color: green;
            overflow: auto;
        }
        #hidden{
            background-color: yellow;
            overflow: hidden;
        }
       </style>
</head>
<body>
    <div id="none">
        这个文本在div元素里面，它有一个蓝色的
        背景颜色，并浮动到左侧。 我们设定一个具体的
        div元素的高度和宽度，正如你所看到的，这样会导致文本内容溢出。
    </div>
    <div id="scroll">
        这个文本在div元素里面，它有一个红色的
        背景颜色，并浮动到左侧。 我们设定一个具体的
        div元素的高度和宽度，并设置overflow为scroll，正如你所看到的，这样会使文本溢出内容可以拖拉展示。
    </div>
    <div id="auto">
        这个文本在div元素里面，它有一个绿色的
        背景颜色，并浮动到左侧。 
    </div>
    <div id="hidden">
        这个文本在div元素里面，它有一个黄色的
        背景颜色，并浮动到左侧。 我们设定一个具体的
        div元素的高度和宽度，并设置overflow为hidden，正如你所看到的，这样会导致文本内容的溢出部分被隐藏。
    </div>
</body>
</html>