CSS的overflow属性

最新推荐文章于 2024-04-21 22:40:04 发布
最新推荐文章于 2024-04-21 22:40:04 发布
阅读量198 收藏 1
点赞数
分类专栏： html+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq2071114140/article/details/90470104
版权

CSS的overflow属性

这个属性用来设置子元素溢出时，怎样处理

取值

visible 超出父元素的部分，仍然显示

...
/*父元素*/
.block1{
    width: 100px;
    height: 100px;
    background-color: skyblue;
}
/*子元素*/
.block2{
    width: 50px;
    height: 200px;  /*溢出*/
    background-color: greenyellow;
}
...
<body>
    <div class="block1">
        <div class="block2"></div>
    </div>
</body>

 

hidden 超出父元素的部分，不显示

将CSS代码的block1类（父元素）中的属性进行修改。

.block1{
    width: 100px;
    height: 100px;
    background-color: skyblue;
    overflow: hidden;
}

 

scroll （不论是否溢出）&#x

最低0.47元/天 解锁文章
丨Q ，Q丨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析css中的overflow属性
m0_68845148的博客
11-10 5611
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
CSS系列之详解overflow
老__L的博客
02-01 8821
本文主要介绍CSS的overflow、overflow-x、overflow-y属性。详解overflow
overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
最新发布
u013179804的博客
04-21 1280
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。
CSS overflow 属性(琐碎知识点整理)
黑木令之佛性
07-04 1万+
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端CSS 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。 好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 一. 定义和用法: 1. overflow 属性规定当内容溢出元素框时发生的事情 。 2. 这个属性定义溢出元素内容区的内容会如何处理 。 如果值为
CSS3：overflow属性详解
热门推荐
小谭鸡米花的博客
10-30 2万+
1.Overflow overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来； 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto； overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条， 滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候，两个属性都需设置属性值。
CSS 浅探flex布局中使用的overflow ，及width/height=0
japlus的博客
11-27 9071
w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........
css使用overflow属性控制滚动条的样式
09-22
CSS中的`overflow`属性是用来控制元素内容在超出其指定宽度和高度时的显示方式。它提供了几个关键的值，使得开发者能够对滚动条的显示与否以及何时显示进行精确的控制。接下来，我们将深入探讨`overflow`属性的不同...
标签增加CSS的overflow属性来清除浮动
01-19
方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。 ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; background-...
详解CSS3：overflow属性
01-18
overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来； 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto； overflow：auto 属性如果超出就出现...
css中text-overflow属性与文本截断详解
09-27
主要给大家介绍了关于css中text-overflow属性与文本截断的相关资料，文中给出了详细的示例代码供大家参考学习，希望本文的内容对各位前端开发者们能带一定的帮助，需要的朋友们下面跟着小编一起来学习学习吧。
使用CSS的overflow属性防止float撑开div的方法
09-24
我们在使用float设定浮动元素的时候经常会遇到撑破div的情况,其中一种解决方法即是利用overflow: hidden,这里我们就来看一下使用CSS的overflow属性防止float撑开div的方法:
css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题
树上骑个猴的博客
04-06 8262
overflow:hidden 的主要功能有三个 隐藏溢出 清除浮动 解除坍塌 举例理解 1.初始html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C
CSS属性overflow详解（auto hidden）
qq_44537625的博客
09-02 6163
overflow用在什么地方 overflow 属性规定当内容溢出元素框时发生的事情。 overflow有哪些属性值？ 1. visible 默认值。内容不会被修剪，会呈现在元素框之外。 2. hidden 内容会被修剪，并且其余内容是不可见的。 3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 ...
CSS中的 overflow 属性
CyberPlayer的博客
02-13 1974
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible- 默认。溢出没有被剪裁。内容在元素框外渲染 hidden- 溢出被剪裁，其余内容将不可见 scroll- 溢出被剪裁，同时添加滚动条以查看其余内容 auto- 与scroll类似，但仅在必要时添加滚动条 注意：overflow 属性仅适用于具有指定高度的块元素。 ...
css overflow使用总结
lsjweiyi的博客
04-22 1296
overflow是个很强大的样式，在非常多的场合需要用到它，比如区域滚动。下面一一列举下使用。 不使用overflow 我给父元素设置了固定的高度，然后添加过多的文字， <view style="height: 100px; background-color: red"> <view style="word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测
再了解CSS中的overflow以及应用场景
在读研究生，专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
09-27 1万+
创作不易 拒绝白嫖 点个赞呗 关注专栏 学透CSS,带你走进CSS的深处！！！ 前言 网页的设置在很多时候并不是正好满足一页，拿我们经常用的掘金来说，因为使用了数据的分页加载，如果你想看更多的文章的话，需要不停的往下滑动，在浏览器的右边会一直存在着一个滚动条，这就是这篇文章想要了解的元素。在网页中当一页无法容纳所有的数据的时候，我们经常使用overflow来进行设定。 overflow overflow 是overflow-x 和overflow-y的简写，用来设定当一块级元素（通常设置了height/.
CSS overflow属性
qq_45560350的博客
06-08 487
定义 overflow属性规定当内容溢出元素框时该如何处理。 属性可能的取值 值 描述 visible 默认值 内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容不可见 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 inherit 规定应该从父元素继承overflow属性的值 1.overflow:visible(默认值) <style> di
html标签overflow属性和javascript实现div标签滚动问题
sujudz的专栏
09-23 6975
昨天一个朋友说他实现了一个div循环滚动显示的demo，但是弄到jsp中就不滚动了，而且debug测试div的scrollTop值一直为0。 拿到他的jsp文件看，javascript代码没有什么问题，问题就是出在html标签overflow属性上，一般，设置滚动显示的div都会设置这个值，如果没有设置这个属性，javascript的循环滚动显示代码就没有效果，而且输出scrollTop值也一直
overflow 属性
aaaa630395249的博客
05-08 151
写在前面的话： 2016年5月4日青年节，作为一名正青春的学生党，开始了博客生涯，励志做个勤奋上进的好青年。幻想着毕业后月薪W+ 、走上人生巅峰的职场生活...... 然而 然而 然而 ，自制力有限的我昨天还是没有控制住，追起了《欢乐颂》，啊啊啊啊啊，一看就是一整天啊，简直是大写的颓废！！！ 哈哈，我相信很多人也在追这部剧，在这部剧里，每个人应该都能够找到自己喜欢的角色，也应该能够...
css的overflow属性
04-01
CSS的overflow属性用于控制元素内容溢出时的处理方式。它可以设置为以下几个值： 1. visible：默认值，内容溢出时不会被裁剪，而是显示在元素外部。 2. hidden：将溢出的内容裁剪，不显示在元素外部。 3. scroll...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值