overflow 属性

时间：2022-09-18 17:02:38

写在前面的话：

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

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

如图所示，子元素会显示在父元素内，超出父元素的部分会被隐藏。同时，在上一次清除浮动问题中也讲到过，可以给父元素加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 属性

如上图所示，此时设置的是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>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 的属性都是在父元素固定宽和高的基础上实现的效果。

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

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. 字体图标&comma;盒子显隐&comma;overflow属性&comma;伪类设计边框&comma;盒子阴影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. Android下安装应用不成功解决

    在手机上安装应用程序不成功,可以尝试把手机连接电脑,然后使用adb进行安装,adb安装命令: adb install Android_65632.apk 当出现: success!就表示成功,但当不成 ...

  2. ubuntu下安装 infer

    sudo apt-get updatesudo apt-get upgradesudo apt-get install git openjdk-7-jdk m4 zlib1g-dev python-s ...

  3. JS思维之路菜鸟也能有大能量&lpar;2&rpar;--模拟数组合并concat

    我们有两个这样的数组 var arr1 = [1,2,3]; var arr2 = [4,5,6]; 任务:合并成这样,请至少提供两种思路. var arr1 = [1,2,3,4,5,6]; 思路一 ...

  4. 如何检查失败的Segment&sol;master

    在启用Mirror情况下,可能出现Segment失败时,系统不会中断服务,而且没有明确提示.检查系统状态的一种方法就是使用gpstate命令.该命令会列出GPDB系统中每个独立组件(Primary I ...

  5. return 还是 不return

    jQuery.fn.functiona = function() { //return this.each(function() { **** } jQuery(this).css('backgrou ...

  6. linux服务之upstart与systemd

    http://blog.fens.me/linux-upstart/ rpm -ql initscripts|more [root@84-monitor init]# rpm -qf /etc/ini ...

  7. 【转】【iOS】导航栏那些事儿

    原文网址:http://www.jianshu.com/p/f797793d683f 参考文章 navigationItem UINavigationItem UINavigationBar UIBa ...

  8. 快速上手微信小程序-快递100

    2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模 ...

  9. 解决Mybatis连接Sql server 出现 Cannot load JDBC driver class &&num;39&semi;com&period;mysql&period;jdbc&period;Driver &&num;39&semi;的问题

    tomcat启动的时候没有错误,但是进行数据库操作就会有错误. 在网上找了很久  好不容易找到解决方法 转自 http://blog.csdn.net/ro_bot/article/details/5 ...

  10. LogicalDOC office预览中文乱码的问题

    近期在试用LogicalDOC,一个文档管理系统. 上传的office文件预览中文乱码 问题原因是LibreOffice缺少对应的中文字体导致,只需要把对应的中文字体拷贝到/opt/libreoffi ...

相关文章