CSS基础——css 元素溢出

教育网编2023-04-17 09:222430
1. 什么是 css 元素溢出

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

overflow的设置项:

  1. visible 默认值, 显示子标签溢出部分。
  2. hidden 隐藏子标签溢出部分。
  3. auto 如果子标签溢出,则可以滚动查看其余的内容。
2. 示例代码
<style>
    .Box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父级上设置子元素溢出的部分如何显示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .Box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box1">
    <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box2">hello</div>
</div>
3. 小结
  • overflow样式属性是设置子标签溢出的显示方式
  • 常用使用overflow:hidden;来解决元素溢出

原文地址:https://cloud.tencent.com/developer/article/2053145

总结

以上是真正的电脑专家为你收集整理的CSS基础——css 元素溢出的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得真正的电脑专家网站内容还不错,欢迎将真正的电脑专家推荐给好友。

评论区