網頁前端必修課-CSS排版屬性:display.visible

網頁前端必修課-CSS排版屬性:display.visible

 

網頁前端必修課-CSS排版屬性:display.visible
網頁前端必修課-CSS排版屬性:display.visible

 

這兩個CSS排版屬性在學習網頁前端時是不可或缺的知識,今天讓我們一起來學習!

 

本篇介紹網頁前端排版的兩個 CSS 屬性:display 屬性與 visibility 屬性。

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 等,將會在往後的章節中一一介紹

CSS: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。

 

 

 

精選延伸閱讀:

用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

今年10月即將入手的新身分證,它的UI設計有啥亮點?

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

前端工程師初學者的入門天地!(22)數學物件

不只前端工程師,還有後端跟全端!!!???

懂JavaScript,網頁前端開發之路就輕鬆點啦~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *