html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式
1、display
none : 无 隐藏元素
block : 显示 转换为块级元素
不占位:当隐藏的时候元素就完全没有了。不能看见和操作该元素。
优点:为其他元素让出空间,如二级导航伸缩功能、或者另外一个元素要占据该位置时用起来比较方便。
简单使用:<div style="display: none;"></div>
2、visibility
visible :显示
hidden :隐藏
占位:当隐藏时只是看不见,实际还是在那里,但是也不能操作该元素。
优点:不影响原来布局,即达到了保持布局稳定,也能让元素隐藏,且不能操作。
简单使用:<div style="visibility: visible;"></div>
3、overflow
hidden :溢出的部分隐藏掉
visible : 显示
auto :自动出现滚动条
scroll :一直有滚动条
优点:如单行/多行溢出隐藏使用方便。
简单使用:<div style="overflow: hidden;"></div>
4、vue的v-if 和 v-show类似于wx:if等
v-if
条件为false隐藏(原理是组件或者标签条件不成立时销毁组件或者标签)
v-show的隐藏与显示是利用的css的display
优点: 元素切换频繁建议使用 如 v-show这样的。它原理时css,能更多的让出性能给其他功能。
简单使用:<div v-if="true"> 条件结果为true展示这组标签,反之不展示</div>
5、opacity 透明度。0 为全透明, 1为不透明
用法 box { opacity: 0; opacity: 1;opacity: 0.5; }
说明:当值为小数时前面的0可省略。最小值为0 最大值为1 可取中间小数
占位:当以此方法做隐藏时,元素占位,且可操作元素。可和z-index联用发挥它更多的功能。
优点:半透明 有遮罩层效果、全透明占位隐藏依然可操作、简单实用。
简单使用:<div style="opacity: .5"></div>
缺点:透明度有继承。也就是:父元素的透明度会被子元素继承,这样对一些子元素不要透明度的就不是很友好。
比如:在一个box框里,大部分需要透明,但是它的按钮不需要透明这种。
解决方法:
1、背景颜色的rgba:background: rgba(0,0,0,.4);
2、可以把不需要透明的元素写到外面,通过定位进来。
- 如果对您有帮助,希望对面的你能点赞加评论!拜上!
- 若有bug还请告知,万分感谢!
html显示与隐藏元素的几种方式的更多相关文章
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 有趣的css—隐藏元素的7种思路
css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...
- 如何使用Bootstrap4显示和隐藏元素
如何使用Bootstrap4显示和隐藏元素 为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素.避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素. 要隐藏元素,只需使 ...
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...
- UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
一.对UITabBar背景和icon图标的一些设置 (1)因为直接给UITabBar设置的背景颜色显示的不纯,半透明的感觉,所以,有时候我们可以直接利用纯色的图片作为背景达到想要的效果: (2)给ic ...
- 【iOS开发-31】UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
一.对UITabBar背景和icon图标的一些设置 (1)由于直接给UITabBar设置的背景颜色显示的不纯.半透明的感觉,所以,有时候我们能够直接利用纯色的图片作为背景达到想要的效果. (2)给ic ...
- Android中EditText显示明文与密文的两种方式
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录输入框显示.隐藏密码的简单布局以及实现方式. 效果图 代码分析 方式一 /**方式一:*/ private void sh ...
随机推荐
- django之分页,纯python代码
Django中分页 py文件代码 """ 自定义分页组件 可以返回分页的数据和分页的HTML代码 """ from django.http ...
- react中使用截图组件Cropper组件
--最近项目用react,学习react并使用cropper组件裁剪图片. (这里开发组件不够统一有用tsx(TypeScript + xml/html)写的组件,有用jsx(javascript+x ...
- java反射笔记(学习尚硅谷java基础教程)
反射一.概述:Reflection Reflection(反射)是被视为动态语言的关键,反射机制允许程序在执行期借助于Reflection API取得任何类的内部信息,并能直接操作任意对象的内部属性 ...
- python+pytest接口自动化(12)-自动化用例编写思路 (使用pytest编写一个测试脚本)
经过之前的学习铺垫,我们尝试着利用pytest框架编写一条接口自动化测试用例,来厘清接口自动化用例编写的思路. 我们在百度搜索天气查询,会出现如下图所示结果: 接下来,我们以该天气查询接口为例,编写接 ...
- 【网鼎杯】jocker--部分代码加壳逆向处理
Main函数,用户输入flag,长度为24位 Wrong函数进行了简单的异或操作 Omg函数进行异或操作,根据提示来看应该是假check Encrypt无法生成伪代码 发现有加壳以及自修改,下断点动调 ...
- 【算法篇】Bitmap 算法
首先,什么是Bitmap算法(位图算法)呢? 一:定义: Bit map就是用一个bit位来标记某个元素对应的Value, 而Key即是该元素.使用Bit为用来存储数据的单位, 可以大大节省存储空间. ...
- DateUtils互转工具类
public class DateUtils { /** * 取系统默认时区ID */ private static final ZoneId ZONE_ID; static { ZONE_ID = ...
- 深入理解Java虚拟机-走进Java
一.Java技术体系 从广义上讲, Clojure. JRuby. Groovy等运行于Java虚拟机上的语言及其相关的程序都属于Java技术体系中的一员. 如果仅从传统意义上来看, Sun官方所定义 ...
- Oracle入门基础(四)一一多行函数
SQL> --工资总额 SQL> select sum(sal) from emp; SUM(SAL) 29025 SQL> --人数 SQL> select count(*) ...
- Homebrew安装环境
p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: no-c ...