写在前面的话：

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

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

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

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

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

还有，今天是母亲节，记得给自己母亲打个电话。。。来自<一只有梦想的前端小白>

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

1、overflow:visible

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<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: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>Examples</title>

<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:hidden，来达到清除浮动的效果。

3、overflow:scroll

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<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:scroll ,x和y方向都会产生滚动条，及时父元素的宽足够子元素的宽，也会产生滚动条，如果设置overflow-y: scroll;水平方向就不会产生滚动条，效果如下：

4、overflow: auto

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<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>

效果如下：

此时浏览器会根据父元素和子元素的宽和高，自动设置滚动条。

当然，以上overflow 的属性都是在父元素固定宽和高的基础上实现的效果。

希望以上的介绍对您能有所帮助，同时这也是我自己只是内化的过程，感谢博客园平台！----来自<一只有梦想的前端小白>

overflow 属性的更多相关文章

  1. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  2. overflow属性

    css属性overflow属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制. 参数是scroll时候,必会出现滚动条. 参数是auto时候,子 ...

  3. CSS overflow 属性

     值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...

  4. 转：CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  5. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  6. CSS3对于盒中容纳不下的内容的显示——overflow属性

    overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...

  7. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  8. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  9. div包裹页面后多余部分没有显示，也没滚动条 overflow 属性设置

    今天弄个div套着一个页面结果那个页面超出范围后页面没有滚动条可以滚动浏览下面的内容,原来是设置了overflow的hidden属性 visible 默认值.内容不会被修剪,会呈现在元素框之外. hi ...

  10. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

随机推荐

  1. Java中如何将String转成Date

    Java中如何将String转成Date 最近在开发Json数据反序列化为Java对象的时候发现spring mvc 和 Jackson 对Date类型对支持不是特别好,虽然在Java对象序列化为Js ...

  2. JS的toFixed方法设置小数点位数后再进行计算，数据出错问题

    这个应该算作失真,或者也不算.情况就是用了toFixed后再进行相关计算,得不到预期的结果 具体看例子 比如想动态计算百分比,保留一位小数如94.4%这样子 var blobTo = 409600; ...

  3. 提取KIndle中每本书的笔记并单独保存

    整体思路 目标:将Kindle中的每本书的笔记标注单独提取出保存为一个Markdown文件 其中检测KIndle是否已经正常插入的判断方法: 思路1:读取媒介挂载记录 思路2:直接判断挂载地址是否存在 ...

  4. MyEclipse中常用的快捷键大全，快来.....

    在这里分享点常用的快捷键,希望对你有帮助! Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/] ...

  5. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  6. The service cannot be activated because it does not support ASP.NET compatibility

    刚刚在ASP.NET创建一个Service,在运行时,它即显示异常: The service cannot be activated because it does not support ASP.N ...

  7. 使用MySQL Workbench导出MySQL数据库关系图

    1. 点击MySQL Workbench中间Data Modeling下的Create EER Model From Existing Database: 2. 在Stored Connection中 ...

  8. 【Java每日一题】20161101

    package Nov2016; import java.util.HashMap; import java.util.Map; public class Ques1101 { public stat ...

  9. FireMonkey 导出目前 Style 另存文件

    FireMonkey 能将目前使用的 Style 导出成文件,它提供二种文件格式,请看下列代码: *.style procedure TForm1.Button1Click(Sender: TObje ...

  10. expect笔记

    #!/usr/bin/expect -f set ip [lindex $argv 0]; set password [lindex $argv 1];  set timeout 1 spawn ss ...