css隐藏元素的几种方法与区别

一：display：none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外，基本效果卓越，没什么让人诟病的地方。二：position：absolut;left/top:-99999px;足够大的负值使其不可见三：visibility：hidden；隐藏占位，不会响应点击事件。四：opacity：0；严格来说这个并不是隐藏，透明之后它还占据着页面位置，所以在重排的时候还是会被计算消耗性能。

五：width/height为0 而且可以在二级下拉菜单中设置其慢慢打开的效果。相对于 display 来说适用范围太窄，但是好处是能使用 CSS3 动画。

六：拿一个白色div盖住它，或者和背景颜色相同。可以出现回字显现效果；

三四可以隐藏单选按钮，并且不影响功能使用。

不用js,用单选按钮判断当前是否被选中。

转载于:https://www.cnblogs.com/zhrn/p/4500171.html

css隐藏元素的几种方法与区别相关推荐

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来隐藏元素 ...
CSS隐藏元素的五种方法
用css隐藏页面元素有许多种方法. 1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute opacity opacity ...
HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间显示:display:block <!DOCTYPE html> <html lang="en">& ...
最全的css隐藏元素的7种方法
1.display: none: 渲染树不会渲染对象 2.visibility: hidden: 元素在页面中仍占据空间,但是不会响应绑定的监听事件. 3.opacity: 0: 元素在页面中仍然占据 ...
实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 除了display.visibility.opacity三个属性可以隐藏元素之外,是否还存 ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...

css隐藏元素的几种方法与区别

css隐藏元素的几种方法与区别相关推荐

最新文章

热门文章