css中overflow的那些坑

元素的overflow属性是用来规定当内容溢出元素框时发生的事情,设置单个方向的overflow-x和overflow-y同理,它有五个值,visible(默认),hidden,scroll,auto,inherit,现在我们先来简单说下这几个属性值:
visible:默认值,它会把内容完全展现出来,即使内容超出已定义的父元素大小,它还是会超出部分按正常显示,但是也不会影响其他元素的布局。
hidden:当内容超过父元素大小,内容会被修剪,其余部分不可见。
scroll:当内容超过父元素大小,内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:根据元素内容是否超出来自动控制,当内容超过父元素大小,则如果内容被修剪,浏览器会显示滚动条以便查看其余的内容,不超出则正常显示。
inherit:从父元素继承该属性的值。
每个属性值效果如下:
这里写图片描述
这里写图片描述
这里我们重点说hiddenscroll属性值。

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属性的一些总结,主要是解决仅出现横向滚动条问题这一坑。

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值