一、相同点

disable：none和visibility：hidden都能把网页上的某元素隐藏起来

二、不同点

display：none--不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。

visibility：hidden--使对象在页面上不可见，但页面上的空间还在。

三、举例

<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>visibility：hidden和display：none的区别</title>
</head>
<body>
<div style="display: none; width: 10px;" >display</div> <a>1</a>
<div style="visibility: hidden;width: 10px;">visibility</div> <a>2</a><br />
<a>3</a>
</body>
</html>

四、效果

visibility：hidden和display：none的区别的更多相关文章

  1. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  2. visibility:hidden和display:none的区别

    大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...

  3. visibility: hidden 和 display: none的区别

    相同点: 两者都可以将dom元素隐藏 不同点: 1.display: none 隐藏之后不占用文档流,而visibility: hidden却会占用文档流,如果要在隐藏元素的同时获取其尺寸信息,那就可 ...

  4. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  5. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  6. 再谈visibility:hidden和display:none

    之前写过一篇有关visibility:hidden和display:none的文章:为什么要用用visibility:hidden;代替display:none;?主要是从浏览器性能方面入手,却没写两 ...

  7. 为什么要用visibility:hidden;代替display:none;？

    为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器: css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如backgro ...

  8. What is the difference between visibility:hidden and display:none?

    What is the difference between visibility:hidden and display:none? 答案1 display:none means that the t ...

  9. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  10. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

随机推荐

  1. thymeleaf模板引擎基础知识

    一.表达式 分为四类: 1.变量表达式 ${} :获取容器上下文变量的值. 举例: 获取application域中的username: ${application.username} 获取sessio ...

  2. SpringCloud Alibaba实战（5：子模块基本业务开发）

    源码地址:https://gitee.com/fighter3/eshop-project.git 持续更新中-- 在上一节里,我们搭建了一个微服务项目的整体架构,并进行了版本控制. 接下来我们进一步 ...

  3. WPF 后台代码做 TranslateTransform 的动画

    本文告诉大家,在后台代码,对 TranslateTransform 做动画的方法 今天小伙伴问我一个问题,说为什么相同的代码,如果设置到按钮上,是可以让按钮的某个属性变更,但是如果设置给 Transl ...

  4. 终于放弃了单调的swagger-ui了，选择了这款神器—knife4j

    knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案(在非Java项目中也提供了前端UI的增强解决方案),前身是swagger-bootstrap-ui,取名knife ...

  5. docker 自定义部署Springboot——依赖与代码分离部署

    第一步:执行mvn package 命令打出jar包,然后解压jar包,把lib放到服务器合适的目录下面 第二步:打出不带jar包的SpringBoot工程 首先配置pom.xml文件 <bui ...

  6. vs里颜色显示块怎样显示

    就是这种 vs中选择工具-扩展和更新,搜索Web Essentials,安装就好了. 他会安装很多扩展,我这里只需要css相关的

  7. oscp-缓冲区溢出(持续更新)

    环境准备 Windows7虚拟机(我选了IE8,其实也没什么关系) 微软官方下载地址 These virtual machines expire after 90 days. We recommend ...

  8. Redis高并发快的3大原因详解

    1. Redis的高并发和快速的原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接 ...

  9. Docker与k8s的恩怨情仇（四）-云原生时代的闭源落幕

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在本系列前几篇文章中,我们介绍了从Cloud Foundry到Docker等PaaS平台的发展迭代过程.今天 ...

  10. 非静态的字段、方法或属性“System.Web.UI.Page.ClientScript.get”要求对象引用

    解决Response.Write("<script>alert('修改失败,请稍后再试!');</script>");布局错误的问题 在后台CS代码(不是C ...