最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 开发技术 > web开发 >
html元素隐藏几种方法及特点
网络发表于 2021-05-07 16:09 次浏览

html让元素隐藏的方法:1、通过“display:none;”隐藏;2、通过“overflow:hidden;”隐藏;3、设置元素的宽高等盒子模型的属性值为0;4、利用定位隐藏;5、设置元素透明度为0;6、通过visibility隐藏。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

HTML元素的隐藏方式

1.display:none;

特点: 真正的隐藏元素。

(1) 将元素的display属性设置为none能够确保元素不可见;

(2) 使用这个属性,被隐藏元素不占用任何空间;

(3) 使用display:none隐藏元素,不能直接跟用户进行交互操作

(另外,使用读屏软件也不能读取到元素的内容,这种隐藏方式就像元素完全不存在一样)

(4) 任何这个隐藏元素的后代元素也会被隐藏;

(5) 但是,可以通过JS中的DOM操作访问到这个被隐藏的元素,也可以通过DOM对它进行操作。

2.overflow: hidden;

原理: 将元素位置设置到父元素的外面。

3.设置元素的宽高等盒子模型的属性值为0。

4.利用定位隐藏元素。

优点:只要通过将元素的left和top设置足够大的复数 (这个元素可以跟用户进行交互);

缺点:仍然可以使用读屏软件读取元素的内容。

5.opacity:设置元素透明度为0。

特点: 将元素的透明度设置为0,只是从视觉隐藏元素,元素本身的位置仍然存在,也可以跟用户进行交互。

6.visibility: 设置元素是否可见。

默认为:visible(可见);

隐藏(不可见):hidden。

特点: 隐藏元素,但是会保留元素的位置。

更多详细的HTML/CSS知识,请访问CSS视频教程栏目!

以上就是html怎么让元素隐藏的详细内容,更多请关注群英网络其它相关文章!

标签:html教程
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐
2021-09-29 19:14:16 关键词:html输入框
摘要:html网页怎样实现输入框的功能?在实际的网站开发项目中,常常会遇到实现网页输入框功能的需求,而实现输入框并不困难,我们需要使用到input标签,下文有html网页输入框的功能实现..
2021-09-27 20:10:48 关键词:html怎么隐藏input标签
摘要:HTML怎么隐藏input标签?想要实现隐藏input标签,我们有两种方法,第一种是给input标签设置hidden属性,第二种是设置input标签的type属性的值为“hidden“,接下来我们通过示例来了了解HTM..
2021-09-17 18:01:33 关键词:html导入CSS样式
摘要:html如何导入CSS样式?在CSS中,我们想要导入CSS样式有三种方法,分别是行内式,也就是用style属性在特定的HTML标记内插入CSS代码、内嵌式,也就是把css代码放在特定页面的部分中、..
2021-09-15 18:37:30 关键词:html背景图片居中
摘要:html页面背景图片居中效果怎样实现?在html中我们想要背景图片居中,可以使用background-position属性来设置,下面我们就来看一下实现步骤。..
2021-09-15 18:30:11 关键词:html中css代码放哪里
摘要:html中css代码放哪里?对刚接触HTML的朋友来说,可能不是很了解要将CSS代码写在哪里和写入方法,其实,一般我们可以用style属性,将CSS代码放到html标签中或者使用style标签把css代码集中..