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 ...
随机推荐
- JVM系列【4】内存模型
JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 硬件层数据一致性 - 存储器层次结构 从L6-L0 空间由大变小,速度由慢 ...
- 关于 ECMAScript、JavaScript、ES6、ECMAScript 2015
ECMAScript 是一种规范,而 JavaScript 是对规范的实现.ECMA 是标准化组织. 最早的 JavaScript 是由 Netscape 公司开发的,并提交给 ECMA 标准化组织, ...
- 使用appium后安卓手机无法调出键盘解决方法
问题:用appium进行真机调试后,使用手机的app进行输入时无法调出键盘. 原因:appium调试时,将手机输入法设置成了Unicode IME 解决方法: 方法一,手机设置里修改输入法: 不同的手 ...
- day57 Pyhton 前端Jquery09
内容回顾: - 筛选选择器 $('li:eq(1)') 查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find() 查找后代的元素 - ...
- 【暑假集训】HZOI2019 Luogu P1006 传纸条 二三四维解法
写三次丢失两次,我谔谔,以后再不在博客园先保存我就去死 题目内容 洛谷链接 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学被安排坐成一个\(m\)行.\(n\ ...
- centos8使用timedatectl管理时间
一,centos8中默认使用chronyd来做时间服务 1,查看chronyd服务的状态 [root@blog ~]# systemctl status chronyd ● chronyd.servi ...
- 因果推理综述——《A Survey on Causal Inference》一文的总结和梳理
因果推理 本文档是对<A Survey on Causal Inference>一文的总结和梳理. 论文地址 简介 关联与因果 先有的鸡,还是先有的蛋?这里研究的是因果关系,因果关系与普通 ...
- mysql You can't specify target table 'sys_right_menu' for update in FROM clause (不能从Objor子句中指定目标表“SysRyType菜单)
错误语句: DELETE from sys_right_menu where right_id in (SELECT m.right_id from sys_right_menu mLEFT JO ...
- IDEA 中项目代码修改后不自动生效,需要执行 mvn clean install 才生效
问题描述 之前项目运行好好的,代码修改完之后会自动编译,编程体验很好. 有一天发现每次修改代码后需要重新使用mvn clean install命令重新编译,异常麻烦. 检查了 IDEA 的配置,已经配 ...
- Pyqy5 让窗口居中
# QDesktopWidget import sys from PyQt5.QtWidgets import QDesktopWidget,QMainWindow,QApplication from ...