HTML中div隐藏属性有什么，如何使用？-群英

您现在的位置是：群英 > 开发技术 > web开发

HTML中div隐藏属性有什么，如何使用？

Admin发表于 2022-02-25 17:20:061735 次浏览

上一篇： HTML中input的宽度自适应效果怎样实现？

下一篇： HTML实现div固定位置不变的方法是什么？

这篇文章我们来了解HTML中div隐藏属性，HTML中div元素隐藏属性有display:none和hidden，那么如何使用呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

html中div的隐藏属性代码是什么

1、在html中，可以利用style属性，给div元素添加display:none样式就可以隐藏div元素了，下面我们通过示例看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:100%; height:100px; background:red; position:absolute;top:0;">这是一个固定在顶部的div</div>
</body>
</html>

输出结果：

此时是一个正常的div元素显示在顶部，下面给他设置display样式，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:100%; height:100px; background:red; position:absolute; bottom:0;display:none;">这是一个固定在顶部的div</div>
</body>
</html>

输出结果：

2、利用hidden属性也能够将div元素隐藏，只需要价格hidden属性值设置为hidden即可，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:100%; height:100px; background:red; position:absolute; bottom:0;" hidden="hidden">

这是一个固定在顶部的div</div>
</body>
</html>

输出结果：

关于HTML中div隐藏属性就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注群英网络其它的相关文章。

文本转载自PHP中文网

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： html div隐藏属性

上一篇： HTML中input的宽度自适应效果怎样实现？

下一篇： HTML实现div固定位置不变的方法是什么？

推荐内容

PHP中替换第一位字符的方法和代码是什么
2022-12-14 11:21:38

Python使用中有哪些高效、实用的高级技巧
2022-08-19 17:53:01

新手学习Python有哪些关键字要掌握
2022-08-19 17:51:59

热门关键词

热门信息

Python怎么样创建txt文件，写入方法是什么？
2022-01-24 19:23:44

Python中如何求阶乘？教你四个方法
2022-02-25 17:19:26

pycharm怎么完全卸载？两个步骤帮你搞定
2022-01-04 18:53:44

Java中map判断是否存在key怎样做？教你两个方法
2022-01-26 18:39:38

Python中怎样利用while求1到100的和？
2021-11-20 17:46:01

Java中string转date有哪些方式，怎样实现？
2022-01-18 18:00:09

Python中怎么定义数组？教你三种方法
2022-01-13 18:58:11

Python中的eval函数的作用是什么，怎样用？
2022-01-24 19:23:57

用python如何读取csv文件，你知道几种方法？
2021-11-22 17:53:55

python中怎样统计元素出现的次数，方法有哪些？
2021-11-20 17:45:40