導讀：這篇文章聚焦於「CSS 版面 編輯」，幫你快速掌握重點。
延續基礎網頁設計(2)-CSS篇之一後，接下來要瞭解的是CSS版面編輯-排版的部分。
CSS版面編輯
隨著CSS的發展，有CSS2、CSS3等等。而現在的瀏覽器，大多數都能夠回應CSS2、3的編寫內容。
雖然CSS3是後發展的，大多改善CSS2的缺點。但是，在CSS2與CSS3之間，仍然有一些不一樣的地方，有的情況CSS2反而能夠更加快速的達到想要的效果。大部分的狀況，還是端看個人喜好與習慣了。
認識CSS單位
| 單位 | 說明 | 範例 |
|---|---|---|
| px | 固定像素，最簡單直接 | 1px = 螢幕上1個點 |
| em | 根據繼承大小的倍數計算 | 父層16px、2em → 32px |
| % | 根據父層最大空間的百分比 | 父層400px、50% → 200px |
版面編排
因為html為由上到下的編排方式，造成我們每個區塊都是並列向下的，但很多時候我們想要以水平的方式排列區塊。這時就需要用到排版的語法了。在這裡介紹CSS2較常用的float與CSS3使用的flexbox。
Float
float: left/right/none
內容相對較簡單，經由float可以顧名思義的浮動此區塊，當選擇浮動向左排列時，會使該區塊以不換行的方式水平靠左排列。而none為預設不浮動。
另外，如果想要A物件在水平靠左，B物件水平靠右，只需要讓A向左浮動排列而B向右浮動排列即可。
值得注意的是，h1,h2,h3,h4,h5,h6,span,img會被默認為文字元素，而float只會改變區塊元素的型態。因此，如果想要水平排列文字元素的話，需要加入display:block;將文字元素轉換為區塊元素。
Flexbox
為CSS3的新版排版方式，將display屬性設置為flex或inline-flex，就能將該元素變成一個伸縮容器，在此元素內的所有物件都會受其影響。而flex則表示內容元素強制換行-向下並列；inline-flex則表示內容元素不換行並列。
也就是說，如果想要許多圖片以水平方式排列，就要在他們的父層將屬性改為display: inline-flex;就會達到想要的效果。
而較常用的細項屬性:
| 屬性 | 可選值 | 說明 |
|---|---|---|
| display | flex / inline-flex | 內容元素的排列方式 |
| flex-direction | row / column / row-reverse / column-reverse | 內容元素的排列順序方向 |
| justify-content | flex-start / flex-end / center / space-between / space-around | 水平對齊的對齊方式：靠左對齊/靠右對齊/置中/左右對齊/平均分配欄寬對齊 |
| align-items | flex-start / flex-end / center / stretch / baseline | 垂直對齊的對齊方式：靠上對齊/靠下對齊/垂直置中對齊/全部拉滿最大高度/以baseline對齊 |
更多詳細的內容可以參考 : MDN Flexbox 教學 或 https://www.oxxostudio.tw/articles/201501/css-flexbox.html
區塊美化
如div、ul、li、等等容器都屬於區塊元素，以下可選擇性將區塊美化:
back-ground-color:可填入文字顏色(red,blue...)也可以填入HEX代碼
**HEX代碼**
HEX為十六進位制，不同於我們日常使用的十進位制。顏色可以分成RGB三原色，並且以每個原色區分256色。
而十六進位的表示法則為0.1.2.3.4.5.6.7.8.9.10.A.B.C.D.E.F，因此256色則被表示為00到FF，這也就是為什麼HEX表示法都會是6個數字所組成(RRGGBB)了。
在選色的過程中，時常會有想要細微調整色調或者知道該色但不知道如何表示，在此可以載入一個外掛，方法也很簡單:Ctrl + Shift + P 打開setting後，輸入install按Enter，輸入套件名稱"Colorpicker"並按Enter就可以了。
隨後可以從工具列的工具(Tools)中找到，使用時只要在"back-ground-color :"後按下colorpicker，選擇想要的顏色後按下OK，就會自動轉換並輸入相對應的HEX代碼了。
| 屬性 | 範例 | 說明 |
|---|---|---|
| width | 30px | 寬度 |
| height | 30px | 高度 |
| border | 1px solid red | 區塊邊框為1px紅色實線 |
| border-radius | 3px | 區塊邊框收圓角 |
| box-shadow | 2px 2px 3px black | 該區塊以向右2px向左2px並且擴散程度3px的方式產生黑色陰影 |
文字美化
- font-family: Arial; (改變字型)
- color: red; (改變文字顏色) //請注意color是改變文字顏色不是背景顏色!//
- font-size: 16px; (改變字體大小)
- line-height: 1.6; (改變行高，如果將該區塊的行高與區塊高度設置相同，則能夠藉此達到文字垂直置中的效果--height: 30px; line-height: 30px;)
- text-align: center; (能夠使文字水平置中)
細微調整
- margin-left: 1px; (單獨向外推開左邊1px)
- margin-right: 1px; (單獨向外推開右邊1px)
- margin-bottom: 1px; (單獨向外推開下方1px)
- margin-top: 1px; (單獨向外推開上方1px)
- padding-left: 1px; (單獨向內推開左邊1px)
- padding-right: 1px; (單獨向內推開右邊1px)
- padding-bottom: 1px; (單獨向外推開下方1px)
- padding-top: 1px; (單獨向外推開上方1px)
- cursor: pointer; (如果區塊不是a連結，可以使用pointer能夠使該區塊滑鼠一過去時變為手型)
- box-sizing:border-box (當區塊因為border、padding、margin等原因超出原本父層區塊的大小時，可以使用以解決子元素超出父元素的狀況)
排版與撰寫技巧
HTML以大包小
在設計wireframe並編寫html的時候，切版以大為原則，如果能夠用方塊容器裝起來的就裝起來，剩下再切細。順序應該是div>ul>li等等。以便增加在後續CSS要統一改變的速度與便利性。
CSS由大而小
在寫選擇器的時候，最好先把所有的標籤都先寫出來。但是需要善用Class選擇器、ID選擇器以及標籤選擇器。
順序最好是由大而小，先把所有的大標籤div,h1,h2,ul,li,p等按照順序以div等等的方式列出來。
隨後再加入class選擇器，.example。
接著再加入class選擇器的後代選擇器，如.example h1 、.example p等等逐一寫出來。
等到所有標籤都編寫完之後，再開始加入CSS的排版語法，同樣也是由上而下，因為要遵守繼承與取代的概念。下面寫的內容會覆蓋掉父層所繼承下來的內容，
善用註解
在編寫的過程中，如果版面非常長，那麼要寫的coding內容也會非常混亂。這時候，可以多多使用註解(不管在html還是CSS甚至之後的JS都可以按 Ctrl+/ 插入註解)，隨後在裡面多寫一些說明，讓自己在讀的時候更快速知道code的相對位置或者它的功能。
根據class的命名，讓我在編寫的過程中知道，註解線是header、主視覺、選單的底部，在找CSS code的時間上也較為迅速。
好了，以上為CSS簡略的編排介紹。希望對大家有幫助!有疑問也可以在下面留言喔!!
後記
如果你喜歡這樣解說的方式的話，幫我按讚拍手分享，讓更多人了解生物的有趣之處 ! 如果你覺得有疑問或者有錯誤的話，歡迎在下面留言告訴我 !
