uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(45)
網頁前端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」都是最常用的 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。
相關文章:
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!AI機器狗Aibo成最新愛寵 真狗會被取代嗎？今年10月即將入手的新身分證，它的UI設計有啥亮點？你是我的眼！Google AI 眼鏡助視障朋友「看見」世界前端工程師JavaScript不藏私教學大公開-數學物件前端工程師基礎開講看過來,零基礎也能學習網站前端! uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(8)
零基礎怎麼學習網站前端?
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(7)
想中途出家成為前端工程師, 自學能達成嗎?
今天要跟大家分享的文章是關於零基礎如何自學成
前端工程師。目前網路發展迅速，前端也成了很重要的崗位之一，前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真的很簡單，很多想要轉行進入 IT 行業的新手會選擇
前端工程師。那要怎麼自學? 下面就一起來看一看文章吧~首先我們學習前端，要知道前端的三個大內容，
HTML5、
CSS、
JavaScript，其中
HTML 和
CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習
JavaScript 等等。
一、首先我們要理解
HTML、
CSS、
JavaScript 分別是什麼?
HTML 就相當於一個人，
CSS 相當於一個人穿著的衣服，
JavaScrip t相當於讓這個人做什麼動作，這樣一形容呢，我們就很好理解了，這個人就是網站，需要有 header 頭，body 身體，footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的
CSS 樣式，網站裡的動態效果就都是我們的
JavaScript 去實現的。
二、零基礎學
前端工程師難學嗎?
想知道
前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁，相信你就會知道。我們用到的軟件呢，對於入門級來說我們一般推薦大家用 DreamWeaver，新建一個
HTML 後，出現的界面是這樣的，
下面我們開始輸入原始碼，我們可以看到這裡有這樣的原始碼<body></body>，這個就是我們網頁的身體，我們接下來要輸入的內容都是在這中間輸入的，這個括號表示的標籤，標籤都是一前一後的，成對兒出現的，除了一些特殊的標籤，隨後我們再一一給大家講解。現在我們輸入點內容，看看效果。
我們輸入一個標籤<div><div>，點擊右上角的地球瀏覽一下，會發現彈出了一個空網頁，什麼也沒有，那是因為我們現在只書寫了
HTML，還沒有寫
CSS，簡單來說就是，我們創建了一個東西在頁面裡，但是還沒有設置這個東西長什麼樣子，現在我們在設置它的樣子，
CSS">
1、我們為了給這個 div 設置樣式，所有先給它起個名字不然，電腦不知道我們要給誰加樣式，class="aaa" 的意思是起名為aaa
2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是
CSS，我們整個網站要加的所有樣式都是寫在這個中間的。
3、我們在style裡寫樣式，電腦首先要知道我們給誰加樣式，所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式，電腦會自動把.(點)後面的名字，跟下面body裡的名字做一個匹配，這樣電腦就知道，哦~原來你是要給這個div加樣式呀，
4、然後我們把要給這個div加的樣式寫在大括號裡，Width:100px; 意思是這個div的寬是100像素，height:100px; 意思是高是100像素，background-color:#FF0000;意思是背景顏色是#FF0000這個顏色，
注意：
(1)這裡我要給大家解釋一下，大家別看這麼多原始碼，這麼多專有名詞，其實軟件有提示，像下面這樣，直接輸入第一個字母後面的專有名詞就出現了，直接選中就行了，連專有名詞都不用背，前端真的很簡單，
輸入 W 和輸入 h，會自動彈出名詞下拉選單
(2)每一個專有名詞都有提示，說到這裡，不會英語的同學就不要給自己找藉口說英語不好，學不會程式設計了。雖然說很簡單，但是要想真真的把前端學好是需要下功夫的，主要就是要堅持。
下面我們繼續，設置好了以後，我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面，那恭喜你，你成功了！這是成為前端工程師的第一步，請繼續鎖定其他文章，讓我們一起進步～
推薦閱讀：
前端工程師必備神器Emmet使用教學(一)快速產生標籤名稱 前端工程師必備神器Emmet使用教學(二)階層與群組 前端工程師必備神器Emmet使用教學(三)元素與流水編號 前端工程師必備神器Emmet使用教學(四)顯示文字與自訂屬性 暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~ 透過對的Java課程,讓你從茫然的畢業生中脫穎而出! 單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺 uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(14)
前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第四篇-快速設定顯示文字與自訂屬性值
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(7)
前端工程師開講,教你怎麼設定流水編號也告訴你什麼是複製元素!!
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(4)
前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第二篇-父子階層與群組
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(14)
前端工程師要告訴你其實語法裡面彼此也存在著密不可分的關係!!讓我們來看看到底能多複雜?
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(2)
前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第一篇-快速產生標籤名稱
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(56)
資深前端工程師怎麼利用HTML5繪製路徑動畫呢?趕緊來看看!!
uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣(29)
