display：none显示和隐藏
<html>
<head>
<title>显示和隐藏问题</title>
<meta charset="utf-8"/>
<style type="text/css">
#a{
width: 500px;
height: 300px;
background-color: red;
/*display:none;*/
visibility:hidden;
}
#b{
width: 100px;
height: 200px;
background-color: green;
display:block;
/*display:none;*/
visibility: hidden;
}
#c{
width: 100px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="a">a
<div id="b">b</div>
<div id="c">c</div>
</div>
</body>
</html>
display:none;和visibility: hidden;都可以隐藏元素。区别是display:none彻底不显示元素，元素不占空间，跟完全没有一样。visibility: hidden只是把元素隐藏不显示，但还是占有原来的位置空间的。
另：如果父div设置为隐藏属性，则其孩子也都被隐藏。（然后想单独设置孩子显示，也显示不出来，目前测试是这样）
display：none显示和隐藏的更多相关文章
- jquery控制css的display属性(显示与隐藏)
jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- 显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对象,如通过document.get ...
- 显示和隐藏（display属性）none或block
显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- js 与JQuery显示及隐藏方法
虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...
- jQuery判断当前元素显示状态并控制元素的显示与隐藏
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id") ...
随机推荐
- TB6612FNG电机驱动模块的简单使用
TB6612FNG电机驱动模块的简单使用: 文 小波 QQ463431476 博客 http://www.cnblogs.com/xiaobo-Linux/
- spring squertz定时任务
spring squertz是一个强大的定时任务处理方式 1.需要的Jar quartz-1.8.5.jar commons-logging.jar spring-core-3.0.5.RELEASE ...
- linux命令-系统命令
1.查看Linux磁盘空间大小 df -lh Filesystem 容量 已用 可用 已用% 挂载点 /dev/hda8 11G 6.0G 4.4G 58% / /dev/shm 236M 0 236 ...
- Hexo静态博客搭建教程
Hexo是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.生成静态网页可以托管在github.下面简单介绍一下he ...
- maven/gradle 打包后自动上传到nexus仓库
前提: nexus的相关repository必须设置允许redeploy,参考下图: maven项目: pom.xml中增加以下节点: <distributionManagement> & ...
- [LeetCode] Range Sum Query 2D - Immutable 二维区域和检索 - 不可变
Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...
- [LeetCode] Nim Game 尼姆游戏
You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...
- [LeetCode] Trips and Users 旅行和用户
The Trips table holds all taxi trips. Each trip has a unique Id, while Client_Id and Driver_Id are b ...
- [LeetCode] Flatten Binary Tree to Linked List 将二叉树展开成链表
Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...
- 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构
基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了OA.CRM.CMS的原型实例,适合快速构建中小型互联网及行业 ...