網頁前端菜鳥教學-display與visible屬性差異
本篇將會介紹網頁前端排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。
對於 CSS 語法來說，網頁前端的每個元素都是一個矩形盒（rectangular box）模型。使用「display」屬性可以決定「盒（box）」的呈現方式。
又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符
以下的範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。
上述範例的網頁前端 CSS 語法設定如下：
inline 元素只佔用可用寬度的最大值，並不強制換行。
將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以看出 CSS 的語法是如何設定的。
上述範例的 CSS 語法設定如下：
「display:none」用來將元素隱藏使用，元素隱藏後就不佔用任何空間，在網頁前端頁面顯示時不會展現出來，就好像該元素不存在一樣。
以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。
上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值，如 list-item、table、table-cell、table-column、grid 等，會在往後的章節中一一介紹
visibility 屬性一般用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden
當我們想要隱藏園素食，有兩個方法可以執行：一是上一段介紹的，將「display」屬性設為「 none」參數；二是將「visibility」屬性設置為「hidden」來隱藏元素。
注意：以上兩個方法雖然都能將元素隱藏，但都呈現出不同的結果：
被「display:none」隱藏後的元素，就不會佔用任何的空間，就好像它從來都不存在一樣；而被「visibility:hidden」隱藏後的元素，雖然在網頁前端不會顯示，但仍佔用了對應的空間（就是被隱藏的元素有多大，網頁上空出來的空間就有多大），所以仍會影響排版。範例如下：
我們準備要將以下的例子，第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。
將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下：
由以上例子我們可知，同樣都是將元素隱藏，第一個<p>元素雖然被「visibility:hidden」隱藏了，但是仍遺留下空間；第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」，連原本的位置都不見了。
排版的另一個 CSS 屬性：Positioning Elements。網頁前端下一章我們將會一一介紹。
CSS：display 屬性
display:block
對於 CSS 語法來說，網頁前端的每個元素都是一個矩形盒（rectangular box）模型。使用「display」屬性可以決定「盒（box）」的呈現方式。
又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符
以下的範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。
See the Pen display: block by Tedutw (@Tedutw) on CodePen.
上述範例的網頁前端 CSS 語法設定如下：
span.block{
display:block;
}
display:inline
inline 元素只佔用可用寬度的最大值，並不強制換行。
將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以看出 CSS 的語法是如何設定的。
See the Pen display: block by Tedutw (@Tedutw) on CodePen.
上述範例的 CSS 語法設定如下：
span{
display:inline;
}
display:none
「display:none」用來將元素隱藏使用，元素隱藏後就不佔用任何空間，在網頁前端頁面顯示時不會展現出來，就好像該元素不存在一樣。
以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。
See the Pen display: none by Tedutw (@Tedutw) on CodePen.
上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值，如 list-item、table、table-cell、table-column、grid 等，會在往後的章節中一一介紹
visibility 屬性
visibility 屬性一般用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden
當我們想要隱藏園素食，有兩個方法可以執行：一是上一段介紹的，將「display」屬性設為「 none」參數；二是將「visibility」屬性設置為「hidden」來隱藏元素。
注意：以上兩個方法雖然都能將元素隱藏，但都呈現出不同的結果：
被「display:none」隱藏後的元素，就不會佔用任何的空間，就好像它從來都不存在一樣；而被「visibility:hidden」隱藏後的元素，雖然在網頁前端不會顯示，但仍佔用了對應的空間（就是被隱藏的元素有多大，網頁上空出來的空間就有多大），所以仍會影響排版。範例如下：
我們準備要將以下的例子，第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。
See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.
將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下：
See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.
由以上例子我們可知，同樣都是將元素隱藏，第一個<p>元素雖然被「visibility:hidden」隱藏了，但是仍遺留下空間；第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」，連原本的位置都不見了。
排版的另一個 CSS 屬性：Positioning Elements。網頁前端下一章我們將會一一介紹。
更多閱讀:
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？
你是我的眼！Google AI 眼鏡助視障朋友「看見」世界
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
今年10月即將入手的新身分證，它的UI設計有啥亮點？
網頁前端要成功關鍵,就是JavaScript!!
分不清Javascript變量命名?前端工程師說給你聽!
Javascript初學者課程(18)-創造物件
