CSS基礎教程:CSS的display屬性

操作HTML元素的訣竅在于明白它們工作的方法在于沒有特定的形式。一些由標簽組成的大部分頁面可以設定任何樣式。瀏覽器默認的樣式里的大部分html元素由字體樣式、margin,padding組成，本質上是顯示類型。

　　display屬性基本上分為inline,block,和none。
　　inline就像它的本意――顯示為inline的元素為行。strong,anchor錨和em強調元素默認是行。
　　block元素前后換行。標題和段落元素是塊元素。
　　none，意思不顯示元素，在可用性上可以實現漂亮的效果，交替樣式或hover效果的高級運用。

　　設定表現可以更好運用在網頁制作上。

h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

　　設定標題h1為行元素，可以和后面的元素在同一行。

#navigation, #seeAlso, #comments, #standards {
    display: none;
}

　　上面的代碼可以使用在打印樣式里，比如在導航使用，可以在打印時不顯示導航這些無關緊要的東西。

　　display:none和visibility:hidden;的不同在于display:none完全取消元素的顯示，visibility:hidden保持元素位置但視覺上的內容不可見。例如，如果3的第二段設置為display:none，第一段將僅跟在第三段，如果設置為visibility:hidden，段落間就會空出。

表格

　　明白表格相關的表現屬性值最好的方法想象html表格。table是最初的表現，你可以使用table-row模擬table-cell模擬td。

　　display屬性更進一步，可以通過使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。現在可以直接使用columns構建表格，比在html中使用行構建快速。

　　最后，inline-table設定表格前后不換行。

　　使用CSS表格會嚴重損害可用性。HTML應該用來傳遞語意，所以如果你有表格數據，那可以使用HTML表格。使用CSS表格僅僅會產生糟糕的數據如果沒有CSS數據將不可讀。

其他表現形式

　　list-item列表項目，就像期待HTML里的li元素。它們需要嵌套在元素里面顯示。 
　　run-in元素的表現形式由它的父元素決定。IE和Mozilla都不支持。
　　compat根據上下阿文決定表現形式，同樣IE和Mozilla都不支持。
　　maker僅僅使用在:before和:after偽元素，設定content屬性的表現。content屬性默認表現就是maker，所以它只有在覆蓋原來屬性時才有用。
　　content屬性，它的默認就是maker，所以只有在覆蓋原來屬性時使用。