【Day03】CSS選擇器與優先權、Box model以及block、inline element

階層樣式表 (Cascading Stylesheets；CSS) 既非如Java、C等標準程式語言，也不是如HTML般的標記語言, 而是一種風格頁面語言（style sheet language），透過CSS，能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。
例如，我們可以來複習一下前一天的內容，如果將CSS套上了div，就會產生以下效果。
https://jsfiddle.net/GRANTLI/couyk2r5/2/

CSS能夠辦到的事情很多，舉凡字體顏色、大小、滑鼠(移動或點選時)都可以觸發相關的樣式，
在學習 CSS 的時候， class、id，inline style寫法。除了了解基本的 css，再來最重要的就是css 權重了。
所謂的權重就是指 css 的優先權，例如:
inline style > ID > Class > Element
越左邊權限越高，也就是說元素內的樣式(inline style)>頁面內的樣式>外部載入
相同權重但是後寫的 css 可以覆蓋先寫的 css，當兩個選擇器同時作用在一個元素，權重高的優先生效。

所以你有時候會發現，ㄟ為甚麼我明明設定了CSS樣式，但我的頁面卻沒有作用呢?
答案就是權重的問題了。

權重的計算可以參考這篇: https://www.webdesigns.com.tw/CSS-selector.asp

再來要介紹的就是在CSS排版裡，最為重要的Box model了。
CSS box model 盒子模型也稱為區塊模型，CSS 允許網頁設計師將 DIV 區塊看成一個盒子，透過控制內距的 padding、控制外距的 margin 以及控制元素邊框的 border 屬性來調整"盒子"的展現結果。

下圖可以看出幾種在模型中的屬性:

1. padding：用來設計元素內容與元素本身邊框間的距離，詳細請參閱：CSS padding 內距屬性與用法範例。
2. margin：用來設計元素與外部元素的距離，詳細請參閱：CSS margin 屬性與用法範例。
3. border：用來設計元素邊框的顏色、粗細與樣式，詳細請參閱：CSS border 邊框。

另外，在網頁排版裡，可以粗略的分成兩大系統。

• 區塊(Block)元素:
  在新行上開始，高度、行高和邊距都可控制，寬度是它的容器的100%，除非設定一個寬度給它，例如前一篇文章的"div"。
• 行列(Inline)元素:
  和其他元素都在同一行上，高、行高和邊距不可改變，寬度就是它的文字或圖片的寬度(元素內容)，不可改變，如前一篇的"span"。

假如沒有css的作用，Block element會依照順序一行一行往下排。而有了css以后，我們可以改變這種html的默認布局模式，把塊元素擺放到你想要的位置上去。

以上就是CSS的一些簡單介紹。

下一篇就會開始進行實戰，一起來切割頁面，設計版型以及透過Vue框架建立專案。

本系列文章將同步發布於我的個人網站。