在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 。

一、display:none;   让元素直接从页面消失,不占用尺寸,会改变页面布局。

代码演示:

页面演示:在页面检查器中,显示body中没有元素内容。

将元素的display属性值设置为none,那么这个元素在页面中不会占据任何尺寸,就像元素完全不存在。 这个元素的所有后代元素也会一同消失。对display属性值设置为none的元素添加动画,过渡效果无效。

适用场景:留言板,评论区等 一开始需要隐藏,当用户做了某些操作后才显示。

二、opacity  透明度, 依然占用尺寸(隐藏后可以被选中)

opacity的数值范围是0-1, 若将属性值设置为0,表示完全透明,给用户的感觉是元素在页面中隐藏了。这意味着,opacity只能从视觉上隐藏元素,而元素本身依然占用尺寸并在网页布局起作用。

代码演示:

页面演示:页面检查器中可以看到,body中div依然存在,依然占用尺寸只是文字和背景色都变透明了。

对opacity属性值为0的元素添加过渡效果有效。

适用场景:添加过渡效果,在页面中能实现部分的用户交互效果,比如鼠标移入移出,提高用户体验。

三、visibility:hidden;  依然占用尺寸 (隐藏后不能被选中)

将元素的visibility属性值设置为hidden;将元素内容隐藏,跟opacity属性一样,被隐藏的元素尺寸依然会在页面布局起作用。

代码演示:

页面演示:检查器中可以看到,body中已经不能选中div了,但是div的尺寸依然占用。

如果想让这个元素的某个后代元素显示,只要将该后代元素的visibility属性值设置为visible即可 。给设置visibility属性值为hidden的元素添加过渡效果无效。

CSS中 隐藏元素的常用方法的更多相关文章

  1. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  2. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  3. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  4. 【Selenium】selenium中隐藏元素如何定位?

    前言 面试题:selenium 中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚 ...

  5. 关于面试总结10-selenium中隐藏元素如何定位?(hidden、display: none)

    前言 面试题:selenium中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚啥 ...

  6. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  7. 关于CSS中的元素定位

    ---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...

  8. CSS中设置元素的圆角矩形

    圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

  9. css中伪元素before或after中content的特殊用法attr【转】

    [原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...

随机推荐

  1. afert和b的伪类画三角形

    /* 提示信息 */ .content-tishi{ width: 6.93rem; margin: 0 auto; background: #e9eaea; display: flex; flex- ...

  2. 【Java8新特性】Stream API有哪些中间操作?看完你也可以吊打面试官!!

    写在前面 在上一篇<[Java8新特性]面试官问我:Java8中创建Stream流有哪几种方式?>中,一名读者去面试被面试官暴虐!归根结底,那哥儿们还是对Java8的新特性不是很了解呀!那 ...

  3. 项目工程化之git提交规范以及 CHANGELOG生成

    事先声明,本文是参考了其他大神的博客之后自己尝试的记录,具体可以参考如下 链接 先说说git 提交规范把,这里基本都是这个工具 cz-customizable 1,安装 npm install cz- ...

  4. Android_适配器(adapter)之BaseAdapter

    BaseAdapter是应用最多的一种适配了.它是一个抽象类,需要重写方法完成自定义适配器的功能,这就比较自由灵活,能实现各种想要的效果. 之前讲到的SimpleAdapter和ArrayAdapte ...

  5. Bank5

    Account: package banking5; //账户 public class Account { protected double balance; public Account(doub ...

  6. JBoss 5.x/6.x 反序列化漏洞(CVE-2017-12149)复现

    0x00 漏洞介绍 该漏洞为 Java反序列化错误类型,存在于 Jboss 的 HttpInvoker 组件中的 ReadOnlyAccessFilter 过滤器中.该过滤器在没有进行任何安全检查的情 ...

  7. python pexpect总结

    基本使用流程 pexpect 的使用说来说去,就是围绕3个关键命令做操作: 首先用 spawn 来执行一个程序 然后用 expect 来等待指定的关键字,这个关键字是被执行的程序打印到标准输出上面的 ...

  8. 跟着阿里学JavaDay04——Java基础语法(二)

    一.Java运算符 运算符的简介 所有的程序开发,都是对数字的进行处理.而对数字的处理,一定会存在所谓的操作模式,而这些操作模式就被称为运算符. 算术运算符 对于算术运算符,我们主要掌握++,--的运 ...

  9. 【Hadoop】hdfs,剖析文件上传

    文件上传原理图 剖析文件写入 1.客户端(client)通过对DistributedFileSystem对象调用create()来新建文件: FSDataOutputStream outputStre ...

  10. 撸一个简单的vue-router来剖析原理

    理解 随着前端业务的发展, 我们一般在写一个较为大型的vue项目时候,会使用到vue-router,来根据指定的url或者hash来进行内容的分发,可以达到不像服务端发送请求,就完成页面内容的切换,能 ...