> For the complete documentation index, see [llms.txt](https://brianwu.gitbook.io/brian/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://brianwu.gitbook.io/brian/qian-duan/css.md).

# CSS

## CSS

參考遊戲:(<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>)

參考資料:(<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>
```

![](/files/-Lmbdt-ReK-_wdEEeMix)

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

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