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

資深前端工程師淺談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課程沒告訴你的軼事!!

發佈留言

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