CSS隐藏元素的五种方法
用css隐藏页面元素有许多种方法。
1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute
opacity
opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。
visibility
第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏
注意,如果一个元素的visibility被设置为hidden,同时想要显示它的某个子孙元素,只要将那个元素的visibility显式设置为visible即可。
dispaly
display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。
不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
position
假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity和visibility影响布局mdisplay不影响布局但又无法直接交互)。在这种情况下,只能考虑将元素移出可视区域。这个办法既不会影响布局,有可能让元素保持可以操作。
.hide {position: absolute;top: -9999px;left: -9999px;
}
clip-path
隐藏元素的另一种方法是通过剪裁它们实现。
.hide {clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
例子如下链接:
http://codepen.io/SitePoint/pen/YWXgdW/
CSS隐藏元素的五种方法相关推荐
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
- css隐藏元素 触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是?...
css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
- 前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言 总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文 说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
- html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是?
css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
- CSS“隐藏”元素的几种方法的对比
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间 显示:display:block <!DOCTYPE html> <html lang="en">& ...
- 微信小程序隐藏元素的五种方法
转载地址:http://www.lanrenmb.com/xiaochengxujiaocheng/8896.html 一.使用wx:if指令. <view wx:if="{{3> ...
- 最全的css隐藏元素的7种方法
1.display: none: 渲染树不会渲染对象 2.visibility: hidden: 元素在页面中仍占据空间,但是不会响应绑定的监听事件. 3.opacity: 0: 元素在页面中仍然占据 ...
- 实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 除了display.visibility.opacity三个属性可以隐藏元素之外,是否还存 ...
最新文章
- 一只蝙蝠的自述,在朋友圈火了
- UDSMProt:蛋白质分类通用深度序列模型
- Spring Security 决策器前缀修改
- 高考题(可作为试讲资料)
- java optional_JAVA Optional总结
- 中国塑溶胶密封剂行业市场供需与战略研究报告
- 启动报错:Unsatisfied dependency expressed through field ‘baseMapper‘
- 频率单位Hz、MHz、GHz、THz、PHz、EHz换算关系
- python执行excel公式 语法_Python读取excel文件中带公式的值的实现
- 在Linux中连接和使用云存储的三种途径
- 记一次固态硬盘数据恢复
- android前置摄像头拍摄,Android前置摄像头拍摄倒置照片
- speedoffice(Word)怎么添加页码
- 关于技嘉雷电扩展卡SSDT驱动教程
- 心知天气Android开发,H5 实现天气效果(心知天气插件)
- 低依赖C++ GUI库imgui笔记
- 基于Aforge的物体运动识别-入门篇
- 有什么JAVA 网站或者论坛资料丰富呢
- JSP 9大内置对象
- 免费电子书籍下载站点●大全
热门文章
- 小程序代理商是如何赚钱的?
- Ckpalyer 视频列表循环播放
- 在linux下 nasm 编译,Ubuntu上安装nasm以及nasm在Ubuntu上的简单使用
- Boot Camp分区时强制终止导致硬盘空间消失的解决方法
- SSM实战-外卖项目-06-用户地址簿功能、菜品展示、购物车、下单(一个业务涉及5张表)
- 【已解决】WPS2018 从第三页开始插入页眉页码(即前两页不要页眉页码)
- c语言逗号表达式(C语言逗号表达式可以出现自身吗)
- AI生态链全解析:百度、猎豹移动、商汤们背后的智能版图
- Ubuntu16.04不能连wifi (外星人电脑)
- 8583报文解析1.0