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属性详解的更多相关文章
- CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- css动画-animation各个属性详解(转)
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- border-sizing属性详解和应用
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...
- 第94天:CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- css 11-CSS3属性详解(一)
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- android:exported 属性详解
属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...
- OutputCache属性详解(一)一Duration、VaryByParam
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
随机推荐
- Flink实例(五十): Operators(十)多流转换算子(五)coGroup 与union
参考链接:https://mp.weixin.qq.com/s/BOCFavYgvNPSXSRpBMQzBw 需求场景分析 需求场景 需求诱诱诱来了...数据产品妹妹想要统计单个短视频粒度的「点赞,播 ...
- MySQL 之 innodb 日志管理 -- 1. 基本日志文件
1.基本日志文件分类 错误日志(error log) 慢查询日志日志(slow query log) 二进制日志(binlog) 查询日志(general log) 2.错误日志 主要包括mysql的 ...
- ubuntu20 使用命令安装 mongodb
安装 mongodb sudo apt-get install mongodb -y mongodb 服务管理 # 启动 mongodb 服务 service mongodb start # 关闭 m ...
- 发布MeteoInfo 1.2.8
增加了对SYNOP数据的支持(功能从C#版移植过来).数据可以从这里下载:http://weather.cod.edu/digatmos/syn/SYNOP数据搞气象的人应该多少知道些,类似MICAP ...
- day37 Pyhton 网络编程04
# tcp协议和udp协议的选择问题 # tcp # 大量的连续的数据 传递文件\发送邮件 # 文件的传递 # 下载电影 # udp # 短消息类 社交软件 # qq 微信 # 在线播放视频 快会丢帧 ...
- GA001-181-21
Composite State with History The Composite State with History Pattern describes an entity (e.g. Cl ...
- virtualbox 网络地址转换(NAT)
网络地址转换 虚拟机可以访问主机 通过主机请求外网 但是主机不能请求虚拟机 所以要配置端口转发才行 host-only模式下 不同网段的不同虚拟机也可以互相ping通 比如 192.168.33.1 ...
- 爬虫学习之-scrapy交互式命令 scrapy查看页面
scrapy shell https:///www.baidu.com 会启动爬虫请求网页 view(response) 会在浏览器打开请求到的临时文件 response.xpath("/ ...
- Geoserver发布shp文件
Geoserver是著名的开源GIS软件之一.也是项目中常用的地图服务软件.基于geoserver和Openlayers就可以构建一个免费的开源GIS项目. Geoserver除了浏览以外,其他譬如发 ...
- <bdi> 标签
bdi 指的是 bidi 隔离. <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置. 在发布用户评论或其他您无法完全控制的内容时,该标签很有用. 实例 把用户名从周围的文 ...