前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS基础——css 元素溢出

CSS基础——css 元素溢出

原创
作者头像
落雨
发布2022-07-20 19:23:42
2.5K0
发布2022-07-20 19:23:42
举报
文章被收录于专栏:落雨的专栏

1. 什么是 css 元素溢出

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

overflow的设置项:

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

2. 示例代码

代码语言:javascript
复制
<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>

3. 小结

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 什么是 css 元素溢出
  • 2. 示例代码
  • 3. 小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档