[Day22] Emmet 学习笔记 - CSS篇

CSS的简写通常很直觉，会取每个音节的第一个字母来用，但有些似乎是有重叠的关系，就会不太一样，需要特别记一下，不然 tab按下去跑出来是别的标签实在很尴尬。

排版类

层级
z	z-index:;
z数字	z-index: 数字;

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)