How CSS is Parsed
==
###### tags: `CSS`

Udemy ：Advanced CSS and Sass: Flexbox, Grid, Animations and More 課程筆記

## <font color="#3733FF">The Cascade and Specificity</font>
==CSS的第一個字C，代表的就是Cascade==

先了解瀏覽器在加載網頁時，Css代碼如何執行
解析HTML時瀏覽器會建立DOM，這時CSS也會被解析，並且有兩個解析階段
第一個是解決CSS衝突
第二個是處理最終的CSS，譬如：將百分比轉換成px值

都處理完之後就將CSS儲存在CSSOM，最後形成render tree，網站被渲染或繪製到螢幕上

<font color="#999999">圖片來源：udemy：Advanced CSS and Sass</font>

細看第一階段在做的事情，一個網頁裡面可能有很多來源的樣式，像是
:::info
Author: 開發人員定義的css，因為由「網頁開發者」制定，優先級最高
User: 使用者透過設定改變的
Browser (user agent)，瀏覽器預設的，譬如超連結會是藍字＋下底線
:::
越靠近瀏覽器的來源，優先級會越高
<font color="#999999">圖片來源：Alpha camp</font>

所以要解決不同CSS規則和聲明之間的衝突，當多個規則應用於某個元素時，先查看
重要性 -> 再來查看選擇器的特殊性 -> 最後是source order的順序

從下表可以看到，查看Specificity的順序，第一個最大
有一個網站可以查詢優先順序 [polypane](https://polypane.app/css-specificity-calculator/#selector=.content%20%20.app-section%20p%20%20.highlight)
1. inline styles
2. IDs (ex: #nav)
3. classes、pseudo-classes,attribute (ex .container 、[type="radio"]、:hover)
4. elements,pseudo-elements (ex: div、::before)

最後的背景會是第二個css：綠色，最前面的數字越多，越大，如果遇到平手的狀況，就到第三個環節，寫在越下面的css就會被套用
<font color="#999999">圖片來源：udemy：Advanced CSS and Sass</font>


其他注意事項
1. 一個ID會贏過1000個class name
2. 一個class name會贏過1000個元素
3. ＊代表 (0, 0, 0, 0)，其他的選擇器都優先於＊

看到這裡就體會到，如果自己寫的css沒有work，也要檢查一下特殊性有沒有問題

範例： 這裡的horver是不會work的，它的特殊性比`nav#nav div.pull-right .button`低

.button {
  background-color: blue;
}

nav#nav div.pull-right .button {
  background-color: green;
}

a {
  background-color: purple;
}

#nav a.button:hover {
  background-color: yellow;
}

所以要有horver時，要讓它的特殊性更高

nav#nav div.pull-right .button:hover {
  background-color: pink;
}

[codepen 連結](https://codepen.io/weeiiy/pen/dygewrY?editors=1100)

## <font color="#3733FF">Website rendering:the visual formatting model</font>
說明網頁渲染，CSS visual formatting model是一種算法，它計算每個render tree的每個元素的 box 和layout，以確定頁面的最後要呈現在頁面上的layout。

這個過程要考慮到
1. Box model
2. Box type: inline, block and inline-block
3. Positioning scheme: floats and absolute or relative positioning;
4. Stacking contexts
5. Other elements in the render tree: parents or siblings
6. Viewport size, dimensions of images, etc.

才會呈現出一個網站的樣貌

### Box model
定義一個元素在頁面上的顯示方式和它們的大小（ex:寬、高）
有 Margin、Padding、Border、Content
<font color="#999999">圖片來源：udemy：Advanced CSS and Sass</font>

現在常用的方式都是指定bor-sizing: border-box
box-sizing 属性用來指定如何計算 HTML 元素的寬度和高度

當我們設定成 border-box，並指定`width: 200px` ，就代表是把盒子的border和padding都一起算進去，寬度全部加起來是200px的意思，高度也是這樣計算的

### Box type
很多元素都有預設的type，如

| Block | Inline |
| -------- | -------- |
| div | span |
| header | img |
| section | a |
| nav | em |
| p | strong |
| h1~h6 | label |
| ol、ul、li | |
| form | |
| table | |

- Block: 具有內容可以佔滿一整行的特性
- Inline: 則是內容只會是自己本身的大小，不能設定width 和 height屬性
- Inline-block: 改善Inline的不方便，把本來是inline屬性的元素修改成`display: inline-blick`，就可以改變box type，這樣就可以具有Block的特性，也可以設定Box model

### Positioning scheme

- Normal flow: 代表`position: relative`，依據HTML內容順序呈現
- Floats: 該元素會從Normal flow被移除，我比較少用到的，如果一個元素被設置了`float: left`，該元素周圍的Text和inline elements 將會向左或向右流動，且不能調整高度，可能會導致容器的高度不足以容納其他內容或元素，可以使用 clear fixes處理
- absolute: 該元素一樣會從Normal flow被移除，但他對周圍的元素沒有影響，通常會使用top, bottom, left and right來調整位置

### Stacking contexts
比較常見的是 `z-index`，數值越高的顯示在越前面，z-index是沒有負值的，其他會影響堆疊的還有opacity、transform 等