3.5 显示属性

正如所有元素都有position属性,所有元素也都有display属性。尽管display属性的值有很多,但大多数元素display属性的默认值不是block,就是inline。要是你在我们讲第1章的时候睡着了,我单独给你讲一讲块级元素与行内元素的区别。

  • 块级元素,比如段落、标题、列表等,在浏览器中上下堆叠显示。
  • 行内元素,比如aspanimg,在浏览器中左右并排显示,只有前一行没有空间时才会显示到下一行。把块级元素变成行内元素(或者相反)的魔法如下。
  1. /*默认为block*/
  2. p {display:inline;}
  3. /*默认为inline*/
  4. a {display:block;}

这种转换可以让原先的行内元素填满其父元素。本书后面在介绍到CSS下拉菜单的时候,就会用到这个技巧。

display属性还有一个值有必要提一下,就是none。把元素的display设定为none,该元素及所有包含在其中的元素,都不会在页面中显示。它们原先占据的所有空间也都会被“回收”,就好像相关的标记根本不存在一样。与此相对的是visibility属性,这个属性最常用的两个相对的值是visible(默认值)和hidden。把元素的visibility设定为hidden,元素会隐藏,但它占据的页面空间仍然“虚位以待”。