[CSS] 關於CSS的基礎大小事 — 權重 / Box Modal

image from CSS Specificity website

在學習CSS的過程當中，遇到過很多次的疑問是 ：「為什麼我套用了這個class 卻沒有作用？」或者是在排版時，那個width 寬度總是超乎我想像中的大小。所以來簡單介紹一下CSS基礎中的基礎概念～

權重 — 誰是老大？

1. 後寫的樣式會寫掉前面的樣式
2. 我們先將CSS 權重分為以下幾類 👇🏻

important! > style > class > element

CSS Specificity 這個是一個超好用的網頁，分類圖是這樣看的，首先最小的部分是 「*」也就是選取全部的意思，而這個 「*」字的權重是 0- 0- 0 也就是權重只有零而已，任何一個都能夠取代他。

而當我們的 element 越多，權重也越高，但element 是最後面的那個位置，所以當再多的element 也比不上一個class 。以上圖例子來說，當我們有9個element 時權重分數會是 0–0–9 還是會小於只有一個class 的 0–1–0 。

Box Model 盒模型

盒模型是一個決定元素內外關係距離的排版模型，我們可以把它想像為一幅畫。如以下的神作～

畫的內容是content 、而畫框則是border 、畫的外面是margin，padding則是content與border的距離。

Photo by Alina Grubnyak on Unsplash

box-sizing

搭配 box-sizing: border-box; 這個屬性的意思是說現在的盒模型的大小是依照邊界為一個基準，當我們的width 設定100px 時，它的border 跟 padding 會向內推。考慮到瀏覽器的支援度，所以有些要加上前罪前綴，在safari 跟 chrome 的瀏覽器上就要加上 -webkit- 的前綴。或-moz- firefox的前綴。

.box {
   width: 100px;
   -webkit-box-sizing: border-box;      //safari& chrome的前綴
   -mox-box-sizing: border-box;        //firefox的前綴
}