CSS属性display和visibility 区别

最新推荐文章于 2024-08-24 13:47:49 发布
最新推荐文章于 2024-08-24 13:47:49 发布
阅读量367 收藏 10
点赞数 9
分类专栏： 前端程序员 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57540655/article/details/136768849
版权
本文讨论了在网页开发中，使用`visibility:hidden`和`display:none`隐藏元素的区别。`display:none`不仅隐藏元素，还移除其物理空间，避免了不必要的资源消耗，推荐使用。
摘要由CSDN通过智能技术生成

visibility隐藏对象保留占据的物理空间；

但是一般是不赞成使用 visibility:hidden，建议使用display:none，因为当浏览器渲染被占据的物理空间时，会消耗资源。

效果

display方式触发时，会移除DIV2

image1

image2

visibility方式触发时，仅会隐藏DIV3

image3

image4

代码

DOM demo
Kafka面试题
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS元素的显示与可见性（详解Display和Visibility的用法）
百赢出品，必属精品
05-03 2915
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
CSS Display与Visibility区别和用法
m0_54889555的博客
03-07 1404
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆，visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。 一、Display的属性值 block：表现为一个块级元素（一般情况下独占一行） 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独
CSS属性 display和visibility的区别
a_strong_pig的博客
12-07 145
CSSdisplay和visibility的区别
css display和visibility区别
朝花夕拾的博客
12-24 423
display 两个属性 block 显示 none 隐藏 visibility 两个属性 visible 显示 hidden隐藏 visibility 占用空间 display 不占用空间
HTML-CSS：display 和 visibility 的区别
ppxin的专栏
06-10 1249
一、两者的区别 使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率...
详解css3中display和visibility的区别
aibai666的博客
12-15 1115
在css3中，display和visibility都具备对元素进行隐藏和显示的功能。 display语法 display:none | block /*none表示隐藏 block表示显示*/ visibility语法 visibility:hidden | visible /*hidden表示隐藏 visible表示显示*/ 其中要区分两者的区别很简单，尝试将两者直接翻译过来，display就是显示，而visibility就是可视性的意思 再看看两者在实际的代码效果中的表现 原图:
CSS中display和visibility隐藏区别
weixin_46505015的博客
04-07 215
在我们开发中，经常需要对一些元素进行隐藏，在css中提供了2种隐藏属性供开发者使用，分别是display和visibility 现在简单回顾一下 display属性： inline （默认值） 显示为内联元素 none 此元素会被隐藏 block 显示为块级元素 inline-block 显示为行内块元素 visibility属性： visible （默认值）元素是可见的 hidden 此...
CSS 中的 display 和 visibility
【实力派，无需多言！】
09-06 1008
CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。
CSS属性visibility和display之间的区别
邃思园
08-26 320
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例： f...
CSS属性中Display与Visibility区别分析
12-13
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示（仅）隐藏，不可恢复。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了， 1、仍然...
css中display和visibility的用法和区别介绍
12-11
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
CSS Display与Visibility的不同
09-27
在CSS布局中，`display`和`visibility`是两个非常重要的属性，它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见，但它们的机制和影响是不同的。 首先，`visibility`属性主要用于决定元素...
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 242
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
CSS中的元素布局与定位详细说明
最新发布
weixin_43354152的博客
08-24 600
在CSS开发中，很重要的一个工作就是根据UI设计稿，进行元素的布局与定位，使得元素（比如某一段文本、按钮、图片等）显示在页面正确的位置。本文就元素的布局与定位方面，做一些讲解和说明。
CSS有趣知识
weixin_42376775的博客
08-20 258
5.分开写：border-top-ldft-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。2.如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角、右下角、左下角。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。3.如果是个矩形，设置为高度的一半就可以做。
PHP 实战：动态更改 CSS 值
Rverdoser的博客
08-21 319
这段代码演示了如何在PHP中动态设置CSS变量的值，并在HTML文档中使用这些变量。它使用CSS自定义属性（也称为CSS变量），然后通过。选择器在文档的任何地方使用它们。这样做可以让你在不修改CSS文件的情况下，根据用户的不同或其他上下文来改变样式。
小兔鲜首页制作css
qq_65046523的博客
08-21 395
项目名-客户端xtx-pc1.images：存放固定使用的图片，例如：logo、样式修饰图2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片3.iconfont:字体图标素材4.css文件：4.1base.css：基础的公共样式4.2common.css：各个网页相同模块的重复样式，例如头部、底部4.3index.css：首页css样式5.index.html：首页html文件。
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 353
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
css中的visibility和display
04-06
visibility和display是CSS中的两个属性，用于控制元素的可见性和显示方式。 visibility属性用于控制元素是否隐藏，取值有visible、hidden、collapse，分别代表可见、隐藏、折叠。visible表示元素可见，hidden表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值