详解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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 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 Google的translate API代码
2008/12/10 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
python检查URL是否正常访问的小技巧
2017/02/25 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
求职自荐书范文
2013/12/04 职场文书
追悼会上的答谢词
2014/01/10 职场文书
管理专员自荐信
2014/01/26 职场文书
七一慰问简报
2015/07/20 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS