CSS3:overflow属性详解
1.Overflow
overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来;
如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto;
overflow:auto 属性如果超出就出现滚动条,没有超出则不出现滚动条这样就可以出现滚动条,
滚动条也可以单独设置,例如overflow-x:hidden;overflow-y:auto;这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候,两个属性都需设置属性值。
原始效果:
1.添加overflow:hidden;属性,效果:
可以看到,overflow:hidden会把超出盒子的部分隐藏,也可以理解为切断。
2.添加overflow-x:hidden;overflow-y:auto属性
属性设为overflow-x:auto;overflow-y:hidden;与上图效果正好相反,即滚动条侧边隐藏,会出现在底部。
2.overflow的常见属性值
Overflow属心常见的有四个:visible,hidden,auto和scroll;
visible为overflow 的默认值,为超出显示;
hidden为超出隐藏;
auto为自动,即超出会出现滚动条, 不超出就没有滚动条;
scroll为内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
3.overflow的神奇用法
第一种用法:解决margin-top的传递问题
margin-top的传递问题:子元素的margin-top会把父元素一起带下来,给父元素加overflow:hidden即可解决
第二种用法:清除浮动带来的影响 --- 父元素高度塌陷
万能清除法
overflow:hidden
clear:both
第三种用法:显隐动画 --- 超出隐藏
第四种用法:单行文本超出省略
.sl{white-space:nowrap;/*不换行*/overflow:hidden;/*超出隐藏*/text-overflow:ellipsis;/*超出省略*/width:;}
注意要设置宽度
好啦,以上就是小谭今天要分享的内容啦,如果有什么写的不好的地方欢迎各位大佬指点一二,小谭不胜荣幸!啾咪~
CSS3:overflow属性详解相关推荐
- overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性 原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...
- html中overflow是什么标签,CSS中Overflow的属性是什么?Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
- HTML+CSS教程(十)css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
- html元素的overflow属性详解
最近更新时间:2018年6月20日11:39:55 <我的博客地图> 最近接手一个老项目,该项目是用EasyReport这个Web报表工具在web页面动态展示数据库数据,在开发调试过程中遇 ...
- CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
- Overflow属性详解(转载)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
- CSS3新增属性详解
1.圆角 在 CSS2 中添加圆角棘手.我们不得不在每个角落使用不同的图像. 在 CSS3 中,很容易创建圆角. 在 CSS3 中 border-radius 属性被用于创建圆角: 如果你在 bord ...
- html transform属性,css3 transform属性详解
CSS3变形是一些效果的集合,比如平移translate() .旋转rotate().缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们 ...
- 【青山css】css3阴影效果属性详解及创意玩法
前言 css阴影效果是我们经常使用的一个css属性,但你有仔细了解过它吗?是不是用的时候直接从蓝湖上复制过来就行了,那你了解它的每个参数吗?用阴影又能实现哪些好看的效果呢?来看一看我收集总结的css阴 ...
最新文章
- 无需训练RNN或生成模型,我写了一个AI来讲故事
- 2021-04-21--中标麒麟-yum源修改
- phpstudy(小皮面板)Deepin安装脚本
- jquery中的ajax如何接收json串形式的接口
- rmi远程代码执行漏洞_fastjson远程代码执行漏洞复现
- 阿里云推PostgreSQL 10 高可用版
- 原型化系统---失物招领APP
- [UE4]OnComponentBeginOverlap.AddDynamic 的编译错误
- 没有它,我们寸步难行——LBS的渊源与实践
- Atitit session机制的实现 目录 1. Web状态管理 Cookie 和 Session。 token 	1 2. session 管理设计	1 2.1. session 的存储(可以
- 全国城市三级联动-java版
- 计算机机房综合布线方案,计算机网络设备施工方案(不含综合布线)(word版)
- 关于笔记本电脑网卡出问题的简单解决
- 树莓派连接USB摄像头问题
- stm32 IAP 程序编写心得
- 东西湖职业技术学校计算机,武汉东西湖职业技术学校中专
- 【翠花学Vue】每日打卡——vue打卡1
- ThreadPoolExecutor(三)——Worker
- 5分钟教你掌握异常检测方法
- 蓝桥杯算法训练-24点(Python)
热门文章
- 艾美捷藻红蛋白RPE化学性质文献参考
- lakeshore导出html,Lakeshore游戏创作工具新手图文使用教程
- 如何将外部字体引入微信小程序?
- APP测试心得和体会
- python制作生日礼物_Python全国少儿编程竞赛参赛作品《智能生日提示小助手》解析...
- Unity用户手册2019.3(中文版)1.3.2 资源包
- 假如生活欺骗了你!请问要多大的勇气去继续!
- 前端简介以及开发环境搭建
- undertale人物_Chara(游戏《Undertale》中的角色)_百度百科
- xshell6连接Linux跳出自定义颜表情