display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title></head><body> <h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> <P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P> <P> <input type=button value="Inline" onclick="oSpan.style.display='inline'"> <input type=button value="Block" onclick="oSpan.style.display='block'"> <input type=button value="None" onclick="oSpan.style.display='none'"> <input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'"><input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> </P> <UL> <LI>将元素设为 block，会在该元素后换行。</LI> <LI>将元素设为 inline，会消除元素换行。</LI> <LI>将元素设为 none，隐藏该元素内容。</LI> </UL></body></html>
打开该html页面,显示如下图：
点击Inline,Block,None,Hidden,Visible按钮，将会出现不同的结果，如下：
通过对比以上的显示，可以对display属性的block,inline,none和visibility属性的visible，hidden一目了然！
转载于:https://www.cnblogs.com/wangtory/archive/2007/11/02/947003.html
display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）相关推荐
- 使用display：none和visibility：hidden隐藏的区别
今天做毕设时遇到了一个小问题,我做了一个tab导航栏,点击一个tab页其它tab页隐藏,这时候第一想法是使用display:none来控制显示隐藏,写了之后发现使用display会有一个问题,就是第二 ...
- UIView 的 alpha、hidden 和 opaque 属性之间的关系和区别
UIView 的 alpha.hidden 和 opaque 属性之间的关系和区别 UIView的这几个属性让我困惑了好一阵子,通过翻看官方文档和stackoverf ...
- java map与set的区别_java 集合（list，set，map）三者之间的关系和区别
原 java 集合(list,set,map)三者之间的关系和区别 一:先上一张关系图,让大家看的更明白. 备注:其中红色部分为实现,其他地方均为接口. 二:各自的特点. List 有序,可重复Arr ...
- sql语句和java的关系_java中Statement 与 PreparedStatement接口之间的关系和区别
Statement 和 PreparedStatement之间的关系和区别. 关系:PreparedStatement继承自Statement,都是接口 区别:PreparedStatement可以使 ...
- 栈,队列和链表三者之间的关系与区别
最近一直在学习算法,刷算法题,但是自从大学毕业以来,数据结构的知识都还给老师了,只会个数组,所以前期刷的题目也都是有关数组的 最近跟着小册重学了一遍数据结构,今天就记录一下栈,队列和链表三者之间的关系 ...
- 详解RTK、RTD、SBAS、WAAS、PPP、PPK广域差分等技术之间的关系与区别。
RTK与RTD的区别,一个是载波相位差分.一个是码差分,并且RTK的定位精度要高一些. RTK与PPK的区别,一个是实时提供数据信息,一个是事后处理. WAAS是SBAS系统一个具体的实例,包含在SB ...
- 详解RTK,RTD,SBAS,WAAS,PPP,PPK,广域差分等技术之间的关系与区别
RTK与RTD的区别,一个是载波相位差分.一个是码差分,并且RTK的定位精度要高一些. RTK与PPK的区别,一个是实时提供数据信息,一个是事后处理. WAAS是SBAS系统一个具体的实例,包含在SB ...
- CGI，FastCGI和PHP-FPM之间的关系和区别
CGI,FastCGI和PHP-FPM之间的关系和区别. 什么是CGI? 早期的web server只可以处理简单的静态web文件,但是随着技术的发展出现动态语言如PHP,Python.PHP语言交给 ...
- php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
最新文章
- 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
- LeetCode 657 : Robot Return to Origin
- Android项目目录结构分析
- 2020-12-18 Matlab LQR 推导及简单应用
- ubuntu xfce4终端注销命令
- 骆驼和春天的Drools决策表
- Linux shell 脚本中， $@ 和$# 分别是什么意思？
- 报告漏洞后 马斯克宣布撤回FSD Beta 10.3版本
- VS2008启动调试，出现“ 已经找到网站 正在等待回应”
- 二次规划（quadratic programming）
- imperva数据库脱敏-server2008
- FPGA学习小例子：38译码器设计与仿真
- 股票量化实盘交易接口如何做回测？
- 电子邮件群发最好用的邮箱是哪个？
- Computer：教你实用一招，如何实现点击PPT文件即可播放，而避免打开PowerPoint软件
- 惠勒延迟选择实验（转）
- JavaSE基础知识(十八)--Java多态之向上转型(多态初步)
- 插入法排序c语言程序,C语言直接插入排序算法
- 5G网络的关键技术及特点，面临的挑战！
- git cherry-pick branch 与 git rebase branch 的区别