详解CSS3:overflow属性


Posted in HTML / CSS onNovember 17, 2020

1.Overflow

overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来;

如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto;

overflow:auto 属性如果超出就出现滚动条,没有超出则不出现滚动条这样就可以出现滚动条,

滚动条也可以单独设置,例如overflow-x:hidden;overflow-y:auto;这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候,两个属性都需设置属性值。

原始效果:

详解CSS3:overflow属性

添加overflow:hidden;属性,效果:

详解CSS3:overflow属性

可以看到,overflow:hidden会把超出盒子的部分隐藏,也可以理解为切断。

2.添加overflow-x:hidden;overflow-y:auto属性

详解CSS3:overflow属性

属性设为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 overflow属性的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 #HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 #HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 #HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 #HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 #HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 #HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 #HTML / CSS
You might like
php中的实现trim函数代码
2007/03/19 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
使用python+whoosh实现全文检索
2019/12/09 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
如何用python 操作zookeeper
2020/12/28 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
环保建议书作文
2014/03/12 职场文书
物流专业求职信
2014/06/30 职场文书
机关保密工作承诺书
2015/05/04 职场文书
贷款工资证明范本
2015/06/12 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
小学新课改心得体会
2016/01/22 职场文书