成為專業前端工程師前,先搞定CSS背景位置設定!

成為專業前端工程師前,先搞定CSS背景位置設定!
成為專業前端工程師前,先搞定CSS背景位置設定!

聽前端工程師的前輩都說,如果會設定圖片位置的話,其他的都不那麼困難了!

CSS background-position 用來定義背景圖片位置,是 CSS background 的屬性之一,常與 背景圖樣屬性 (background-image)背景重複參數 (background-repeat)搭配做網頁設計,來決定網頁背景圖片顯示位置,前端工程師表示可藉由調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。換言之在設計時需下水平位置與垂直位置的參數,可以利用數字、百分比或方向等為單位,讓圖片能夠在正確的位置呈現。

 

各種方向參數:

水平方向:left – 靠左對齊、center – 置中對齊、right – 靠右對齊

垂直方向:top – 靠上對齊、center – 置中對齊、bottom – 靠下對齊

 

CSS background-position 基本語法如下:

background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;

CSS中,一般使用於水平方向與垂直方向的組合,來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊。除此之外,前端工程師建議還可以微調「靠左與靠上的距離或百分比」來設計,舉例如以下所示:

background-position:right top; // 靠右靠上對齊
background-position:right center; // 靠右置中對齊
background-position:right; // 靠右置中對齊(如果您僅定義了一個參數,那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom; // 靠右靠下對齊
background-position:left top; // 靠左靠上對齊
background-position:left center; // 靠左置中對齊
background-position:left; // 靠左置中對齊(如果您僅定義了一個參數,那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom; // 靠左靠下對齊
background-position:top center; // 靠上置中對齊
background-position:bottom center; // 靠下置中對齊
background-position:center; //背景圖片水平位置與垂直位置均置中對齊

background-position:30px 60px; //靠左 30px 靠上 60 px 的位置(第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置(第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%; // 效果同上一行,靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值,另一個值默認為 50%。)

 

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

 

 

推薦文章:

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

前端工程師CSS實務教學應用-Div標籤(上)

 

為什麼ID選擇器對前端工程師如此重要?原因是…

 

程式課程選達內,美上市IT課程教育集團

 

鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了

 

網頁設計之表格標籤-HTML5教學入門課程

 

能跟你同手同腳的機器人,你知道是Python課程下的產物嗎?

前端工程師建議菜鳥必學CSS背景圖片固定模式!

前端工程師建議菜鳥必學CSS背景圖片固定模式!

身為前端工程師的前輩,真心建議入門者可以先去學CSS背景固定模式設定!學會後一切都會很輕鬆!

CSS background-attachment 可以決定背景圖片是否要跟著滑鼠滾動而上下移動,有三種不同的呈現方案,第一種為當滑鼠上下滾動時,背景圖片與網頁主體跟著上下滾動;第二種為當滑鼠上下滾動時,背景圖片相對位置固定不動,呈現效果就像是網頁主體與背景是分開的,;第三種為當滑鼠上下滾動時,背景圖片絕對位置固定不動,似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 通常與 背景圖樣設定 (background-image) 搭配設計。

CSS background-attachment 基本語法如下:

background-attachment: 顯示參數;

其實在CSS設定中,總共有三種可以使用的顯示參數來決定背景圖與網頁主體該以何種方式來搭配顯現,分別為 scroll(預設值,背景圖案的「相對位置」不會隨著滾動機制而移動,而網頁主體則會跟著滾動)、fixed(背景圖案的「絕對位置」不會隨著滾動機制而移動,而網頁主體則還是會跟著滾動,彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用)、local(背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例:

CSS background-attachment 各種參數的範例

See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

現在新一代前端工程師所設計的網頁多採滿版設計,其中的「background-attachment: fixed;」參數,常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用,做出網頁主體都浮在高質感的背景圖的效果。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

推薦文章:

那些前端工程師沒教你的CSS,今天一一告訴你!

 

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

 

如何成為前端工程師?首先你要先具備…

 

美國NASDAQ上市公司、外商IT教育培訓企業

 

台灣人工智慧實驗室研發偵測敗血症系統,準確率高達百分之八十!!

 

一堂教你從生活學來的的網路行銷課程

 

這寫作能力超強的人工智慧,若未管制,可能讓新聞的可信度參差不齊

CSS背景圖片重複顯示,前端工程師強烈建議一定要學會!

CSS背景圖片重複顯示,前端工程師強烈建議一定要學會!

只要當前端工程師的人都知道,CSS背景圖示重複顯現這項技巧很重要!

CSS background-repeat 用來設定背景圖片是否重覆顯示、重覆顯示的方向,通常與 背景圖樣設定 (background-image) 搭配使用。若背景圖片是比較小的圖片,則可以使用 background-repeat 將小圖片自動佈滿整個網頁背景,是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些,以免視覺雜亂);當背景圖片是一張具有顯示範圍較大的圖片,則可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。

 

