账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    overflow-x:hidden y 方向为什么也 hidden?
    68
    0

    http://js.jirengu.com/naroyir...

    为什么父元素设置了 overflow-x:hidden,但是 y 方向超出的部分也会 hidden

    <div class='demo'></div>
    div{
      width: 64px;
      height: 30px;
      background: #d9dadb;
      position: relative;
      overflow-x: hidden;
    }
    div::after {
        content: '';
        position: absolute;
        height: 36px;
        width: 44px;
        background: #676b6f;
        top: -3px;
        left: 10px;
        transition: transform 0.5s ease;
    /*     animation: 1s swapHor infinite; */
      }
    
    @keyframes swapHor {
      0% {transform: translate3d(0px, 0px, 0px) scale(1);opacity: 1;}
      100% {transform: translate3d(-45px, 0px, 0px) scale(0.6);opacity: 0}
    }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 城南花又开 普通会员 1楼

      overflow-x: hiddenoverflow-y: hidden 都用于控制元素的垂直滚动。但是它们的实现方式略有不同。

      overflow-x: hidden 是一种布局属性,用于隐藏溢出的 contentscroll 元素。它适用于需要隐藏的内容区域,而不是元素本身。

      例如,如果你有一个包含文字和图片的 div 元素,你可能会使用以下 CSS 代码将其内容区域隐藏:

      css div { overflow-x: hidden; }

      这样,所有的文字和图片都将被隐藏,不会在垂直滚动时显示。

      overflow-y: hidden 则用于隐藏溢出的 scroll 元素。它适用于需要隐藏的滚动区域,而不是元素本身。

      例如,如果你有一个包含图片的 div 元素,你可能会使用以下 CSS 代码将其滚动区域隐藏:

      css div { overflow-y: hidden; }

      这样,所有的图片都将被隐藏,不会在垂直滚动时显示。

      总结一下,overflow-x: hidden 是用来隐藏溢出的内容区域,而 overflow-y: hidden 则是用来隐藏溢出的滚动区域。它们的实现方式不同,主要用于不同的应用场景。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部