一、相同点

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. ApplicationListener接口，在spring容器初始化后执行的方法

    一.如果我们希望在Spring容器将所有的Bean都初始化完成之后,做一些操作,那么就可以使用ApplicationListener接口,实现ApplicationListener接口中的onAppl ...

  2. yum安装时提示“尚未安装任何 GPG 公钥，请下载您希望安装的软件签名公钥并安装”

    在Linux操作系统中,安装软件依赖包时,出现了尚未安装任何 GPG 公钥,要求使用rpm --import public.gpg.key导入  问题: [root@server7 yum.repos ...

  3. 好用的Java工具类库，GitHub星标10k+你在用吗？

    简介 Hutool是Hu + tool的自造词,前者致敬我的"前任公司",后者为工具之意,谐音"糊涂",寓意追求"万事都作糊涂观,无所谓失,无所谓得& ...

  4. Optim High Performance Unload [HPU]

    目录 一.简介 二.安装 三.基本配置 四.卸数 4.1. 命令行导出 4.2. 控制文件 4.2.1. 从表空间容器卸数 4.2.2. 从备份镜像中卸数 4.2.3. 控制文件语法参考 4.3. 存 ...

  5. ORA-19504: failed to create file "/u01/backup/db_0_20190603_1" ORA-27038: created file already exists

    1.问题:在用rman进行0级备份时,报错: ORA-19504: failed to create file "/u01/backup/db_0_20190603_1"ORA-2 ...

  6. 春风十里不如你，全新Windows UI 3(WinUI 3) 的第一个实现Project Reunion 0.5

    什么是WinUI Windows UI库 (WinUI) 是适用于 Windows 桌面应用程序和 UWP 应用程序的本机用户体验 (UX) 框架. WinUI is a user interface ...

  7. .Net RabbitMQ实战指南——服务日志

    RabbitMQ的日出输入方式有很多种:file.console .syslog .exchange. 在RabbitMQ中,日志级别有none(0).critical(4).error(8).war ...

  8. html的题库（含答案）

    该题库仅供巩固自身HTML知识 Tip:<为< 单选题 1．下面标记中,用来显示段落的标记是(  D  ). A.<h1> B.<br /> C.<img / ...

  9. chrome 屏蔽广告的利器

    Adblock Plus https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb ...

  10. 剑指offer 37-42

    37. 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 思路: 1.平衡二叉树的定义为,当为空树或左右子树高度小于等于1,同时左右子树都要为平衡二叉树. 2.先分别求出左右子树的高度,比较高度差,如果 ...