CSS基礎教學(14)--區塊隱藏與顯示

區塊的隱藏與顯示，在網頁上有滿多的應用，主要是要搭配 Script，做些 Dynamic HTML (簡稱 DHTML) 的效果，也就是訪客的一些動作，讓網頁有一些動態變化的效果，例如選單之類的東西

隱藏與顯示只是 DHTML 中的一部份而已，不代表 DHTML 等於區塊隱藏與顯示

在本篇中還不會提到如何做 DHTML，因為還未提及 Script 的語法，這裡先來看看 CSS 語法

在 CSS 中，要設定區塊的隱藏與顯示有兩個屬性可用，即 display 與 visibility，語法如下

display : none | inline | block | inherit ; visibility : visible | hidden | inherit ;

例如

<DIV> 這裡在區塊的上面 </DIV> <DIV style="border:1px solid red;background:yellow;"> 這是區塊的內部 </DIV> <DIV> 這裡在區塊的下面 </DIV> <HR/> <DIV> 這裡在區塊的上面 </DIV> <DIV style="display:none;border:1px solid red;background:yellow;"> 這是區塊的內部，是要被隱藏的內容 </DIV> <DIV> 這裡在區塊的下面 </DIV> <HR/> <DIV> 這裡在區塊的上面 </DIV> <DIV style="visibility:hidden;border:1px solid red;background:yellow;"> 這是區塊的內部，是要被隱藏的內容 </DIV> <DIV> 這裡在區塊的下面 </DIV>

上例中分了三個區域，第一區主要是要做對照組，表示當不加上隱藏語法時會呈現什麼樣子，第二區是使用了 display 屬性的語法，第三區則是 visibility。我們可以看到，在第二及第三區中都看不到黃色的區塊，就就表示它們已經都被隱藏了，但我們也發現到，第二區與第三區的樣子是不同的，在第二區中，「這裡在區塊的上面」與「這裡在區塊的上面」這兩行文字是緊貼著呈上下兩行的，但第三區中，兩行文字中間還多了一行空白

沒錯，這兩個屬性的效果是有差別的，visibility 隱藏時，原本該區塊所在的空間仍會保留著，而 display 隱藏時，則會連同原佔有的空間都會不見

下面再來看看 display 的其他屬性值
inline：區塊的內容會以行間內容的形式來呈現
block：區塊內容會以獨立區塊的形式來呈現

這樣說可能不太容易理解，直間來看例子好了

前面的內容 <DIV style="border:1px solid red;background:yellow;"> 這是 DIV 的內部 </DIV> 中間的內容 <SPAN style="border:1px solid red;background:yellow;"> 這是 SPAN 的內部 </SPAN> 後面的內容 <HR/> 前面的內容 <DIV style="display:inline;border:1px solid red;background:yellow;"> 這是 DIV 的內部(display:inline;) </DIV> 中間的內容 <SPAN style="display:inline;border:1px solid red;background:yellow;"> 這是 SPAN 的內部(display:inline;) </SPAN> 後面的內容 <HR/> 前面的內容 <DIV style="display:block;border:1px solid red;background:yellow;"> 這是 DIV 的內部(display:block;) </DIV> 中間的內容 <SPAN style="display:block;border:1px solid red;background:yellow;"> 這是 SPAN 的內部(display:block;) </SPAN> 後面的內容

同樣上例中也是分為三個區，第一區也是對照組，呈現出原本 DIV 與 SPAN 的效果，可以看到 DIV 裡的內容不會跟前後文呈現在同一行，而是會換行另成一個區域，而 SPAN 裡的內容則是會跟前後文呈現在同一行

第二區則是將 DIV 與 SPAN 標籤都加上 display:inline; 的設定，結果我們看到，SPAN 沒受影響，但 DIV 卻變成跟 SPAN 一樣，會跟前後文呈現在同一行

再看看第三區，DIV 與 SPAN 標籤加上 display:block; 的設定後，DIV 沒受影響，但 SPAN 卻變成跟 DIV 一樣，不會跟前後文呈現在同一行

所以我們即可知道，inline 的效果即是跟 SPAN 的效果一樣，而 block 則是會像 DIV 一樣的效果

其實 display 與 visibility 還有其他的屬性值，只不過我也還不太清楚那些的效果，所以就不寫了 ^_^"

--gs--
{CSS基礎教學}{CSS display}{CSS visibility}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。