display和visibility的区别

最新推荐文章于 2024-08-26 22:59:32 发布
最新推荐文章于 2024-08-26 22:59:32 发布
阅读量664 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zvivs/article/details/44706663
版权

前段时间，面试的时候遇到这个问题：display和visibility的区别

之前一直有使用display:none来隐藏元素，却没对比过他们的区别，回去后自己写了下html对比一下，效果如下



display:none



在看看

visibility:hidden


效果出来了，visibility:hidden虽然隐藏了元素，但是还是会占据这一空间，而display则不会占据这一空间

zvivs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS Display与Visibility区别和用法
m0_54889555的博客
03-07 1404
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆，visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。 一、Display的属性值 block：表现为一个块级元素（一般情况下独占一行） 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独
display和visibility的区别示例介绍
11-30
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
visibility vs display
StudyWorks的专栏
04-19 268
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置，而且width和height属性不为空       display设为"none"后width和height属性为空。         可以通过 设置 visibility为"hidden", 并且设置position为absolute， 让他不占据原来的位置并且...
区分visibility VS display
Sean的专栏
05-04 384
 visibility：内容的现实与否display： none 隐藏元素
visibility与display的区别：
jinlovo
01-08 5890
visibility与display之设置元素显隐的区别 在CSS里的visibility 属性，通常其值被设置成visible 或hidden。 visibility：hidden 相当于display：none，能把元素隐藏起来，但是两者的区别在于： display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在...
css display和visibility区别
朝花夕拾的博客
12-24 423
display 两个属性 block 显示 none 隐藏 visibility 两个属性 visible 显示 hidden隐藏 visibility 占用空间 display 不占用空间
display和visibility隐藏的区别
weixin_44874595的博客
08-12 358
一、display：none隐藏 用display：hidden隐藏的时候，会对元素的原先所占的空间也进行隐藏，即当它隐藏时，它不再占有原来的空间。 二、visibility：hidden隐藏 用visibility：hidden隐藏的时候，元素原来所占据的空间依然占据。 ...
display、visibility和opactity的区别
CamilleZJ的博客
07-01 647
1、display：none； DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。 2.、visibility：hidden； DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上
CSS属性display和visibility 区别
Hynson的学习笔记
02-22 2394
说明w3school 中设置display元素如何被显示，visibility设置元素是否可见。display 和visibility 都是用于设置或检索是否显示对象， 最大区别： display隐藏对象不保留物理空间； visibility隐藏对象保留占据的物理空间； 但是一般是不赞成使用 visibility:hidden，建议使用display:none，因为当浏览器渲染被占据的物理空
css中display和visibility的用法和区别介绍
12-11
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
2301_78945238的博客
08-23 398
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
【HTML】模拟消息折叠效果【附源代码】
Young_Pro的博客
08-26 902
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 1020
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
html快速入门
m0_52049533的博客
08-22 474
/
响应式Web设计:纯HTML和CSS的实现技巧
m0_66995023的博客
08-20 788
使用百分比单位 (%) 或者相对单位 (em, rem) 定义宽度和高度，使元素能够根据容器大小自动调整。使用相对单位 (em 或 rem) 来设置字体大小，以便它们可以根据父元素或根元素的字体大小自动缩放。通过调整字体大小、颜色和间距来创建清晰的视觉层次，帮助用户更容易地导航和理解页面内容。从最基本的功能开始构建网站，然后逐渐添加更复杂的功能，确保所有用户都能访问基本内容。（1）使用不同的设备和浏览器进行测试，确保网站在各种环境下都能良好工作。（2）利用浏览器的开发者工具来模拟不同的屏幕尺寸和设备。
java一键生成数据库说明文档html格式
最新发布
无极低码
08-26 237
要验收项目了，要写数据库文档，一大堆表太费劲了，直接生成一个吧，本来想用个别人的轮子，网上看了几个，感觉效果不怎么好，自己动手写一个吧。抽空再把字典表补充进去就OK了先看效果：目录快速导航生成效果。
wxml与标准的html的异同？
weixin_56187723的博客
08-23 309
WXML（WeiXin Markup Language）与标准的HTML（HyperText Markup Language）在构建前端界面时，既有相似之处，也存在显著的差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值