CSS中 隐藏元素的常用方法
在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中 隐藏元素的常用方法的更多相关文章
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
- 【Selenium】selenium中隐藏元素如何定位?
前言 面试题:selenium 中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚 ...
- 关于面试总结10-selenium中隐藏元素如何定位?(hidden、display: none)
前言 面试题:selenium中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚啥 ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- 关于CSS中的元素定位
---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...
- CSS中设置元素的圆角矩形
圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
- css中伪元素before或after中content的特殊用法attr【转】
[原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...
随机推荐
- afert和b的伪类画三角形
/* 提示信息 */ .content-tishi{ width: 6.93rem; margin: 0 auto; background: #e9eaea; display: flex; flex- ...
- 【Java8新特性】Stream API有哪些中间操作?看完你也可以吊打面试官!!
写在前面 在上一篇<[Java8新特性]面试官问我:Java8中创建Stream流有哪几种方式?>中,一名读者去面试被面试官暴虐!归根结底,那哥儿们还是对Java8的新特性不是很了解呀!那 ...
- 项目工程化之git提交规范以及 CHANGELOG生成
事先声明,本文是参考了其他大神的博客之后自己尝试的记录,具体可以参考如下 链接 先说说git 提交规范把,这里基本都是这个工具 cz-customizable 1,安装 npm install cz- ...
- Android_适配器(adapter)之BaseAdapter
BaseAdapter是应用最多的一种适配了.它是一个抽象类,需要重写方法完成自定义适配器的功能,这就比较自由灵活,能实现各种想要的效果. 之前讲到的SimpleAdapter和ArrayAdapte ...
- Bank5
Account: package banking5; //账户 public class Account { protected double balance; public Account(doub ...
- JBoss 5.x/6.x 反序列化漏洞(CVE-2017-12149)复现
0x00 漏洞介绍 该漏洞为 Java反序列化错误类型,存在于 Jboss 的 HttpInvoker 组件中的 ReadOnlyAccessFilter 过滤器中.该过滤器在没有进行任何安全检查的情 ...
- python pexpect总结
基本使用流程 pexpect 的使用说来说去,就是围绕3个关键命令做操作: 首先用 spawn 来执行一个程序 然后用 expect 来等待指定的关键字,这个关键字是被执行的程序打印到标准输出上面的 ...
- 跟着阿里学JavaDay04——Java基础语法(二)
一.Java运算符 运算符的简介 所有的程序开发,都是对数字的进行处理.而对数字的处理,一定会存在所谓的操作模式,而这些操作模式就被称为运算符. 算术运算符 对于算术运算符,我们主要掌握++,--的运 ...
- 【Hadoop】hdfs,剖析文件上传
文件上传原理图 剖析文件写入 1.客户端(client)通过对DistributedFileSystem对象调用create()来新建文件: FSDataOutputStream outputStre ...
- 撸一个简单的vue-router来剖析原理
理解 随着前端业务的发展, 我们一般在写一个较为大型的vue项目时候,会使用到vue-router,来根据指定的url或者hash来进行内容的分发,可以达到不像服务端发送请求,就完成页面内容的切换,能 ...