教你玩转CSS Display(显示) 与 Visibility（可见性）

隐藏元素 - display:none或visibility:hidden

隐藏一个元素能够经过把display属性设置为”none”，或把visibility属性设置为”hidden”。可是请注意，这两种方法会产生不一样的结果。

visibility:hidden能够隐藏某个元素，但隐藏的元素仍需占用与未隐藏以前同样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

    h1.hidden {visibility:hidden;}

 

 display:none能够隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，并且该元素本来占用的空间也会从页面布局中消失。

    h1.hidden {display:none;}

 

 CSS Display - 块和内联元素

块元素是一个元素，占用了所有宽度，在先后都是换行符。

块元素的例子：

• <h1>
• <p>
• <div>

内联元素只须要必要的宽度，不强制换行。

内联元素的例子：

• <span>
• <a>

如何改变一个元素显示

能够更改内联元素和块元素，反之亦然，能够使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

    li {display:inline;}

 

 下面的示例把span元素做为块元素：

    span {display:block;}

 

注意：变动元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不容许有它内部的嵌套块元素。