css隐藏元素的方法及区别

最新推荐文章于 2024-09-11 10:49:17 发布

qq_37519640

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量195

点赞数

分类专栏： css 文章标签： css 隐藏元素

本文链接：https://blog.csdn.net/qq_37519640/article/details/99425400

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

display，opacity，visibility，position

display：none

display 属性规定元素应该生成的框的类型
将display设置为none的话，元素不可见其盒模型也不会生成，即在布局中不占据任何空间，任何用户交互操作也将不会生效。
但通过DOM操作可以访问该元素

opacity：0

将元素设置成透明不可见，因此还是在布局中占据空间，但交互操作无效。

visibility：hidden

将元素设置为不可见，其盒模型还是存在的，在布局中占据空间，但交互操作有效。

position：absolute

将top和left设置为足够大，使元素定位到可视范围之外
（常用于为一张图片添加一个h1标签并将其隐藏，方便爬虫）

区别

属性	display	opacity	visibility	position
布局空间	✘	✔	✔	✔
交互操作	✘	✘	✔	✔

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_37519640

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS隐藏页面元素的5种方法

09-24

本文将详细介绍CSS隐藏元素的五种方法：opacity、visibility、display、position以及clip-path。首先，`opacity`属性用于设置元素的透明度。将`opacity`设置为0可以让元素变得完全透明，从而视觉上隐藏它。然而，...

CSS中隐藏页面元素的几种方式和区别

主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。

05-31

4862

前言、在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏的元素方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。实现方法综合、通过css实现隐藏元素方法有如下： display：none visibility：hidden opacity：0 设置height、width模型属性为0 position：absolute clip-path 方法一：display：none display：none是通常

参与评论您还未登录，请先登录后发表或查看评论

CSS实现隐藏页面元素的方法和区别

weixin_53748496的博客

11-19

299

CSS实现隐藏页面元素的方法和区别1.display: none;诛连性。不占位。给谁设置，则谁原本占据的位置不存在（相当于直接被删除），同时其子级也消失浏览器直接不会解析该元素的所有元素，包括其子级元素 2.overflow: hidden; 超出部分隐藏，仍占位,视觉上消失，但仍在文档流中占据空间，等价于设置透明度为0，浏览器仍然解析该元素overflow: scroll;滚轮显示出全部opacity: 0;隐藏该元素，设置透明程度为0，但不影响布局，仍占位

css中隐藏元素常用的三种方式与区别

weixin_44189739的博客

01-12

647

隐藏元素的三种方式： display:none;–隐藏对象，不会为被隐藏对象保留物理空间。用display:block;将隐藏的元素显示。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta cha

css 隐藏元素的方法与区别

weixin_43352942的博客

07-18

372

display:none; 1.DOM结构，浏览器不会渲染display:none的元素，不占据空间； 2.事件监听：无法进行DOM事件监听； 3.性能：动态改变此属性会引起重排，性能较差； 4.继承：不会被子元素继承，毕竟子类也不会渲染； 5.transition：transition不支持display； visibility:hidden; 1.DOM结构：被渲染，但是被隐藏，会占据空间； 2.事件监听：无法进行DOM事件监听； 3.性能：动态改变此属性会引起重绘，性能较高； 4.继承：会被子元素继

css中让元素隐藏的多种方法

09-25

另一种常见的隐藏元素方法是`visibility:hidden;`，其特点是在隐藏元素的同时仍保留该元素所占的空间。尽管如此，此方法同样让元素不可被点击，代码示例如下： ```css 元素 {visibility: hidden;} ``` 如果需要...

CSS“隐藏”元素的多种方法的对比

12-13

一说起CSS隐藏元素，我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最常用的方法。我相信还有不少人想到使用设置visibility为hidden来隐藏元素，这种方式也是常用的方法，而且...

CSS隐藏元素五种方法

热门推荐

qq_40950549的博客

01-07

3万+

css隐藏元素的方法 1、利用opacity透明度来隐藏，opacity设置为0，它只是一种视觉隐藏，元素本身依旧占用它的位置并对网页的布局起到作用，它也同样影响用户交互。在读屏软件中会被识别。 2、visibility：规定元素是否可见，一般设置为hidden，它可以很好的隐藏，不会影响用户的交互，在读屏软件中不会被识别。（visibility可能的值） visible

css隐藏元素的方法与区别

weixin_55980647的博客

03-11

122

1.opacity .hide { opacity: 0; } 设置元素的透明度，不会改变元素的边界框，等于0时只能从视觉上隐藏元素，而元素依然占据它自己的位置并对网页的布局起作用。 2.visibility .hide { visibility: hidden; } 如同opacity属性，被隐藏的元素依然会对网页布局起作用。 3.display .hide { display: none; } 将display属性设为none确保元素不可见并且连盒模型也不生成。 ...

常见的CSS隐藏元素及其区别

baidu_41746022的博客

11-23

271

CSS隐藏元素及其区别 1.opacity 将opacity值设置为0。将元素的透明度改为0时，元素变透明不可见，但是其>仍占用原本的位置，影响布局，会响应用户交互。 2.visibility 将visibility的值设置为hidden，当visibility的值设置为hidden时表示隐藏当前元素及其子元素，此时元素不可见，但仍占用原本的位置，影响布局，不会响应用户交互。如果想要子元素显示，可将子元素的visibility设置为visibility，此时子元素可见。 3.display

css中隐藏元素的方法与区别

许俊彬

05-21

469

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的 { display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { position: absolute; top: -999em; /* 不占据空间，无

转载：css隐藏元素的几种方案

u010057430的专栏

04-09

554

狼狼的蓝胖子我只是想写点字 Home Categories Archives Tags CSS“隐藏”元素的几种方法的对比 Posted on 2016-02-15 | In CSS | 4条评论本文地址：http://luopq.com/2016/02/15/css-tricks-of-hide-element/，

web前端之“CSS隐藏元素的几种方式及区别”

空投在我怀里的博客

05-11

945

1.display:none 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。不会触发其点击事件 2.visibility:hidden 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会2-1导致浏览器重绘而不会重排。 2-2无法触发其点击事件 2-3适用于那些元素隐藏后不希望页面布局会发生变化的场景 3.opacity:0 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方.

用css隐藏元素的四种方法

木木

08-20

5769

1.opacity opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。 2.visibility 该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。如果一个元素的 visi...

CSS隐藏元素的方法及区别

Sugarman0620的博客

09-27

146

1.opacity opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互。 2.visibility　 visibility：hidden将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互。如果想让子元素显示，则设置子元素的visibility：visibi...

CSS —— 界面布局

m0_73557953的博客

09-10

987

采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"

富文本中去掉 HTML 和 CSS 样式，只保留纯文本