css中overflow的那些坑
来源:互联网 发布:美工摄影师招聘 编辑:程序博客网 时间:2024/06/06 02:01
元素的overflow属性是用来规定当内容溢出元素框时发生的事情,设置单个方向的overflow-x和overflow-y同理,它有五个值,visible(默认),hidden,scroll,auto,inherit,现在我们先来简单说下这几个属性值:
visible:默认值,它会把内容完全展现出来,即使内容超出已定义的父元素大小,它还是会超出部分按正常显示,但是也不会影响其他元素的布局。
hidden:当内容超过父元素大小,内容会被修剪,其余部分不可见。
scroll:当内容超过父元素大小,内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:根据元素内容是否超出来自动控制,当内容超过父元素大小,则如果内容被修剪,浏览器会显示滚动条以便查看其余的内容,不超出则正常显示。
inherit:从父元素继承该属性的值。
每个属性值效果如下:
这里我们重点说hidden和scroll属性值。
overflow:hidden
此属性值我们用来最多的就是清除浮动,即消除浮动带来的影响==》父元素的高度坍塌,它的原理是父元素设置了overflow:hidden后会给此元素加上BFC超级属性,它会先去计算包括浮动元素的高度,然后才比较高度去进行修剪。
overflow:scroll
此属性值默认是在垂直方向进行滚动,但是我们经常需要垂直高度固定,仅在水平方向出现滚动条,这时我们需要:
<ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul>
ul{ margin: 100px auto; width:400px; height: 60px; padding:10px; overflow-x:scroll; /* 或者overflow-x: auto; */ overflow-y: hidden; white-space: nowrap; } li{ list-style-type: none; width:80px; height: 30px; line-height: 30px; background:#ccc; margin-left:4px; display: inline-block; }
实现效果:
这里我们主要注意white-space: nowrap;一定要写上overflow-x可以auto或者scroll,父元素需要定宽。
以上就是对overflow属性的一些总结,主要是解决仅出现横向滚动条问题这一坑。
阅读全文
0 0
- css中overflow的那些坑
- CSS中overflow的用法
- overflow的那些事儿
- CSS中text-overflow的运用
- CSS中overflow的含义与属性
- css中overflow和position的搭配
- Css中overflow属性的认识
- Css中overflow属性的认识
- CSS中 overflow:hidden 的作用
- CSS中 overflow:hidden 的作用
- CSS中overflow属性
- CSS-overflow的含义
- css的overflow属性
- CSS中overflow属性介绍
- CSS中overflow属性介绍
- css中position:relative和overflow:hidden的问题
- css中position:relative和overflow:hidden的问题
- 论css中如何挣脱overflow:hidden;的限制
- 将.sql文件导入powerdesigner的实现方法详解
- Activemq Queue与Topoic并存 的解决办法
- Fox And Two Dots
- Linux下JDK中文乱码解决
- Python 实现控制一阶惯性系统
- css中overflow的那些坑
- 大写转换(SQL优化)
- JAVA接口和JAVA抽象类的区别
- win10 wamp 打开报错0xc0000142
- 项目总结及坑点
- Mysql5.7.14-linux版密码忘记解决办法
- php实现短链接系统
- Error:java.lang.NullPointerException: null value in entry: destinationDir=null
- 整数快速幂