`
wandejun1012
  • 浏览: 2689645 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）

XHTMLHTML 
阅读更多

 这段时间一直对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一目了然！ 

分享到：
| js中innerHTML与innerText的用法与区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics