1. <body>
  2. <div>display：元素的位置不被占用</div>
  3. <div id="div1" style="display:block;">DIV 1</div>
  4. <div id="div2" style="display:none;">DIV 2</div>
  5. <hr>
  6. <div>visibility：元素的位置仍被占用</div>
  7. <div id="div3" style="visibility:visible;">DIV 3</div>
  8. <div id="div4" style="visibility:hidden;">DIV 4</div>
  9. </body>

总结

display元素位置不被占用(不管是否被隐藏)

visibility元素位置被占用(不管是否被隐藏)

  1. 原文网址：https://blog.csdn.net/qq_35792598/article/details/76572595

html隐藏元素的更多相关文章

  1. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  2. jq.validate隐藏元素忽略验证

    jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...

  3. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  4. CSS隐藏元素的几种方法

    使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...

  5. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  6. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  7. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题

    此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了: [display: none]:隐藏元素及元素内的所有内容,并且该元素的位置.宽高等其他属性值一并“消失”: [visibility: hid ...

  8. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别

    此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...

  9. HTML&CSS基础学习笔记1.25-input标签隐藏元素

    隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". ...

  10. [jQuery]无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案

    在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...

随机推荐

  1. java并发：Condition的应用

    Condition类可以使线程等待,也可以唤醒线程.Condition类的await方法和Object类的wait方法等效Condition类的signal方法和Object类的notify方法等效C ...

  2. html图片链接不显示图片

    html图片链接不显示图片,如下示: <a href="index.jsp"><img src="/img/index.png"/>&l ...

  3. oracle在centos6.5安装

    说明 很多操作是默认,具体定制另说. 安装 参考http://www.linuxidc.com/Linux/2014-02/97374p4.htm 这篇是上面那篇的整合版:http://www.cnb ...

  4. 【校招面试 之 C/C++】第12题 C++ 重载、重写和重定义

    1.成员函数重载特征:   a.相同的范围(在同一个类中): b.函数名字相同: c.参数不同(参数个数不同或者参数类型不同,但是返回值不同不能使重载): d.virtual关键字可有可无. 2.重写 ...

  5. yii的layouts的使用

    yii的layouts的使用 我们在控制器中使用render()时,yii会默认的载入布局. 1.在protected/componets下的Controller.php中修改$layout变量, 来 ...

  6. MySql中循环的使用

    一.while循环 语法:WHILE [条件] DO [逻辑] END WHILE; delimiter $$ DROP FUNCTION IF EXISTS `fn_findCharCount` $ ...

  7. 相机拍摄时最重要的三个参数——光圈、快门、ISO

    注:这篇文章我四年前发布在其他地方,现在移过来. 如果你对相机只有很少了解,那么看这篇文章再好不过啦,我结合很多资料,力图用最通俗易懂的方式进行讲解. 相机拍摄时最重要的3个参数就是——光圈.快门.I ...

  8. linux 下安装gult

    本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...

  9. java读取配置文件的方法

    1. Preferences类 这个主要是设置个人喜好.它的数据一般存在系统目录或是用户目录.还可以操作注册表. 2. Properties类 保存键值对.可以指定路径. 3. commons con ...

  10. 22条常用JavaScript开发小技巧

    1.使用var声明变量 如果给一个没有声明的变量赋值,默认会作为一个全局变量(即使在函数内赋值).要尽量避免不必要的全局变量. 2.行尾使用分号 虽然JavaScript允许省略行尾的分号,但是有时不 ...