CSS樣式中display屬性用法指導(dǎo)
本文和大家重點討論一下CSS display屬性的使用，CSS display屬性值基本上分為inline,block,和none；block元素前后換行，標(biāo)題和段落元素是塊元素；而none，意思不顯示元素，在可用性上可以實現(xiàn)漂亮的效果，交替樣式或hover效果的高級運用。
CSS display屬性
操作HTML元素的訣竅在于明白它們工作的方法在于沒有特定的形式。一些由標(biāo)簽組成的大部分頁面可以設(shè)定任何樣式。瀏覽器默認的樣式里的大部分html元素由字體樣式、margin,padding組成，本質(zhì)上是顯示類型。
CSS display屬性基本上有inline,block,和none三個屬性值。
inline就像它的本意??顯示為inline的元素為行。strong,anchor錨和em強調(diào)元素默認是行。
block元素前后換行。標(biāo)題和段落元素是塊元素。
none，意思不顯示元素，在可用性上可以實現(xiàn)漂亮的效果，交替樣式或hover效果的高級運用。
設(shè)定表現(xiàn)可以更好運用在網(wǎng)頁制作上。
- h1 {
- display: inline;
- font-size: 2em;
- }
- #header p {
- display: inline;
- font-size: 0.9em;
- padding-left: 2em;
- }
設(shè)定標(biāo)題h1為行元素，可以和后面的元素在同一行。
- #navigation, #seeAlso, #comments, #standards {
- display: none;
- }
上面的代碼可以使用在打印樣式里，比如在導(dǎo)航使用，可以在打印時不顯示導(dǎo)航這些無關(guān)緊要的東西。
CSS display:none和visibility:hidden;的不同在于CSS display:none完全取消元素的顯示，visibility:hidden保持元素位置但視覺上的內(nèi)容不可見。例如，如果3的第二段設(shè)置為display:none，第一段將僅跟在第三段，如果設(shè)置為visibility:hidden，段落間就會空出。
原文鏈接：http://www.soidc.net/articles/1213781627945/20070521/1214037411248_1.html
【編輯推薦】
