实例详解display:none与visible:hidden的区别
display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
例子:
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
实例详解display:none与visible:hidden的区别
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到. 例子: <html> <head> <title>display:n
-
实例详解C++中指针与引用的区别
目录 前言 1.指针的声明 2.使用new来分配内存 3.malloc 与 new 的区别 4.引用的声明与本质 总结 前言 在计算机存储数据时必须要知道三个基本要素:信息存储在何处?存储的值为多少?存储的值是什么类型?因此指针是表示信息在内存中存储地址的一类特殊变量,指针和其所指向的变量就像是一个硬币的两面.指针一直都是学习C语言的难点,在C++中又多了一个引用的概念.初学时很容易把这两个概念弄混,下面就来通过一些例子来说明二者之间的差别. 1.指针的声明 上文中提到,指针和其所指向的变量就像
-
Java 浅复制和深复制的实例详解
Java 浅复制和深复制的实例详解 1 浅复制和深复制区别 浅复制:浅复制只是复制本对象的原始数据类型,如int.float.String,对于数组和对象引用等是不会复制的.因此浅复制是有风险的. 深复制:不但对原始数据类型进行复制,对于对象中的数组和对象引用也做复制的行为,从而达到对对象的完全复制. 2 代码示例 package com; import java.util.ArrayList; public class Test implements Cloneable { // 私有属性 p
-
AngularJS tab栏实现和mvc小案例实例详解
tab栏: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab 标签</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .tabs { width: 400px; margin: 3
-
微信小程序 利用css实现遮罩效果实例详解
微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
-
iframe高度自适应及隐藏滚动条的实例详解
iframe高度自适应及隐藏滚动条的实例详解 在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目.而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面.而这种情况下,我们一般都会选择去使用iframe达到我们的目的.但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得. 高度自适应 <iframe src="http://huichang.qunar.com/huiQunar" i
-
Javascript复制实例详解
在做项目时有一个需求,是需要复制内容到剪切板,因为有众多浏览器,所以要兼容性很重要. 1.最简单的copy,只能在IE下使用 使用clipboardData方法 <script type="text/javascript"> function copy(){ window.clipboardData.setData("text",document.getElementById("name").value); alert("T
-
jQuery EasyUI 组件加上“清除”功能实例详解
1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS
-
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航
-
微信小程序 flex实现导航实例详解
微信小程序 flex实现导航实例详解 实现示意: 1.链接顶部内边距,留出圆形图标的位置. 2.伪元素:before绘制圆形. 3.圆形中添加图标. 4.左右外边距控制间距,及促使在需要的地方换行. wxml: <view class="serviceMenu"> <navigator url="http://xwbline.com/">资本</navigator> -- </view> wxss: .serviceM
随机推荐
- 同时安装vs2005团队开发版和sql 2005企业版的方法(downmoon原作)
- 变态入侵之有史以来最酷的Windows后门sethc.exe
- 使用远程桌面连接Windows 2003 & 2008服务器详细图文教程
- 清理Windows服务器的垃圾文件的批处理
- Eclipse设定文件的默认打开方式的具体操作步骤
- Oracle Table Demo语句应用介绍
- oracle 性能优化建议小结
- python关键字and和or用法实例
- JS判断是否在微信浏览器打开的简单实例(推荐)
- Android开发新手必须知道的10大严重错误
- php获取网页中图片、DIV内容的简单方法
- PHP中使用addslashes函数转义的安全性原理分析
- 利用Python读取文件的四种不同方法比对
- ViewPager打造轮播图Banner/引导页Guide
- ASP解压缩(在线解压缩类)
- SQLSERVER数据库备份后无法还原的解决办法
- Windows系统下Apache服务器无法启动的问题解决
- 基于jquery的网页SELECT下拉框美化代码
- jQuery阻止冒泡和HTML默认操作
- 用RegFind从命令行快速操作注册表