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: ...
随机推荐
- java实现第五届蓝桥杯大衍数列
大衍数列 中国古代文献中,曾记载过"大衍数列", 主要用于解释中国传统文化中的太极衍生原理. 它的前几项是:0.2.4.8.12.18.24.32.40.50 ... 其规律是:对 ...
- （三）Host头攻击
01 漏洞描述 为了方便获取网站域名,开发人员一般依赖于请求包中的Host首部字段.例如,在php里用_SERVER["HTTP_HOST"].但是这个Host字段值是不可信赖的( ...
- 用my eclipse 新建hibernate 第一个程序
Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 今天就来开始建我们的第一个hibernat ...
- gitee+picgo搭建个人博客图床
gitee+picgo搭建个人博客图床 准备 首先需要去码云注册一个账号,并新建一个仓库.接着下载PicGO并安装好. 过程 点击左下方的插件设置. image 在搜索框中输入gitee搜索插件,安装 ...
- MongoDB知识点总结
一:MongoDB 概述 一.NoSQL 简介 1. 概念:NoSQL(Not Only SQL的缩写),指的是非关系型数据库,是对不同于传统的关系型数据库的数据库管理系统的统称.用于超大规模数 ...
- MySQL数据库字符集和排序规则的四个级别
MySQL数据库字符集和排序规则有四个级别的默认设置:服务器,数据库,表和列. 最初,服务器字符集和排序规则取决于启动mysqld时使用的选项.可以使用 --character-set-server该 ...
- Numpy中数据的常用的保存与读取
保存到文本文件numpy.savetxt()numpy.loadtxt() import numpy as np x= np.arange(0,10,0.1) np.savetxt('save_x', ...
- SpringMVC+Mybatis初尝试
一个月前简单学完了SpringMVC框架和Mybatis框架,一直没有使用过,今天主要用它做了个简单的学生管理系统,不过第一次用框架,实现的功能简单,比较low. 注:这里使用的数据库是SQLServ ...
- Nginx 的变量究竟是怎么一回事？
之前说了很多关于 Nginx 模块的内容,还有一部分非常重要的内容,那就是 Nginx 的变量.变量在 Nginx 中可以说无处不在,认识了解这些变量的作用和原理同样是必要的,下面几乎囊括了关于 Ng ...
- IE11下文档模式默认值是7， 而且无法更改
IE9以上是支持css3的,但是有的IE11的浏览器里面,文档模式默认值是7,而且是无法改变的,就会导致网页布局错乱 我的IE11的文档模式默认值是11 ,如下图 (打开页面按F12) 对于默认值是 ...