1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute

display

display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。

不过请注意,通过DOM依然可以访问到这个元。因此你可以通过DOM来操作它。就跟其他未被隐藏的元素一样,例如$(“”)等

position

有些时候,我们可能会遇到这样一种情况,我们希望某个元素能够不影响我们的页面布局,但是我们又想与之交互这种情况下opacity 和 visibility会 影响布局, display 不影响布局但又无法直接交互,所以以上这三种都不能满足这种需求,这时候我们就可以使用Position这个属性将元素移出可视区域,这样既不会影响布局,又能让元素可以操作。(就像又建了一层图层)不过我们要避免使用这个方法去隐藏任何可以获得焦点的元素,因为如果那么做,当用户让那个元素获得焦点时,会导致一个不可预料的焦点切换问题。这个方法在创建自定义复选框和单选按钮时经常被使用。

opacity:0

opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互

visibility

第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏。

注意,如果一个元素的visibility被设置为hidden,同时想要显示它的某个子孙元素,只要将那个元素的visibility显式设置为visible即可。visibility与display:none不同的地方还在于被设置visibility:hidden的元素的子孙元素若是被设置成visibility: visible;的话,那么该元素就是可见的,但是display:none则不同,即使它的子孙元素被设置成display:block,该子孙元素也是不可见的。

总结:

1、diaplay:none  真正意义上的隐藏,页面源码都不显示隐藏的页面源码,隐藏的元素不占用任何空间,元素的盒空间都不生成,好像元素就不存在,但是可以通过DOM操作访问到,如$(" ")

2、position:absolute 为了不影响页面布局又想与之交互,opacity 和 visibility会 影响布局, display 不影响布局但又无法直接交互 position属性将元素移出原来的页面显示(像是页面上的又一层)并可以与之交互,如填表单之类的可以使用

3、opacity:0 opacity属性时设置元素的透明度,会影响页面布局 但只是不可见 元素位置显示一块空白,会影响页面交互操作

4、visibility:hidden  也只是显示不可见,元素位置处显示一块空白,会影响布局,不过不会影响交互操作。

												

CSS隐藏元素的五种方法的更多相关文章

  1. css隐藏元素的几种方法与区别

    css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...

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

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

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

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

  4. CSS“隐藏”元素的几种方法的对比

    本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...

  5. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

  6. 顽石系列:CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

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

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

  8. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  9. CSS隐藏元素的几个方法(display,visibility)的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间,无法点击 */ } ...

随机推荐

  1. java循环示例

    用while循环计算100之内的奇数和偶数和 public class Test{ public static void main(String[] args){ int sum=0; int num ...

  2. Go 1.14 中 Cleanup 方法简介

    目录 一般的测试 使用 defer 清除依赖 使用 Cleanup 关于t.Parallel 总结 原文:What's New In Go 1.14: Test Cleanup 单元测试通常遵循某些步 ...

  3. Shiro -- (一)简介

    简介: Apache Shiro 是一个强大易用的 Java 安全框架,提供了认证.授权.加密和会话管理等功能,对于任何一个应用程序,Shiro 都可以提供全面的安全管理服务.并且相对于其他安全框架, ...

  4. float布局打破标准流,神助攻clear清浮动

    布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...

  5. 链接github

    引用https://www.cnblogs.com/u-1596086/p/11588957.html 第一步:登录git创建项目 右上角头像按钮,点击your repositories 接着绿色按钮 ...

  6. 【HDU - 1029】Ignatius and the Princess IV (水题)

    Ignatius and the Princess IV  先搬中文 Descriptions:   给你n个数字,你需要找出出现至少(n+1)/2次的数字 现在需要你找出这个数字是多少? Input ...

  7. python——面向对象(4),单继承

    """class 类名(object<父类>)继承:子类继承父类.单继承:""" class A(object): " ...

  8. ssh远程连接到Ubuntu

    1.ubuntu首先得安装ssh sudo apt-get install openssh-server 2.启动ssh sudo /etc/init.d/ssh start 3.检查是否开启 ps ...

  9. 查看deepin操作系统版本命令

    cat   /proc/version cat /etc/debian_version cat  /etc/os-release lsb_release -a uname -a uname -r sc ...

  10. SpringBoot整合NoSql--(四)Session共享

    简介: 正常情况下,HttpSession是通过Servlet 容器创建并进行管理的,创建成功之后都是保存在内存中.如果开发者需要对项目进行横向扩展搭建集群,那么可以利用一些硬件或者软件工具来做负载均 ...