display:none和overflow：hidden的区别

最新推荐文章于 2023-09-27 16:04:01 发布

坤坤多吃点儿。

最新推荐文章于 2023-09-27 16:04:01 发布

阅读量748

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.youkuaiyun.com/m0_51614469/article/details/120144910

版权

html 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS中`display:none`和`overflow:hidden`两种隐藏内容的方法。`display:none`会完全隐藏元素及其内容，而`overflow:hidden`仅隐藏超出容器的内容，保持元素占据空间。此外，浮动后的内联元素可以设置宽高，这在布局中十分关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display:none和overflow:hidden的区别

display:none:是将整个容器隐藏不可见，无论是否有溢出
overflow：hidden:是将溢出部分隐藏不显示，没有溢出部分正常显示

注：当给内联元素设置float属性后，就隐形的转换为了块元素，可以设置宽高及任意margin，padding值；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

坤坤多吃点儿。

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

7.22知识点总结：white-space，overflow，min-height，max-height，伪类对象选择器，display：none；和visibility：none；的区别

m0_60175058的博客

07-22

650

1.white-space:nowrap;文本强制在一行上显示 white-space:nowrap; white-space:pre;保留空白区域 white-space:pre; white-space:pre-line;合并空白符,保留换行 white-space:pre-line; white-space:pre-wrap;保留空白符,正常换行 white-space:pre-wrap; 2. overflow:visible; 默认 overflo...

display:none无transition动画过渡；height:auto的transition动画;

热门推荐

u010267996的博客

03-14

1万+

想实现类似bootstrap中collapse的功能。设置过渡动画的时候发现下面两个问题。一、使用display:none和display:block是不会有transition动画效果的。目前display属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)。而display是一个尴尬的属性，该计算什么值实现？

参与评论您还未登录，请先登录后发表或查看评论

display:none,overflow:hidden,visibility:hidden之间的区别

weixin_30782293的博客

10-06

274

一，display:none; 隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）二，overflow:hidden; 让超出的元素隐藏，就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉我们都知道每个浏览器对代码的解析都不同，所以我们在做页面的时候会遇到很多bug，在IE里面如果内容的高度超过了该层的高度他会自动地撑开，但火狐等里面的高度是多高这层就只有这...

overflow：hidden与display：none的区别

weixin_45904557的博客

03-16

2277

1、Display:none 隐藏但是在原来的标准流不占位置，使用此属性之后元素不存在了，元素占据的位置也不存在。 2、Overflow:hidden 对行内元素无效，必须是块级元素，并且设置宽度高度。 Overflow:hidden,隐藏之后元素依然占据着位置。视觉上消失了，可以理解为透明度为0的效果，在文档流中占位， display:none和visible:hidden 相同点：都能把网页上某个元素隐藏起来。二、diaplay：none与visibility：hidd

display:none 和 overflow: hidden；的隐藏区别

呵呵的牛

05-11

817

display:none;隐藏但是在原来的标准流不占位置； <style> div { display: none; height: 200px; width: 200px; background: red; overflow: hidden; } </style> </head&...

css中元素的显示与隐藏，display、visibility与overflow的区别

qq_43667537的博客

11-05

378

元素的显示与隐藏 1、display 注意display元素不是删除元素，只是隐藏了。

display, visibility, overflow 三者的作用与区别

qq_41988669的博客

06-11

605

css 元素的隐藏与显示

iframe { display: block; border: none; margin: 0; padding: 0; overflow: hidden; }没有用

06-06

overflow: hidden; }` 却没有起到作用，可能有以下几种原因： 1. 样式被其它样式覆盖：如果在其他 CSS 样式中对 iframe 元素进行了样式设置，可能会导致这个样式被覆盖。可以尝试在这个样式之后再添加 `!important...

揭示CSS隐藏元素奥秘：display:none与visibility:hidden差异

本文将详细介绍几种常见的元素隐藏技巧：`display:none`、`visibility:hidden`，以及它们与`position`属性的结合使用，同时还会探讨`opacity`和`filter`用于透明度控制的情况。 1. **display:none**: `display:...

怎么把!important加在iframe { display: block; border: none; margin: 0; padding: 0; overflow: hidden; }上面

06-06

这样就可以确保 `overflow: hidden` 这个属性优先级最高，即使有其他样式存在也不会被覆盖。需要注意的是，`!important` 标记会覆盖所有其他的样式设置，因此应该尽量避免过多地使用它，以免影响样式的可维护性和...

display:none,overflow:hidden,visibility:hidden之间的不同点

fxs12138的博客

08-04

288

CSS元素隐藏、display:none和visibility:hidden、height:0和overflow:hidden的组合

yCharlee的博客

09-17

1787

http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/ 哎呦不错哦张哥家的偷来的，哈哈～，给个传送门

HTML+CSS3（五）——CSS基础

C-A-L-D

08-23

939

目录： HTML+CSS3（一）——认识浏览器 HTML+CSS3（二）——HTML 初识 HTML+CSS3（三）——HTML基本标签 HTML+CSS3（四）——表单pattern正则属性 HTML+CSS3（五）——CSS基础 HTML+CSS3（六）——行内元素和块级元素 HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇） HTML+CSS3（八...

关于display：none的恢复问题或取消display：none属性

liangshiyun1的博客

07-23

1万+

关于display：none的恢复问题或取消display：none属性；通过display属性来设置元素的不显示及其恢复。

CSS隐藏属性display:none；visibility:hidden；overflow:hidden

Jorpeng的博客

10-28

4496

前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）

【不一样的CSS】深入理解 overflow (溢出要学会处理)

一碗周

12-21

3826

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) overflow 的基本属性概述 overflow 属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个

CSS 中的 overflow 属性解析。

whiteFJ的博客

05-18

640

一个礼拜没写博客了，今天给博客拔草。说说CSS 中的 overflow 属性，overflow，我第一次使用是用于滚动展览借个图：hidden属性：常用于滚动栏,设置几张图片左向浮动，当超过画布大小就是不可见，然后点击按钮后移动图片位置，达到滚动效果。scroll属性：虽然被修剪了，但是会用滚动条方式来将遮挡内容展现给用户，无论是否需要，都会提供滚动机制。auto属性：如果...

元素隐藏之display:none、visibility:hidden、opacity:0、overflow:hidden区别