CSS background-repeat 基本語法如下:

background-repeat: 重複參數;

前端工程師表示在CSS中,有四種可以使用的重複參數來決定重複方向或是是否重複,分別為 repeat(預設值,圖片會沿著 x 軸與 y 軸重複)、repeat-x(圖片會沿著x軸重複)、repeat-y(圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例:

 

CSS background-repeat 各種參數的範例

See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.

其實除了上例的四個參數,還有一個 inherit 屬性,是繼承父層屬性的意思。但因為大部分瀏覽器 (如IE) 不支援,可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以使用的人很少,因此前端工程師建議這部分可以省略不介紹。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

推薦文章:

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

前端工程師CSS實務教學應用-Div標籤(上)

 

達內教育開幕 培養台灣IT人才進入全球企業

 

這些人工智慧產業的領航者,他們正為人類的科技未來努力著!

 

認真上Python課程,讓你跟著產業景氣找工作

 

人人都是AI人工智慧訓練員!?你聽說過嗎?

成為前端工程師必會技能之二-CSS背景圖樣設定

成為前端工程師必會技能之二-CSS背景圖樣設定
成為前端工程師必會技能之二-CSS背景圖樣設定

想要當個稱職的前端工程師,會背景顏色設定還不夠,圖樣設定也要會哦!

除了純色背景之外,前端工程師其實也可以選擇使用背景圖樣設定(background-image)屬性,利用圖片取代純色作為網頁的背景。假設網頁的主題不複雜的話,高質感的圖片可以讓網頁整體看起來更加豐富。使用圖片當背景需要注意網頁在各種不同的平台(如電腦、手機等裝置)顯示出來的效果,確認背景圖片是否能夠與網頁主體和諧的搭配,並且要避免出現喧賓奪主的失誤。

背景圖樣設定 (background-image)屬性跟背景顏色設定 (background-color)屬性一樣,能夠設定的範圍除了網頁背景外,前端工程師也可以用來設計網頁內元素,如表格、DIV 區塊、H1-H6 等的背景圖樣,更可與背景重複屬性(background-repeat)背景固定模式屬性 (background-attachment)背景圖片位置屬性 (background-position)搭配做網頁設計。

CSS background-image 基本語法如下:

background-image: url("圖片URL位址");

CSS的background-image語法裡,其中 url 小括號內有三種可以使用的參數,分別為 none(預設值,不顯示圖樣)、inherit(繼承自上一層的圖片)以及本例的「 url(“圖片URL位址”) 」圖片網址這三種。以下有兩個範例分別為設定整個網頁的背景圖片以及網頁內元素的背景圖片。

CSS background-image 語法範例一、網頁背景

background-image: url("圖片URL位址");

CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定

div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");}

以上的範例中有兩個不同的 DIV 區塊,由第一個 DIV 區塊可以看到 background-image 預設的背景圖片,如果背景圖片尺寸小於 DIV 區塊時,圖片則會自動重複到填滿整個區域。而第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態只能沿著垂直方向重複。相關設定請參閱3. 背景重複設定 (background-repeat)

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

推薦文章:

前端工程師CSS自學寶典(一)-絕對單位

 

資深前端工程師淺談Box model(上集)

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

美國NASDAQ上市公司、外商IT教育培訓企業

 

網路行銷課程設定目標族群太難?可愛虛擬人物幫你撒下行銷大網

 

我終於會煮咖啡啦!幸虧有Python課程,實現這夢想!

 

Python課程發展出的AI連這也做得到…

 

 

成為前端工程師必會技能之一-CSS背景顏色設定

成為前端工程師必會技能之一-CSS背景顏色設定
成為前端工程師必會技能之一-CSS背景顏色設定

要成前端工程師條件有許多眉眉角角,其中之一是你要會背景顏色設定!

若要使用背景顏色設定 (background-color)屬性,可讓簡潔的純色背景可以襯托出網頁的主體、也可決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁,風格差異就會很大。其實 background-color 能夠使用的範圍除了網頁背景色外,也可以應用在設計表格、DIV 區塊、span 等網頁元素的背景顏色。

CSS background-color 基本語法如下:

background-color: 顏色名稱或色碼 ;

前端工程師建議如果要用background-color,可以利用CSS碼選擇使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼,挑選顏色請參考:網頁顏色代碼對照表

CSS background-color 語法範例一、網頁背景

html{background-color: 顏色名稱或色碼 ;}

CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色

div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}

