css div如何隐藏?
时间:2021-08-15
本文章向大家介绍css div如何隐藏?,主要包括css div如何隐藏?使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、使用display:none来隐藏div
我们可以使用display:none属性来隐藏所有的信息,包括文本和图片,语法为:
<div>这里你是看不到的</div>
当我们使用div中的css样式,我们就可以使用display:none属性对内容进行隐藏,并且通过浏览器也是看不到的,同时被隐藏的内容是不被占用空间的,隐藏之后的内容搜索引擎是不读取的,一般我们都是用使用js统计代码去隐藏显示的图标。
2、使用visibility: hidden;隐藏div
visibility 属性规定元素是否可见。
这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
属性值:
-
visible 默认值。元素是可见的。
-
hidden 元素是不可见的。
-
collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
https://www.houdianzi.com/ vi设计公司
3、使用opacity: 0隐藏div
opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。
这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。这和上面的visibility: hidden 相似。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: 0;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: 0</div>
<div>元素隐藏2--opacity: 0</div>
<div>元素隐藏3--opacity: 0</div>
</div>
<div>
<div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
<div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
</div>
</body>
</html>
效果图:
原文地址:https://www.cnblogs.com/qianxiaox/p/15143875.html
- JSP第三篇【JavaBean的介绍、JSP的行为--JavaBean】
- Java基础-06.总结二维数组,面向对象
- 04 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之高并发优化
- 过滤器第一篇【介绍、入门、简单应用】
- 通过pl/sql来格式化sql(r4笔记第63天)
- 程序员如何写出杀手级的简历
- 过滤器第二篇【编码、敏感词、压缩、转义过滤器】
- JSP第二篇【内置对象的介绍、4种属性范围、应用场景】
- Struts2的配置和一个简单的例子
- 监听器第一篇【基本概念、Servlet各个监听器】
- 监听器第二篇【统计网站人数、自定义session扫描器、踢人小案例】
- 通俗易懂的分析如何用Python实现一只小爬虫,爬取拉勾网的职位信息
- JSP第一篇【JSP介绍、工作原理、生命周期、语法、指令、行为】
- 一条执行时间两天半的sql语句简化(r4笔记第62天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- JointPoint用法及与ProceedingJoinPoint 的关系
- Spring中的异步请求、异步调用及demo测试
- 以太坊交易签名解析源码解读
- 比较NaN和数字
- GO 的方法集
- 轻松应对并发问题,简易的火车票售票系统,第一步 —业务分析
- 【Spark Operator】核数设置Cores/Cores Limit/Cores Request,你搞清楚没有?
- 【Ceph RGW】radosgw_usage_exporter监控用户使用量
- 【Goland】#{key}=#{value},字符串被格式化了?
- Variable变量
- 案例:OGG目标端进程ABENDED处理
- Elasticsearch深分页以及排序查询问题
- 聊聊dubbo-go的HystrixFilter
- 如何将Java工程导出成可以执行的jar
- 利用JSP内置的Application对象实现的网站引用计数