详解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背景_动力节点Java学院整理
Jul 11 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
基于Html5实现的语音搜索功能
May 13 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
Terran剧情介绍
2020/03/14 星际争霸
77A一级收信机修理记
2021/03/02 无线电
php array_filter除去数组中的空字符元素
2020/06/21 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP加密解密类实例分析
2015/04/20 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Bootstrap按钮组实例详解
2017/07/03 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
元旦晚会策划方案
2014/02/18 职场文书
网管求职信
2014/03/03 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL