写在前面的话：

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. bootstrap-table 分页的问题

    文档网站 http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#via-javascript-table 问题1 :服务器端取不到f ...

  2. MYSQL的深入学习--优化步骤

    MySql优化的一般步骤 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息 一般情况下,我们只需要了解以”Com”开头的指令 show ...

  3. c#Dictionary键值对的使用

    直接粘代码吧 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  4. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  5. Maven使用详解

    Maven使用详解 世间万物相生相克,今年本来的目标是主要研究asp.net mvc以及windows平台相关的DI, ORM框架,突然有一天想研究一个Java EE里面相应的框架都是怎么玩的,于是研 ...

  6. .net using使用小结

    在.net中using使用方法有3种,分别是using指令.using定义使用范围.using别名. using指令,即引用命名空间. using System; using System.Colle ...

  7. 基于HTML5的WebGL呈现A星算法3D可视化

    http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现 ...

  8. spring 数据校验之Hibernate validation

    1.需要的jar包 2.springsevlet-config.xml配置 在spring3之后,任何支持JSR303的validator(如Hibernate Validator)都可以通过简单配置 ...

  9. OGNL和ValueStack

    OGNL简介 OGNL的全称是Object Graph Navigation Language,即对象导航图语言.它是一个开源项目,工作在视图层,其通过简单一致的表达式语言来读取合适者Java对象的属 ...

  10. 在WCF数据访问中使用缓存提高Winform字段中文显示速度

    在我们开发基于WCF访问方式的Winform程序的时候,一般情况下需要对界面显示的字段进行中文显示的解析.如果是硬编码进行中文显示,那么除了不方便调整及代码臃肿外,性能上没有什么问题,但是不建议这样处 ...