# CSS

## CSS

參考遊戲:([http://cssgridgarden.com/](http://cssgridgarden.com/))

```
grid-template-columns:
grid-template-rows:
//grid-template: 水平 / 垂直


grid-column-start:
grid-column-end:
//grid-column: start / end

grid-row-start:
grid-row-end:
//grid-row: start / end

grid-area: rowStart / columnStart / rowEnd / columnEnd
```

## px em rem

參考資料:([http://www.runoob.com/w3cnote/px-em-rem-different.html](http://www.runoob.com/w3cnote/px-em-rem-different.html))

參考資料:([https://km.nicetypo.com/doc/256ea1b05716ddad168659e6fd54d1b9](https://km.nicetypo.com/doc/256ea1b05716ddad168659e6fd54d1b9))

px 絕對尺寸 設定下去就確定了，不會被其他因素、上下層給變動 em 相對尺寸 跟上層元素的相對大小 1em 等同上層元素， 1.2em 略大一些， 0.8em 略小一些 rem 相對尺寸 rem 只參考這最上層的 HTML 標籤裡的設定(Root)。

瀏覽器默認大小 medium (16px) 所以在沒有特別設定的狀況下，1em = 16 px

```
<div align=center style="font-size:20"> 123
    <span style="font-size:20">123</span>
    <span style="font-size:20px">123</span>
    <span style="font-size:20pt">123</span>
    <span style="font-size:20em">123</span>
    <span style="font-size:20rem">123</span>
</div>
```

![](https://460672175-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lmbdh9OrhI1G9B94HRH%2F-LmbdiNcoUTvtBYgYlVw%2F-Lmbdt-ReK-_wdEEeMix%2Fpx_em_rem.jpg?generation=1566180874099085\&alt=media)

可以看到 20em > 20 rem 這是因為 rem 是和 網頁的根元素(body)去比較 所以他既可以跟body的相對大小，但在網頁裡又是絕對大小。 (比較簡單只要顧好自己，如果調整body，會整個網頁一起變動。)

而em 是跟上一層去比，所以當我在div 設定20後，20em 就會變得更大。 (會比較需要去思考上下的關係)
