【转载】9种HTML中通过CSS方式隐藏元素的方法

2022-01-08 14:02:03 阅读：161 来源： 互联网

标签：占用元素 transform HTML 文档 div 转载 hidden CSS

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()

————————————————
版权声明：本文为CSDN博主「11.28.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/PILIpilipala/article/details/113633154

标签：占用,元素,transform,HTML,文档,div,转载,hidden,CSS
来源： https://www.cnblogs.com/xsbz/p/15778108.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【转载】9种HTML中通过CSS方式隐藏元素的方法