EasyClick Html UI 第十二节CSS 元素溢出

EasyClick Html UI 第十二节CSS 元素溢出

CSS 元素溢出是什么

当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来完成。

overflow的设置项:

  1. visible 默认值, 显示子标签溢出部分。
  2. hidden 隐藏子标签溢出部分。
  3. auto 如果子标签溢出,则可以滚动查看其余的内容。

示例


<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父级上设置子元素溢出的部分如何显示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<div class="box1">
    <div class="box2">hello</div>
</div>

总结

  • overflow样式属性是设置子标签溢出的显示方式
  • 常用使用overflow:hidden;来解决元素溢出

交流QQ群:620028786,647082990,772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明:本文所有的教程仅限交流学习使用不得用于违法用途,造成的法律后果本人不承担责任。

上一篇:Android GreenDao 使用全面讲解,字节跳动面试


下一篇:操作手册——Nacos切换配置中心的存储数据库