# CSS 單位與權重
###### tags: `CSS`

## :pushpin:單位
css提供不同的單位表大長度、大小，其中包含絕對單位及相對單位
* 絕對單位：尺寸固定 ex:px
* 相對單位：相對另一長度屬性值所計算出來的 ex:%、em、rem
### px
直觀簡單，但在RWD時需對每個此吋都重新調整，維護程式碼相當費力

p{
    font-size:20px;
}

### %
==子元素會受到父元素(px值)乘上百分比==，經常使用在佈局

.box{
    width: 50%;        
}

佔據50%的尺寸
### em
em與rem常用於字體的相對單位
==子元素會受到每個父元素(px值)加乘==
HTML

<section>
    <p>我是內文</p>
</section>

CSS

html{
    font-size: 20px;
}
/*
html{
    font-size: 1.25em;
}
*/
section{
    font-size:1.5em;
}
p{
    font-size:2em;
}

此時的p為`20px*1.5em*2em=60px`
### rem
==子元素會使用根元素(px值)為依據加乘==

html{
    font-size: 20px;
}
section{
    font-size:1.5em;
}
p{
    font-size:2rem;
}

此時的p為`20px*2rem=40px`

## :pushpin:Viewport Units
相對可視範圍單位即整個視窗寬度的比例
>1 vw= 1% of the overall viewport width
>1vw= 視口寬度的 1%
* vw=Viewport weight
* vh=Viewport height

width: 100vw;
height: 100vh;

常用於響應式，可用於確保滿版，不會有捲軸出現

## :pushpin:權重分數
==先看權重再看先後順序==

|內容|分數|範例|
|-|-|:-|
|HTML標籤|1|`h1{color:red}`|
|CSS|10|`.h1Color{color:red}`|
|id|100|`#h1Color{color:red}`|
|element|1000|`style="color:red"`|
|!important|10000|`!important`|

:::info
* HTML class順序不影響權重
* 設計樣式使用class進行設定
* 非必要不要使用 `!important` 語法
:::