【前端新手日記】網頁排版必懂基礎！CSS盒子模型(Box Model)－文科少女學程式

前陣子狂被DOM這個難搞的東西摧殘~~
這次就來聊點簡單，但卻非常基礎的HTML網頁排版必懂的CSS概念吧！

這個基礎的CSS概念就是「盒子模型(Box Model)」。
如果打開過瀏覽器的開發者工具，應該有看過下面這個好幾個方格的圖。

這個東西也就是今天的主題「盒子模型(Box Model)」！

盒子模型(Box Model)是什麼？
每個HTML元件在瀏覽器的顯示中，都會是一個方格，
想要調整這個方格，就可以透過CSS的盒子模型來操作。

盒子模型的組成分為四個部分，由內而外分別如下。
content：文字、圖片等本身。
padding：從文字或圖片本身到外面邊線之間的內距。
border：也就是剛剛所提到的邊線。
margin：邊線到其它元件的盒子邊線的空間。

我知道這樣說很難理解，讓我們用圖片來一探究竟吧！

大家看得出來這個圖片中，盒子模型的四個組成分別是指那些嗎？
在這個圖片中～
content就是文字的部分，也就是被籃框框起來的部分。
接下來padding的部分，則是從藍框向外到紅框的部分。
border是紅線的部分。(沒有特別去設定border的話，不會出現線條，會以透明的線條呈現)
margin是外面白底的部分(可以想像有一個隱形的外框將這個黃色的方格框起)。

操作盒子模型(Box Model)的方式
padding & margin
margin的設定方式也跟padding一樣，最少只需要設定一個數字就可以了，單位則是使用px。
例如，如果我想要操調整上面那個例子的padding部分，就寫成以下這樣就可以了。
(請參考紅框的部分)

請注意！如果在設定padding和margin時，只設定一個數值的話，
這個數值會套用到從中間往上下左右的間距。(綠箭頭的部分，指的是padding)

但是其實還是可以透過更靈活的設定方法，只單純設定一個方向的間距，
或一次設定多個方向不同的間距喔！
接下來就讓文科少女把所有設定的方式都整理給大家參考~

方法一、只設定一個數值
只設定一個數值的話，就如同前面說的，會讓上下左用的間距都套用同一個數值。
例如：
margin: 50px;
就代表從上下左右的border線往外個延伸10px的間距。

方法二、設定兩個數值
除了設定一個數值外，也可以透過設定兩個數值，來調整margin和padding。
設定兩個數字的時候，這兩個數字分別代表的是上下&左右的值。
第一個數字調整上下，第二個數字調整左右。
例如：
padding: 100px 50px;
分別就是淡藍色的部分是套用100px，粉紅色的部分則是套用50px

方法三、設定三個數值
還可以設定三個數值來調整margin和padding，
這三個數字分別代表上、左右、下的值。
第一個數字調整上，第二個數字調整左右，第三個數字調整下。
例如：
padding: 100px 50px 20px;
方格中的淡藍色的部分是套用100px，粉紅色的部分則是套用50px、綠色的部分則是套用20px

方法四、設定四個數值
也可以設定四個數值來調整margin和padding，
分別設定上、右、下、左的數值。
第一個數字調整上，第二個數字調整右，第三個數字調整下，第四個數字調整左。
例如：
padding: 150px 80px 50px 2px;
方格中的淡藍色的部分是套用150px，粉紅色的部分則是套用80px，綠色的部分則是套用50px，橘色部分是套用2px。

小訣竅分享！
在margin&padding的部分有一個設定的小訣竅～
在設定一個以上的數值時，其實不用去死背這幾個數字到底代表哪個方向，
觀察一下就可以發現這些數字設定的方向都是從上方往順時針方向設定的數值。
＝＞上、右、下、左
＝＞上下、右左
＝＞上、右左、下

只要記下這個共通點，就不用刻意死背囉！

方法五、加上top、bottom、left、right來使用
如果只是想要微調單一個方向的距離的，讓文字往右移一點，或往移一點，就可以使用這個方式。
使用方式是在margin和padding後面加上'-'符號，再加上想要調整上下左右那一個方向的距離。
例如：
padding-top: 150px;
padding-left: 80px;
方格中的淡藍色的部分是套用150px，綠色的部分則是套用80px。

border
最後一個部分是border，border是邊線、邊框。
如果想要在某些內容加上框線，就可以設定border。
boder的設定方式稍微有點不一樣，要設定三個數值，
而且有兩種設定的方式。

方式一、一次設定四個方向的邊框線
border: 邊框線顏色邊寬線樣式邊框線粗細
例如：
border: red solid 3px;
方格中的紅框，就是我們設定的border

方式二、只設定單一的邊框線
上面的方式是一次設定四邊的邊框線，
如果想要單設定一邊的邊框線，也是可以的喔！
一樣只要再後面加上top、bottom、left、right，
就可以只設定單一的邊框線。
例如：
border-top: blue solid 3px;
方格中的藍框，就是我們設定的上方的border

border的邊框線樣式有哪些
前面有提到border邊框線樣式的設定，這邊快速來看一下border有哪些樣式值可以設定。
在設定版面時，就可以好好活用這些樣式。
第一種 solid

第二種 double

第三種 dotted

第四種 dashed

新手上路！活用盒子模型(Box Model)的小撇步
最後告訴大家我個人使用盒子模型的小撇步~

有時候在微調版面的時候，會不清楚自己的文字、圖片或icon的實際盒子範圍，
這個時候就可以把要微調的部分，加上border。
這樣不管是要調整大範圍的排版(像是要橫排還是直排)，
或是小部分的微調(像是往左一點、往下一點等)，
都可以一目了然地完成調整。