overflow 属性 - 一只有梦想的前端小白

程序员文章站 2022-04-29 10:06:17

...

写在前面的话：

2016年5月4日青年节，作为一名正青春的学生党，开始了博客生涯，励志做个勤奋上进的好青年。幻想着毕业后月薪W+ 、走上人生巅峰的职场生活......

然而然而然而，自制力有限的我昨天还是没有控制住，追起了《欢乐颂》，啊啊啊啊啊，一看就是一整天啊，简直是大写的颓废！！！

哈哈，我相信很多人也在追这部剧，在这部剧里，每个人应该都能够找到自己喜欢的角色，也应该能够从她们身上找到点点相似的地方，个人感觉是一部很值得看的剧。

不过话又说回来，剧里的故事都是别人的，还应该及时回到现实生活中，做好自己的主角，想清楚自己想要什么样的生活，或者是不要什么样的生活，踏踏实实往前走。。。

啊啊啊，请不要打翻这碗鸡汤，勿喷勿喷勿喷，跪谢！

还有，今天是母亲节，记得给自己母亲打个电话。。。来自

overflow 有以下四个属性（来自W3School）

overflow 属性 - 一只有梦想的前端小白

1、overflow:visible

代码如下：

DOCTYPE html>
html>
head>
meta charset="utf-8">
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
title>Examplestitle>
meta name="description" content="">
meta name="keywords" content="">
link href="" rel="stylesheet">
    style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: visible;
        }
    style>
head>
    body>
        div class="box">
            img src="img/flower.png"/>
        div>
    body>
html>

效果如下：

overflow 属性 - 一只有梦想的前端小白

overflow:visible 也是overflow 默认的属性值，如上图效果所示，超出父元素的部分会依旧显示出来，同时超出部分不会撑开父元素的高。

2、overflow:hidden

代码如下：

DOCTYPE html>
html>
head>
meta charset="utf-8">
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
title>Examplestitle>
meta name="description" content="">
meta name="keywords" content="">
link href="" rel="stylesheet">
    style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: hidden;
        }
    style>
head>
    body>
        div class="box">
            img src="img/flower.png"/>
        div>
    body>
html>

效果如下：

overflow 属性 - 一只有梦想的前端小白

如图所示，子元素会显示在父元素内，超出父元素的部分会被隐藏。同时，在上一次清除浮动问题中也讲到过，可以给父元素加overflow:hidden，来达到清除浮动的效果。

3、overflow:scroll

代码如下：

DOCTYPE html>
html>
head>
meta charset="utf-8">
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
title>Examplestitle>
meta name="description" content="">
meta name="keywords" content="">
link href="" rel="stylesheet">
    style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: scroll;
        }
    style>
head>
    body>
        div class="box">
            img src="img/flower.png"/>
        div>
    body>
html>

效果如下：

overflow 属性 - 一只有梦想的前端小白

如上图所示，此时设置的是overflow:scroll ,x和y方向都会产生滚动条，及时父元素的宽足够子元素的宽，也会产生滚动条，如果设置overflow-y: scroll;水平方向就不会产生滚动条，效果如下：

overflow 属性 - 一只有梦想的前端小白

4、overflow: auto

代码如下：

DOCTYPE html>
html>
head>
meta charset="utf-8">
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
title>Examplestitle>
meta name="description" content="">
meta name="keywords" content="">
link href="" rel="stylesheet">
    style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: auto;
        }
    style>
head>
    body>
        div class="box">
            img src="img/flower.png"/>
        div>
    body>
html>