9种HTML中通过CSS方式隐藏元素的方法

短命女 2022-10-27 12:27 168阅读 0赞

1、 通过style属性中的 `display : none`

2 、通过style属性中的 `visibility : hidden`

这两种方式的**区别**是:  
display 设置为 none之后, 该元素不占用文档流;  
visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已。

--------------------

3、通过相对定位移动当前元素到屏幕左侧

div{ 
         position: relative;
         left: -100%
    }

注意：

> 元素仍然占用标准文档流  
> 百分比是相对父元素的宽度和高度的, 并不是相对可视区宽度偏移的

--------------------

4 、通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示

.div{ 
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

注意：

> 此时子元素仍然占用文档流, 只是我们隐藏了超出部分

--------------------

5 、设置元素的宽度和高度为0, 元素直接消失

.div{ 
        width: 0px;
        height: 0px;
    }

注意：

> 标准文档流是相对于一个容器来说的, 每一个容器有自己的文档流, 我们只关心当前元素所在的文档流  
> 高度和宽度都设置为0后, 我们就可以认为此元素不再占用其父元素的标准文档流了, 但是这个容器仍然存在, 这个容器也存在一个标准文档流, 供其子元素使用; 其子元素不会消失, 仍然会正常显示, 但是不会占用其父元素所在的标准文档流( 即子元素显示不会受其影响, 此元素占用文档流的大小也不会受其子元素的影响 )

--------------------

6 、设置元素透明度为 0

div{ 
        opacity: 0;
    }

--------------------

7、 旋转元素, 使与当前页面垂直

div{ 
        transform: rotateX(90deg);
    }

注意：

> 这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此。

--------------------

8 、缩小元素尺寸到自身的0倍

div{ 
        transform: scale(0);
    }

注意：

> 这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此。

--------------------

9 、其它 transform 使其假不可见

translateX()
    translateY()
    skew()

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关通过css实现隐藏元素方法

\\实现方式通过css实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、widt

墨蓝/ 2023年09月26日 19:52/ 0 赞/ 79 阅读

相关用css隐藏页面元素的六种方法

用css隐藏页面元素的六种方法 1.display: none; 真正意义上的隐藏，页面源码都不显示隐藏的页面源码，隐藏的元素不占用任何空间，元素的盒空间都不生成，

分手后的思念是犯贱/ 2022年12月30日 03:37/ 0 赞/ 128 阅读

相关 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the

柔情只为你懂/ 2022年12月03日 01:38/ 0 赞/ 218 阅读

相关 9种HTML中通过CSS方式隐藏元素的方法

1、通过style属性中的 `display : none` 2 、通过style属性中的 `visibility : hidden` 这两种方式的区别是: disp

短命女/ 2022年10月27日 12:27/ 0 赞/ 169 阅读

相关 9种HTML中通过CSS方式隐藏元素的方法

![format_png][] 来源 | http://www.fly63.com/article/detial/10109?type=1 1、通过style属性中的

客官°小女子只卖身不卖艺/ 2022年10月26日 12:44/ 0 赞/ 309 阅读

相关 CSS 隐藏元素的八种方法

前言总括：本文详细讲述了在网页中用CSS隐藏元素的七种方法。原文博客地址：[从隐藏元素谈起][Link 1] 知乎专栏&&简书专题：[前端进击者（知乎

ゝ一世哀愁。/ 2022年07月14日 13:13/ 0 赞/ 141 阅读

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

用 CSS 隐藏页面元素的 5 种方法 Opacity： opacity 属性的意思是设置一个元素的透明度。这意味着将 opacity 设为 0 只

痛定思痛。/ 2022年07月13日 15:00/ 0 赞/ 163 阅读

相关隐藏html元素的方式

1. display: none; 2. visibility: hidden; 3. opacity: 0;//使元素透明 4. positi

蔚落/ 2022年06月05日 06:18/ 0 赞/ 170 阅读

相关 CSS“隐藏”元素的几种方法的对比

阅读目录 [几种方法的简单介绍][Link 1] [元素隐藏后的事件响应][Link 2] [CSS3 transition对这几种方法的影响][CSS3

た入场券/ 2022年05月28日 13:41/ 0 赞/ 200 阅读

相关通过DOM获取HTML元素的三种方式

转载自：[http://www.runoob.com/js/js-htmldom.html][http_www.runoob.com_js_js-htmldom.html]

- 日理万妓/ 2022年05月14日 08:57/ 0 赞/ 271 阅读