详解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 相关文章推荐
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
Html5调用企业微信的实现
Apr 16 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
桌面中心(四)数据显示
2006/10/09 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
主管会计岗位责任制
2014/02/10 职场文书
单位员工收入证明样本
2014/10/09 职场文书
安全保证书
2015/01/16 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
甲午风云观后感
2015/06/02 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技