overflow 属性
写在前面的话:
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 的属性都是在父元素固定宽和高的基础上实现的效果。
希望以上的介绍对您能有所帮助,同时这也是我自己只是内化的过程,感谢博客园平台!----来自<一只有梦想的前端小白>
转载于:https://www.cnblogs.com/Lily-nercel/p/5471067.html
overflow 属性相关推荐
- Flutter开发之Text的overflow属性不生效(14)
我在使用 Text 控件时,由于文字太多,需要省略显示.设置 overflow: TextOverflow.ellipsis 没有效果,尾部显示还多了黄色相间的胶带色块.应该是:提示Text的布局边界 ...
- CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
- CSS display overflow 属性 cursor光标类型
display属性 功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
- CSS的overflow属性:显示 隐藏 滚动显示 自动显示 继承
overflow 属性规定当内容溢出元素框时发生的事情
- java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动 昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
- CSS中的overflow属性
overflow属性 如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条,是否隐藏溢出部分等行为,规定当内容溢出元素框时发生的事情. 可能的值有: visible ...
- html dom透明度,HTML DOM Style overflow 属性
Style overflow 属性 Style 对象 定义和用法 overflow 属性设置或返回如何处理呈现在元素框外面的内容. 语法 设置 overflow 属性: Object.style.ov ...
- Overflow属性详解(转载)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
- 前端:CSS/12/display属性,overflow属性,cursor光标类型,CSS定位,综合案例:今日闪价
display属性 功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...
- CSS 处理溢出 overflow属性
在CSS中,如果设置了一个盒子的宽度与高度,则盒子中的内容就可能超过盒子本身的宽度或高度.此时,可以使用 overflow 属性来控制内容溢出时的处理方式. overflow属性的可选值有 visib ...
最新文章
- mysql两种索引结构_19.Mysql索引结构及常见索引的区别
- 网易云以场景化云服务力拓教育行业
- Elasticsearch基础(五)搜索匹配
- [20150705]从AWR抽取有问题的sql语句.txt
- VMware 14 版本激活许可证
- java 104规约_IEC104规约,Java开发主站程序
- Lagrange’s Mean Value Theorem - 拉格朗日中值定理
- Android Studio适配Mac M1
- matlab对数据的量化分析方法,金融量化分析数据传输方法与流程
- DS18B20的CRC验证算法
- Mac安装gensim报错:No extention 巴拉巴拉
- python任务栏通知区域_PyQT实现通知区域图标和对话气泡
- PDF编辑方法,怎么把PDF其中一页删除
- 《数据结构与算法基础 严蔚敏版》第三章 堆栈与队列
- 友盟统计,h5 API
- Fiddler工具使用与配置 【实例整理】
- 内置函数、自定义函数
- Java获取IP地址的多种方法
- SQL server 开启触发器和禁用触发器
- 加速度传感器的安装夹具介绍