emmet的html和css使用技巧大全

Posted 2021-03-23 htmlphp

emmet html使用技巧大全

! 初始化

>：后代
+：兄弟
^：向上
*：乘法
$：数字
()：分组
#：id命名
.：类命名

一、id，类命名
p#info
p.info
a[href=#]

二、后代：
div#wrap>ul>li*10

三、兄弟：
div#wrap>p.one + span.two

四、向上提升一行：^
ul>li*10^ol>li*6

五、数字缩写：$
ul>li.item$*3

六、多个数量：*
ul>li.item$*3

七、分组：()
(div.foo>h1>p)+(div.bar>h3>p)

 

####################

emmet css使用技巧大全
1. w100 -- width:100px;

2. h5p -- height:5%;

3. oh / ovh /ov-h -- overflow:hidden;
zm1 -- zoom:1;

4. o0 -- opacity:0;
op+ -- opacity: ;
filter:alpha(opacity=);
op:ie -- -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

5. db -- display:block;
dib -- display:inline-block;

6. trf -- transform各种兼容
trf:sc -- transform:scale();
trs -- transition
bdrs -- border-radius及各种前缀
bxsh -- box-shadow

7. bdb -- border-bottom
bdt -- border-top
bdl -- border-left
bdr -- border-right

8. fz -- font-size
fw -- font-weight
fw400 -- font-weight:400;
ff -- font-family

9. m-10-2-0-12 -- margin:10px 2px 0 12px;

10. c#0 -- color:#000;
cra -- color: rgba(0,0,0.5);

11. bd1-s-red -- border:1px solid red;
bd+ -- border: 1px solid #000;
bdb+ -- border-bottom: 1px solid #000;

12. m0-auto-0 -- margin:0 auto 0;

13. lh1.6 -- line-height:1.6;
vam -- vertical-align:middle;
tac -- text-align: center;
td -- text-decoration:none;
tdu -- text-decoration:underline;
ti -- text-indent

14. z10 -- z-index:10;

15. bg -- background
bgc -- background-color
bgsz:cv -- background-size:cover;
bg+ -- background:#fff url() 0 0 no-repeat;

16. pos: a -- position:absolute;
pos: r -- position: relative;
pos: f -- position: fixed;

17. fl -- float:left;
fr -- float:right;

18. curp -- cursor: pointer;