前端工程師建議同樣的技巧還可用在其他的網頁元素,若想採用圖片當成背景,請參閱:2. 背景圖樣設定 (background-image)

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

 

推薦文章:

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

 

達內教育開幕 培養台灣IT人才進入全球企業

 

網路行銷課程進階(七)-擴大主題關鍵字,讓更多人看到你!!

 

了解過去,運用現在,展望未來,只有人工智慧能做到!

 

想要把SEO優化做到頂尖?那這東西你不能錯過!

前端工程師CSS自學寶典(二)-相對單位

前端工程師CSS自學寶典(二)-相對單位
前端工程師CSS自學寶典(二)-相對單位

在上一篇的前端工程師必備課程提到絕對單位,本篇則是以相對單位著手!

相對單位

em

前端工程師常用的em 是屬於相對單位,意思為每個子元素透過「倍數」乘以它的父元素 (上一層元素) 的值。如以下例子所示:在預設字體為 16px 的前題下,如果我們在CSS的每一層 div 區都設定為 1.5em,則第一層子元素就是 16px x 1.5 = 24px;第二層子元素就是上一層元素的 1.5 倍,為 24px x 1.5 = 36px;由此類推…到第五層就會是 16px x 1.5 x 1.5 x 1.5 x 1.5 x 1.5 = 121.5px。

See the Pen #demo-em by Tedutw (@Tedutw) on CodePen.

 

rem

rem 是相對單位,跟 em 的差別在於em 是每個元素乘以其上一層元素 (就是父元素) 的值;而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素,通常都是靠CSS來改變預設大小) 的 px 值。如下例所示:若預設字體大小為 16px,假設每一層利用CSS碼來設定,div 都使用 1.5rem,無論是第一層子元素還是第五層的子元素,大小永遠是 16px x 1.5 = 24px。

See the Pen #demo-rem by Tedutw (@Tedutw) on CodePen.

 

%

% 是相對單位,跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值,差別只是 em 是倍數單位;而 % 就是百分比單位。如在預設字體為 16px 的前題下,如果根據前端工程師建議在每一層 div 區都設定為 150%,則第一層子元素就是 16px x 150% = 24px;第二層子元素就是上一層元素的 150%,為 24px x 150% = 36px;由此類推…到第五層就會是 16px x 150% x 150% x 150% x 150% x 150% = 121.5px。

See the Pen #demo-% by Tedutw (@Tedutw) on CodePen.

 

larger / smaller

larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位,larger 為父層的 120%,smaller 為父層的 80%。

See the Pen #demo-larger, smaller by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦文章:

前端工程師CSS自學寶典(一)-絕對單位

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

那些前端工程師沒教你的CSS,今天一一告訴你!

 

美國NASDAQ上市公司、外商IT教育培訓企業

 

厭世代正風行?來上Java課程可以幫你扭轉困境!

 

網友看完這個網路行銷課程都給跪了

 

AI 人工智慧會做的事又多一樣!

 

 

 

 

前端工程師CSS自學寶典(一)-絕對單位

前端工程師CSS自學寶典(一)-絕對單位

想要自學成為專業前端工程師?字體單位教學你一定不能錯過!

在 CSS ,字體單位可以分為兩大類:絕對 (absolute) 單位以及相對 (relative) 單位:

分別介紹如下:

目錄
1. 絕對單位
  px (pixel 畫素)
  cm / pt / in / pc / mm
  large, medium, small

絕對單位

px (pixel 畫素)

px 為 CSS 最常用的單位。無論字體大小、區塊或其他元素的尺寸設定,都少不了它的蹤影。一般認為:px 會依據螢幕解析度而變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢?其實是因為在 CSS 裡面,絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中,無論設定多少 px,它就會精確的呈現,他都不會繼承沿襲上一層的父元素的尺寸。如同以下例子所示,就是若使用 px 這個單位來設定大小,那麼不管頁面上其他的尺寸設定,都不會影響到他。
而 px 的定義,理論上就是:一個像素 px 意思就是螢幕上最小的一點:16 px 就是 16 點大小。

See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.

  

cm、pt、in、pc、mm

這些單位比較適用於印刷的排版軟體,在前端工程師建議的CSS 比較少用。分別解釋如下:

  1. in:英吋,在 96 dpi 的系統上 1 in = 96 px。
  2. cm:公分,在 96 dpi 的系統上 1 cm = 37.795275593333 px。
  3. mm:公釐,在 96 dpi 的系統上 1 mm = 3.7795275593333 px。
  4. pt:印表機的每個「點」,定義為 1 pt = 1/72 in,如果在 72 dpi 的系統上 1 px = 1 pt,但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
  5. pc:picas,定義為 1 pc = 12 pt。
  6. in:英吋,在 96 dpi 的系統上 1 in = 96 px。

See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.

  

large, medium, small

前端工程師常用的字體大小的屬性有七種如下:

  1. xx-small:對應 h6 的標籤文字大小,為 medium 字體的 3/5 倍。
  2. x-small:沒有對應的標籤文字大小,為 medium 字體的 3/4 倍。
  3. small:對應 h5 的標籤文字大小,為 medium 字體的 8/9 倍。
  4. medium:對應 h4 的標籤文字大小,,根據 W3C 的規範,以 medium 預設 16px 為基礎
  5. large:對應 h3 的標籤文字大小,為 medium 字體的 6/5 倍。
  6. x-large:對應 h2 的標籤文字大小,為 medium 字體的 3/2 倍。
  7. xx-large:對應 h1 的標籤文字大小,為 medium 字體的 2/1 倍。

由上方可以看出,除了 x-small 沒有對應的標籤文字大小外,其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範,大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小,則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。

See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.

 

 

 

推薦文章:

前端工程師CSS自學寶典(二)-相對單位

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

 

達內教育評價-故事背後事實的真相甚麼是這樣?!

 

進化你的python課程;你也能救人一命

 

Python課程小新聞:AI辨識技術日臻成熟,是如何達成的呢?

 

零基礎也想當前端工程師?首先你要先會CSS邊框設定!

零基礎也想當前端工程師?首先你要先會CSS邊框設定!
零基礎也想當前端工程師?首先你要先會CSS邊框設定!

想成為前端工程師,首先一定要領解怎麼用邊框設定囉!

在 CSS 中常見的邊框 (border) 屬性,分別介紹如下:

目錄
  border-width: 邊線的寬度
  border-style:邊框樣式
  border-color:邊線的顏色
  border-top/left/bottom/right: 上/左/下/右框線
  border: 四邊框線

border-width: 邊線的寬度 

border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚),或是一個數值單位。

/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }

See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.

border-width:邊線的樣式

border-style 屬性指定邊框的樣式。以下列出在前端工程師處理時常見的 border-style 屬性以及顯示的結果:

/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }

See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.

border-color: 邊線的顏色

border-color 屬性是用來設定邊框的顏色。舉例如下:

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.

border-top/left/bottom/right: 上/左/下/右框線

根據前端工程師建議可以將上下左右方向和樣式、寬度、及顏色合起來而成為一個屬性。換而言之,border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子:

/*上邊框為實線,下邊框為點線
*/.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線,且寬度中等
*/.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線,下邊框為紅色虛線
*/ .leftbottom{border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;}

See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.

border: 四邊框線

假設四邊的邊框屬性都一樣,那我們可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色,而不必四個邊都用CSS碼描述一次。

container{...
border: 1px solid #000000;
...}

See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.

 

 

 

推薦文章:

前端工程師CSS實務教學應用-Div標籤(上)

 

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了

 

那些前端工程師沒教你的CSS,今天一一告訴你!

 

超強HTML5基礎教學(上):教你基本功,一秒就上手!

 

