这段时间一直对display属性的block,inline,none和visibility属性的visible,hidden一直很模糊,总觉得很难理解,通过下面这个实例,就可以很好的牢记这几者之间的区别:
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">
display(block,inline,none),visibility(visible,hidden)之间的关系及区别<html xmlns="http://www.w3.org/1999/xhtml" >
display(block,inline,none),visibility(visible,hidden)之间的关系及区别<head>
display(block,inline,none),visibility(visible,hidden)之间的关系及区别    <title>Untitled Page</title>
display(block,inline,none),visibility(visible,hidden)之间的关系及区别</head>
display(block,inline,none),visibility(visible,hidden)之间的关系及区别<body>
display(block,inline,none),visibility(visible,hidden)之间的关系及区别    <h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>
display(block,inline,none),visibility(visible,hidden)之间的关系及区别    <P><SPAN ></html>

点击Inline,Block,None,Hidden,Visible按钮,将会出现不同的结果。

通过对比以上的显示,可以对display属性的block,inline,none和visibility属性的visible,hidden一目了然!

相关文章: