css div如何隐藏？
在我们平时布局网站的时候，想要把div进行隐藏，但是很多人不知道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"。
3、使用opacity: 0隐藏div
opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。
这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。这和上面的visibility: hidden 相似。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: </title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: ;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: </div>
<div>元素隐藏2--opacity: </div>
<div>元素隐藏3--opacity: </div>
</div>
<div>
<div>元素隐藏1--opacity: ,元素隐藏2--opacity: ,元素隐藏3--opacity: </div> <div>元素隐藏1--opacity: ,<span>元素隐藏2--opacity: </span>,元素隐藏3--opacity: </div>
</div>
</body>
</html>
效果图：
css div如何隐藏？的更多相关文章
- 基于CSS+dIV的网页层，点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- CSS+DIV实现文字一行内显示，并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
- Jquery一个slideToggle搞定div的隐藏与显示
Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...
- [置顶] CSS+DIV总结
HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- 【转载】CSS + DIV 实现局部布局
HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局 ...
- CSS(九)元素隐藏和利弊
隐藏元素.无法点击,这之间有什么关系呢? 可以配合我写的 html 食用:https://github.com/dirstart/ScriptOJ/blob/master/OJ_CSS/4.css%E ...
- 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色
1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...
随机推荐
- python自学Day03（自学书籍python编程从入门到实践）
第4章 操作列表 只需要几行代码无论列表有多长,循环都能够让我对列表的每个元素都采取一个或一系列相同的措施,从而高效的处理任何长度的列表. 4.1 遍历整个列表 对列表中每个元素都拿出来,进行一个或者 ...
- 曹工说JDK源码（1）--ConcurrentHashMap，扩容前大家同在一个哈希桶，为啥扩容后，你去新数组的高位，我只能去低位？
如何计算,一对key/value应该放在哪个哈希桶 大家都知道,hashmap底层是数组+链表(不讨论红黑树的情况),其中,这个数组,我们一般叫做哈希桶,大家如果去看jdk的源码,会发现里面有一些变量 ...
- k8s学习-集群安装
3.kubernetes安装 3.1.规划 hostname ip 内存 核 硬 说明 harbor 192.168.136.30 2G 2 100G 私有仓库 koolshare 2G 2 20G ...
- 96题--不同的二叉搜索树（java、中等难度）
题目描述:给定一个整数 n,求以 1 ... n 为节点组成的二叉搜索树有多少种? 示例如下: 分析:本题可用动态规划的方法求解. 设 dp[n] 表示以 1 ... n 为节点组成的二叉搜索树的种类 ...
- 一文讲透Java序列化
本文目录 一.序列化是什么 二.为什么需要序列化 三.序列化怎么用 四.序列化深度探秘 4.1 为什么必须实现Serializable接口 4.2 被序列化对象的字段是引用时该怎么办 4.3 同一个对 ...
- 氦元素 - CUBA 应用程序新样式主题
CUBA 框架一直以来定位的目标是业务系统的开发.业务系统的界面通常是给后台员工使用的,看重的是功能实现.多年来,界面外观和样式并不是后台管理系统的主要关注点,界面中的控件也更紧凑,唯一的原因 ...
- IDEA环境Spring Boot 2.3整合Activiti 6.0，启动项目初始化表并创建核心服务
如下步骤照着抄就完事了. 一.新建一个spring boot项目,并引入相关依赖 <?xml version="1.0" encoding="UTF-8" ...
- @bzoj - 3148@ 没头脑和不高兴
目录 @description@ @solution@ @part 1:期望@ @part 2:方差@ @accepted code@ @details@ @description@ 没头脑和不高兴是 ...
- 2019-01-31 Python学习之BFS与DFS实现爬取邮箱
今天学习了python网络爬虫的简单知识 首先是一个爬取百度的按行读取和一次性爬取 逐行爬取 for line in urllib.request.urlopen("http://www.b ...
- python 获取两位的月份（09）和天数（09）