CSS的簡寫通常很直覺，會取每個音節的第一個字母來用，但有些似乎是有重疊的關係，就會不太一樣，需要特別記一下，不然 tab按下去跑出來是別的標籤實在很尷尬。
位置 |
------------- | -------------
pos (pos:r) | position:relative;
pos:a | position:absolute;
pos:f | position:fixed;
t, r, b, l| top: right: bottom: left:
層級 |
------------- | -------------
z | z-index:;
z數字 | z-index: 數字;
浮動版 |
------------- | -------------
fl (fl:l) | float:left;
fl:r | float:right;
fl:n | float:none;
cl (cl:b) | clear:both;
cl:l | clear:left;
cl:r | clear:right;
cl:n | clear:none;
區塊 |
------------- | -------------
d 或 d:b | display:block;
d:n | display:none;
d:f | display:flex;
d:i | display:inline;
d:ib | display:inline-block;
d:tb | display:table;
d:tbr | display:table-row;
d:tbc | display:table-cell;
| Flex | flex靈活好用，一體兩面的是屬性也特別多 |
|---|---|
| fx | flex:; |
| fxb | flex-basis:; |
| fxd | flex-direction:; |
| fxd:c | flex-direction:column; |
| fxd:cr | flex-direction:column-reverse; |
| fxd:r | flex-direction:row; |
| fxd:rr | flex-direction:row-reverse; |
| fxf | flex-flow:; |
| fxg | flex-grow:; |
| fxsh | flex-shrink:; |
| fxw | flex-wrap: ; |
| fxw:n | flex-wrap:nowrap; |
| fxw:w | flex-wrap:wrap; |
| fxw:wr | flex-wrap:wrap-reverse; |
| jc | justify-content:; |
| jc:c | justify-content:center; |
| jc:fe | justify-content:flex-end; |
| jc:fs | justify-content:flex-start; |
| jc:sa | justify-content:space-around; |
| jc:sb | justify-content:space-between; |
| 顯示/隱藏 | 在ov後面加上 x或 y就是 overflow-x或 overflow-y |
|---|---|
| v (v:h) | visibility:hidden; |
| v:v | visibility:visible; |
| ov (ov:h) | overflow:hidden; |
| ov:v | overflow:visible; |
| ov:s | overflow:scroll; |
| ov:a | overflow:auto; |
| 各種距離算計 | 每天用應該用到爛掉了 |
|---|---|
| bxz (bxz:bb) | box-sizing:border-box; |
| bxz:cb | box-sizing:content-box; |
| m | margin:; |
| m:a | margin:auto; |
| mt, mr, mb, ml | margin-(top, right, bottom, left):; |
| p | padding:; |
| pt, pr, pb, pl | padding-(top, right, bottom, left):; |
| bxsh | box-shadow:inset hoff voff blur color; |
| bxsh:r | box-shadow:inset hoff voff blur spread rgb(0, 0, 0); |
| bxsh:ra | box-shadow:inset h v blur spread rgba(0, 0, 0, .5); |
| bxsh:n | box-shadow:none; |
| w | width:; |
| w:a | width:auto; |
| h | height:; |
| h:a | height:auto; |
| maw | max-width:; |
| mah | max-height:; |
| miw | min-width:; |
| mih | min-height:; |
| Font & Text | 種類非常多，但是只留常用的 |
|---|---|
| f | font:; |
| fw | font-weight:; |
| fw:n | font-weight:normal; |
| fw:b | font-weight:bold; |
| fs | font-style: italic; |
| fz | font-size:; (fs和fz容易搞混) |
| ff | font-family:; |
| ta (ta:l) | text-align:left; |
| ta:c | text-align:center; |
| ta:r | text-align:right; |
| ta:j | text-align:justify; |
| td (td:n) | text-decoration:none; |
| td:u | text-decoration:underline; |
| td:o | text-decoration:overline; |
| td:l | text-decoration:line-through; |
| ti | text-indent:; |
| ti:- | text-indent:-9999px; (竟然會有這個trick) |
iThome鐵人賽
看影片追技術