認真上Python課程,讓你跟著產業景氣找工作

 

 

 

 

 

 

資深前端工程師淺談Box model(下集)

資深前端工程師淺談Box model(下集)
資深前端工程師淺談Box model(下集)

對資深工程師來說,box model是真的必須要會,本篇會以邊框及留白做詳細說明!

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣:

在此篇要跟大家分享是關於box model的邊框及留白部分!

邊框

Border 是邊框,介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定,CSS 碼如下:

border: 邊界值 實線或是虛線 顏色;

邊框設定範例如下:

border: 1px solid #000000;

See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

根據以上範例,我們藉由CSS碼得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可,屬性不需要一個一個下,如:border-width、border-style、border-color 等等。

留白

根據前端工程師建議,padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。假設沒有設定 padding,內容的部分就會黏著邊框。padding 就會吃到背景色。

以下是沒有設定 padding 的例子,可以看見內容的字緊鄰黑色的邊框

See the Pen
margin:上 左右 下; (三個值)
by Tedutw (@Tedutw)
on CodePen.

以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。

See the Pen margin:上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.

在前端工程師眼中,Padding 的上下左右調整,語法跟 Margin 一樣,順序很重要。列舉如下:

padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上面留白值] [左邊與右邊留白值] [下面留白值]
padding:[上面與下面留白值] [左邊與右邊留白值] 
padding:[上面與下面與左邊與右邊留白值] 

 

 

 

推薦文章:

資深前端工程師淺談Box model(上集)

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

為什麼ID選擇器對前端工程師如此重要?原因是…

 

程式課程選達內,美上市IT課程教育集團

 

台灣人工智慧實驗室研發偵測敗血症系統,準確率高達百分之八十!!

 

能跟你同手同腳的機器人,你知道是Python課程下的產物嗎?

 

AI人工智慧訓練師薪水多少? Python課程沒告訴你的軼事!!

資深前端工程師淺談Box model(上集)

資深前端工程師淺談Box model(上集)
資深前端工程師淺談Box model(上集)

資深前端工程師都愛用的box model,其實一點也不難!

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣:

CSS-box-model
在盒子模式中,內容 (content) 是屬於最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

至於相關的CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下:

目錄
1. 邊界 (margin)

邊界

就好比我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以我們可以根據前端工程師建議對這四個邊逐一設定:

  1. margin-top (上邊界)
  2. margin-right (右邊界)
  3. margin-bottom (下邊界)
  4. margin-left (左邊界)

有三種方式可以設定邊界,分別為長度、百分比、以及 ‘auto’。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼):

See the Pen Margin by Tedutw (@Tedutw) on CodePen.

在這裡,上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

這樣寫會不會太麻煩一些? 會!其實根據前端工程師建議的方法來定義邊界尺寸的這四行 CSS 碼,是可以濃縮成一行的!以下會介紹:

Margin 邊界簡化 (一行文) 表示法

所有四個邊的邊界可以同時由一個 margin 屬性設定,只有一行文。它的語法如下:

margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼):

See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.

在這裡,邊界的表現跟最前面的例子一樣:上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

使用這種簡化的表示方法,重點在於數字的順序:第一個值是上邊界的值,第二個值是右邊界的值,第三個值是下邊界的值,而第四個值是左邊界的值。

這種簡化 CSS 的一行文標示方法,還有其他的方式,介紹如下:

margin:上 右 下 左; (四個值)

如上方例子所示

margin:上 左右 下; (三個值)

margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值] 

See the Pen margin:上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.

 

margin:上下 左右; (二個值)

margin: [上面與下面邊界值] [右邊與左邊邊界值] 

See the Pen margin:上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.

margin:上下左右; (一個值)

margin: [上下左右邊界值] 

See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

 

 

推薦文章:

資深前端工程師淺談Box model(下集)

為什麼ID選擇器對前端工程師如此重要?原因是…

那些前端工程師沒教你的CSS,今天一一告訴你!

達內教育開幕 培養台灣IT人才進入全球企業

Java課程讓我百萬年薪科技新貴之路只需要六個月!

百度CEO拿下全球AI人工智慧領導第三名,緊追蘋果微軟!!

網頁設計課程教你變身化妝師,幫自己的網站弄美美的!