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,在 ...
随机推荐
- 对于近似有序序列(即除掉少数K个元素后是有序序列且K<<n),试分析直接插入排序,冒牌排序和简单选择排序的时间复杂度
学弟问的一道数据结构的题,关于一些排序算法的时间复杂度. 针对近似有序序列, ①当使用直接插入排序时,其基本操作为数组中元素的移动.最好情况下,待排序列有序,无需移动,此时时间复杂度为O(n), 当为 ...
- MySQL常见6个考题在实际工作中的运用
题目一 MyISAM和InnoDB的区别,什么时候选择MyISAM 参考回答 InnoDB是目前MySQL主流版本(5.6.5.7.8.0)默认的存储引擎,支持事务.外键.行级锁,对于并发条件下要求数 ...
- 使用records库操作SQL并且查询MySQL数据库
获取数据库 db = records.Database('mysql://root:xxxx@47.106.151.165/web_table?charset=utf8')注释:xxxx为数据密码 执 ...
- Java——MVC模式
MVC:Model View Controller 一般用于动态程序设计,实现了业务逻辑和表示层分离 Model:掌控数据源-->程序员编写程序或者实现算法,数据库人员进行数据库操作等:响应用户 ...
- Python操作Word与Excel并打包
安装模块 # Word操作库 pip install docx # Excel操作库 pip install openpyxl # 打包exe工具 pip install pyinstaller Wo ...
- 【JVM】堆体系结构及其内存调优
堆体系结构 一个JVM实例只存在一个堆内存,堆内存的大小是可调节的.类加载器读取类文件后,需要把类.方法.常量.变量放在堆内存中,保存所有引用类型的真实信息,以方便执行器指向,堆内存分为三个部分:年轻 ...
- JS实现PC端URL跳转到对应移动端URL
在做移动端网站时,有时因技术问题或其他原因无法制作响应式版面,而移动端页面只能放到子目录下,但是手机端通过搜索引擎进入网站电脑端子页面,无法匹配到移动端页面,使得用户体验很不好,即影响排名也影响转化. ...
- jchdl - RTL实例 - Adder4Carry
https://mp.weixin.qq.com/s/j4zLmjKgau2vRXVNfm0SIA 带进位的加法. 参考链接 https://github.com/wjcdx/jchdl/bl ...
- call 和 apply 的区别?哪个性能更好?
1.call 和 apply 都是 function 类 原型上的方法:每一个函数作为 function 的实例都能调用这两个方法:这两个方法执行的目的都是用来改变函数中 this 指向的,让函数执行 ...
- Java实现 LeetCode 822 翻转卡片游戏(暴力)
822. 翻转卡片游戏 在桌子上有 N 张卡片,每张卡片的正面和背面都写着一个正数(正面与背面上的数有可能不一样). 我们可以先翻转任意张卡片,然后选择其中一张卡片. 如果选中的那张卡片背面的数字 X ...