解析css中的overflow属性

1. overflow定义和属性值

2.属性效果展示

2.1 overflow：visible；不裁剪超出盒子的部分

2.2 overflow：hidden；将超出盒子部分的内容隐藏；清除浮动

2.3 overflow：scroll 滚动条

2.3.1 overflow-y: auto; overflow-x: hidden;

2.3.2 overflow-x: auto; overflow-y: hidden;

2.3.3 overflow：scroll 强制滚动条

2.4 overflow：inherit 继承父元素overflow

1. overflow定义和属性值

overflow 属性规定当内容溢出时发生的事情

overflow有以下几种属性值：

1.overflow：visible；不裁剪超出盒子的部分

2.overflow：hidden；将超出盒子部分的内容隐藏

3.overflow-x：scroll；横轴强制出现滚动条

4.overflow-y:scroll 纵轴强制出现滚动条

5.overflow：scroll x轴和y轴都有滚动条

6.overflow：auto；自动判断是否出现滚动条

7.overflow：inherit；从父元素继承overflow属性的值

overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。

2.属性效果展示

2.1 overflow：visible；不裁剪超出盒子的部分

overflow：visible 不对属性样式进行修改

代码：

    <style>
        .a{
            width: 200px;
            height: 100px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div class="a">
我们中国人常说，嗜欲深者天机浅，嗜欲浅者天机深，就是说一个人如果一味沉溺于感官享受，这种人的智慧一定很浅薄。
只有从声色繁华中超脱出来，宁静沉思的人，才能具有把握纷繁人生和无穷宇宙的大智慧。而浅薄或智慧，完全在自己。
    </div>
</body>

2.2 overflow：hidden；将超出盒子部分的内容隐藏；清除浮动

overflow：hidden 会将超出盒子的部分完全隐藏起来，并且还可以用来清除子元素内的浮动

首先来看一下他的隐藏效果

可以看到该属性把超出盒子部分的文本完全隐藏了起来

css

    <style>
        .a{
            width: 200px;
            height: 100px;
            background-color: aliceblue;
            overflow: hidden;
        }
    </style>

清除浮动：

代码：

    <style>
        .a{
            width: 200px;
            background-color: rgb(42, 132, 210);
        }
        .p1{
            background-color: aqua;
            float: left;
        }
        .p2{
            background-color: azure;
            float: left;
        }
        .p3{
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="a">
        <p class="p1">你好</p>
        <p class="p2">你好</p>
        <p class="p3">你好</p>
    </div>
</body>

代码原效果：

原效果中并没有设置父元素高度，所以就造成了高度塌陷，当添加了overflow：hidden 后就解决了这个问题

css：

        .a{
            width: 200px;
            background-color: rgb(42, 132, 210);
            overflow: hidden;
        }
        .p1{
            background-color: aqua;
            float: left;
        }
        .p2{
            background-color: azure;
            float: left;
        }
        .p3{
            background-color: red;
            float: left;
        }

2.3 overflow：scroll 滚动条

2.3.1 overflow-y: auto; overflow-x: hidden;

y轴判断是否有滚动条，x轴上滚动条隐藏

css

    <style>
        .a{
            width: 200px;
            height: 100px;
            background-color: aliceblue;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>

2.3.2 overflow-x: auto; overflow-y: hidden;

这里因为x轴上并未超出盒子所以不需要滚动条，auto也就没有显示滚动条

css

    <style>
        .a{
            width: 200px;
            height: 100px;
            background-color: aliceblue;
            overflow-x: auto;
            overflow-y: hidden;
        }
    </style>

2.3.3 overflow：scroll 强制滚动条

不管内容是否超出都会出现滚动条

css

    <style>
        .a{
            width: 200px;
            height: 100px;
            background-color: aliceblue;
            overflow:scroll

        }
    </style>

2.4 overflow：inherit 继承父元素overflow

可以看到下面的样式中有两个滚动条，内部样式是继承其父元素的

代码：

    <style>
        .a {
            width: 200px;
            height: 100px;
            background-color: aliceblue;
            overflow: scroll
        }

        .b {
            overflow: inherit;
        }
    </style>
</head>

<body>
    <div class="a">
        我们中国人常说
        <div class="b">嗜欲深者天机浅，嗜欲浅者天机深，就是说一个人如果一味沉溺于感官享受，这种人的智慧一定很浅薄。
            只有从声色繁华中超脱出来，宁静沉思的人，才能具有把握纷繁人生和无穷宇宙的大智慧。而浅薄或智慧，完全在自己。</div>
    </div>
</body>

ps

如果有什么写的不好的地方还请各位大佬指点一二，不胜荣幸！