一、相同点

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. 一篇文章带你搞懂 etcd 3.5 的核心特性

    作者 唐聪,腾讯云资深工程师,极客时间专栏<etcd实战课>作者,etcd活跃贡献者,主要负责腾讯云大规模k8s/etcd平台.有状态服务容器化.在离线混部等产品研发设计工作. etcd ...

  2. 【MySQL】常用的命令

    连接数据库 mysql -u root -pmysql -u root -h 192.168.16.140 -p 创建数据库 create database dbstudents; 查看所有数据库 s ...

  3. 【NX二次开发】NX对象类型及基本操作

    说明:NX中的所有对象都是通过唯一的tag_t值进行标识的,这些对象大致可以分为部件对象.UF对象.表达式.链表对象和属性对象等. 部件对象的操作: 基本操作函数: 1. UF_PART_new()  ...

  4. spring boot使用@Async异步注解

    1.java的大部分接口的方法都是串行执行的,但是有些业务场景是不需要同步返回结果的,可以把结果直接返回,具体业务异步执行,也有些业务接口是需要并行获取数据,最后把数据聚合在统一返回给前端. 通常我们 ...

  5. js 统计图插件chart.js

    chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src=" ...

  6. 【题解】coin HDU2884 多重背包

    题目 Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. Go语言中的有缓冲channel和无缓冲channel区别

    Go语言中的有缓冲channel和无缓冲channel区别 结论 ch1:=make(chan int)// 无缓冲 ch2:=make(chan int,1)// 有缓冲 无缓冲: 当向ch1中存值 ...

  8. Golang中GBK和UTF8编码格式互转

    Golang中GBK和UTF8编码格式互转 需求 已知byte数组的编码格式转换 实现代码 package utils import ( "bytes" "golang. ...

  9. 乘风破浪，Windows11官方原装4K壁纸，前卫的艺术数字设计

    Windows11预览版官方壁纸 默认主题Windows Windows.zip 月轮主题ThemeA ThemeA.zip 艺术石主题ThemeB ThemeB.zip 日升主题ThemeC The ...

  10. Centos 6.5 GitLab安装配置搭建详细过程

    GitLab搭建详细过程   一.前提 系统:Centos 6.5 软件版本:gitlab-7.8.4 Selinux:关闭 防火墙规则:先清空(搭建好了后续自己添加相关放行规则) 二.yum源配置和 ...