likes
comments
collection
share

overflow 溢出部分显示效果及元素本身隐藏

作者站长头像
站长
· 阅读数 33

overflow 溢出部分显示效果

溢出 部分是指盒子的 内容 超出盒子范围的区域

显示、隐藏、滚动条等都可以控制内容溢出部分的显示效果

常见的溢出（overflow）的属性值：

  • visible ：溢出部分可见，默认值
  • hidden ：溢出部分隐藏
  • scroll ：无论内容部分是否溢出，都显示滚动条
  • auto ：根据内容部分是否溢出，自动显示或隐藏滚动条

（1）默认值 visible

overflow 溢出部分显示效果及元素本身隐藏

（2）隐藏溢出部分

overflow 溢出部分显示效果及元素本身隐藏

（3）无论内容是否超出，都显示滚动条

内容超出：

overflow 溢出部分显示效果及元素本身隐藏

内容未超出：

    <style>
      div {
        overflow: scroll;
        width: 200px;
        height: 200px;
        background-color: rgb(51, 242, 30);
      }
    </style>

overflow 溢出部分显示效果及元素本身隐藏

（4）根据内容判断，是否显示滚动条

    <style>
      div {
        overflow: auto;
        width: 120px;
        height: 120px;
        background-color: rgb(51, 242, 30);
      }
    </style>

  <body>
    <div>盒子的内容部分盒子的内容部分盒子的内容部分盒子的内容部分盒子的内容部分盒子的内容部分</div>
  </body>

元素本身隐藏

实现某 元素本身 在屏幕中不可见，如鼠标经过后元素隐藏

常见属性有 visibility:hidden 和 display:none，两者区别在于，前者是 隐藏元素本身 ，并且在网页中 占位置 ；后者也是 隐藏元素本身 ，但在页面中 不占位置

开发中常用到的切换元素显示和隐藏的属性是 display ，none 隐藏，block 显示

    <style>
      div {
        width: 120px;
        height: 120px;
      }
      .one {
        background-color: lightblue;
      }
      .two {
        background-color: rgb(51, 242, 30);
      }
    </style>
  
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>

overflow 溢出部分显示效果及元素本身隐藏

占位置：

overflow 溢出部分显示效果及元素本身隐藏

不占位置：

overflow 溢出部分显示效果及元素本身隐藏

元素显示隐藏切换案例

默认子元素隐藏，当鼠标移入父元素后让子元素显示：

    <style>
      .one {
        width: 120px;
        height: 120px;
        background-color: lightblue;
      }
      .two {
        display: none;
        width: 60px;
        height: 60px;
        background-color: rgb(51, 242, 30);
      }
      .one:hover .two{
        display: block;
      }
    </style>

  <body>
    <div class="one">
      <div class="two"></div>
    </div>
  </body>

overflow 溢出部分显示效果及元素本身隐藏

转载自:https://juejin.cn/post/7357990322062311450
评论
请登录