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

overflow 溢出部分显示效果

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

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

常见的溢出(overflow)的属性值:

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

(1)默认值 visible

(2)隐藏溢出部分

(3)无论内容是否超出,都显示滚动条

内容超出:

内容未超出:

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

(4)根据内容判断,是否显示滚动条

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

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

元素本身隐藏

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

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

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

HTML 复制代码
    <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>

占位置:

不占位置:

元素显示隐藏切换案例

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

HTML 复制代码
    <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>
相关推荐
淮北4946 小时前
html + css +js
开发语言·前端·javascript·css·html
3秒一个大10 小时前
掌握 Stylus:让 CSS 编写效率倍增的预处理器
css
inx17710 小时前
深入理解 CSS 弹性布局:从传统布局到 Flex 的优雅演进
css·flexbox
白兰地空瓶12 小时前
用 Stylus 写 CSS 有多爽?从响应式面板案例看透它的优雅
css·stylus
叫我詹躲躲13 小时前
CSS Flex 布局比 float 更值得学
css·flexbox
有点笨的蛋15 小时前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
San3019 小时前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
San3019 小时前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
Qinana19 小时前
🌟 从 CSS 到 Stylus:打造更优雅、高效的样式开发体验
前端·javascript·css
AAA阿giao19 小时前
弹性布局:CSS 布局的“变形金刚”来了!
前端·css