当前位置：首页 > 科技 > 软件

Display和Visibility的区别，你了解了吗？

来源：责编：时间：2023-11-28 09:36:38 162观看

导读采用CSS实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当元素样式设置为display：none时，则该元素和它

采用CSS实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。

元素样式设置为display:none

当元素样式设置为display：none时，则该元素和它的子元素都会隐藏，不占据文档流（就是元素原本占据的空间会释放出来）。

给元素样式设置display:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>

样式设置为

.a,.b,.c{  width:50px;  height:50px;  text-align:center;  background:blue;  margin-top:5px;  line-height:50px;  color:red;}

效果如：

图片

添加display:none后效果如下：

图片

B原本占据的空间会释放出来。

display的其他常见属性值及说明

属性值	说明
block	元素转化为块级元素显示
inline	元素转化为行内元素显示
inline-block	自身元素转化为行内元素，相邻的行内元素显示在一行，但其子元素为块级元素显示

元素样式设置为：visibility:hidden

visibility:hidden也可以将元素隐藏，但是依然显示着元素所占据的空间。如：

给元素样式设置visibility:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>

css样式：

.a,.b,.c{  width:50px;  height:50px;  text-align:center;  background:blue;  margin-top:5px;  line-height:50px;  color:red;}.b{  visibility:hidden;}

效果如下：

图片

visibility的其他属性值：

属性值	说明
inherit	继承父元素的visibility属性设置
visible	默认值

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-34660-0.htmlDisplay和Visibility的区别，你了解了吗？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：实现Eureka服务注册和服务发现，你学会了吗？

下一篇： Prometheus 的查询语言 PromQL 详解

标签：

热门焦点

天猫精灵Sound Pro体验：智能音箱没有音质？来听听我的

这几年除了手机作为智能生活终端最主要的核心之外，第二个可以成为中心点的产品是什么？——是智能音箱。手机在执行命令的时候有两种操作方式，手和智能语音助手，而智能音箱只
帅气纯真少年！日本最帅初中生选美冠军出炉

日本第一帅哥初一生选美大赛冠军现已正式出炉，冠军是来自千叶县的宗田悠良。日本一直热衷于各种选美大赛，从“最美JK”起到“最美女星&r
分布式系统中的CAP理论，面试必问，你理解了嘛？

对于刚刚接触分布式系统的小伙伴们来说，一提起分布式系统，就感觉高大上，深不可测。而且看了很多书和视频还是一脸懵逼。这篇文章主要使用大白话的方式，带你理解一下分布式系统
JavaScript学习 -AES加密算法

引言在当今数字化时代，前端应用程序扮演着重要角色，用户的敏感数据经常在前端进行加密和解密操作。然而，这样的操作在网络传输和存储中可能会受到恶意攻击的威胁。为了确保数据
.NET 程序的 GDI 句柄泄露的再反思

一、背景1. 讲故事上个月我写过一篇如何洞察 C# 程序的 GDI 句柄泄露文章，当时用的是 GDIView + WinDbg 把问题搞定，前者用来定位泄露资源，后者用来定位泄露代码，后面有朋友反
虚拟键盘 API 的妙用

你是否在遇到过这样的问题：移动设备上有一个固定元素，当激活虚拟键盘时，该元素被隐藏在了键盘下方？多年来，这一直是 Web 上的默认行为，在本文中，我们将探讨这个问题、为什么会发生
拼多多APP上线本地生活入口，群雄逐鹿万亿市场

Tech星球（微信ID：tech618）文 | 陈桥辉 Tech星球独家获悉，拼多多在其APP内上线了“本地生活”入口，位置较深，位于首页的“充值中心”内，目前主要售卖美食相关的
支持aptX Lossless无损传输 iQOO TWS 1赛道版发布限时优惠价369元

2023年7月4日，“无损音质，声动人心”iQOO TWS 1正式发布，支持aptX Lossless无损传输，限时优惠价369元。iQOO TWS 1耳机率先支持端到端aptX Lossless无
微软发布Windows 11新版引入全新任务栏状态

近日，微软发布了Windows 11新版，而Build 22563更新主要引入了几周前曝光的平板模式任务栏等，系统更流畅了。更新中，Windows 11加入了专门针对平板优化的任务栏