`

CSS-display与visibility

CSSXHTMLHTML 
阅读更多
<!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>
        <LI>将元素设为 Visibility:hidden，隐藏该元素内容。但在页面上保留该元素的空间。</LI>
<LI>将元素设为 Visibility:visible，元素可见。</LI>
    </UL>
<ul>
<li>
visibility: visible<br/>
/* 元素可见，默认值 */<br/>
visibility: hidden
/* 元素不可见，但仍然为其保留相应的空间 */<br/>
visibility: collapse<br/>
/* 只对 table 对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden 。 */<br/>
visibility: inherit<br/>
/* 继承上级元素的 visibility 值。 */<br/>
</li>
</ul>
<ul>
<li>
display: none<br/>
/* 元素不可见，并且不为其保留相应的位置 */<br/>
display: block<br/>
/* 表现为一个块级元素（一般情况下独占一行） */<br/>
display: inline<br/>
/* 表现为一个行级元素（一般情况下不独占一行） */<br/>
</li>
</ul>
</body>
</html>

以上内容非原创，都是从别人的站点上东拼西凑，记录下来的。
在此感谢上述相关内容的原创者！
分享到：
| 定义js函数，并让其立即执行
评论
发表评论

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

相关推荐

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