網頁前端CSS必學兩屬性:display與visible
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 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」都是最常碰到的的 d...
留言
張貼留言