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") ...
随机推荐
- WPF DevExpress 设置雷达图Radar样式
DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...
- vi(vim)键盘图及其基本命令
进入vi vi filename 打开或新建文件,并将光标置于第一行首 vi +n filename 打开文件,并将光标置于第 n行首 vi + fi ...
- jpa
学习尚硅谷jpa笔记: 所依赖的jar包: 首先在META-INF下创建配置文件,persistence.xml <?xml version="1.0" encoding=& ...
- Coursera上一个不错的Java课
地址:https://www.coursera.org/learn/java-chengxu-sheji/home/welcome 复习天昏地暗,看点视频调剂一下.发现这个讲的还是很不错的.北大毕竟比 ...
- [LeetCode] Minimum Window Substring 最小窗口子串
Given a string S and a string T, find the minimum window in S which will contain all the characters ...
- [LeetCode] Generate Parentheses 生成括号
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- ElasticSearch第二步-CRUD之Sense
ElasticSearch系列学习 ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearch第三步-中文分词 ElasticSea ...
- Stack的三种含义
作者: 阮一峰 日期: 2013年11月29日 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词 ...
- java 过滤器
1.什么是过滤器? 过滤信息,执行的优先级高于 servlet 2.自定义过滤器的步骤 写一个普通java类,实现Filter接口 2.配置过滤器 web.xm中 import java.io.I ...
- 基于centos的lnmp搭建
部署lnmp环境 安装配置mariadb配置php配置phpmyadmin配置php-fpm配置nginx配置测试 LNMP(linux,nginx,mariadb,php)部署,以下默认在root权 ...