前端工程学习日记第16天

#CSS margin / padding缩写 快速coding 方法

以css的效能来说，写越少行数读取速度就越快，所以一开始初学者建议全写，熟悉参数后成为进阶就可以练习缩写的写法增进敲代码跟读取的效率。
写法1： 全写 (全部分开写)
margin-top: 1px;
margin-right: auto;
margin-bottom: 1px;
margin-left: auto;
写法2： 缩写 (上/右/下/左)
margin: 10px auto 10px auto;
写法3：缩写 (上/右/下)
margin: 10px auto 10px ;
写法4：最短缩写 (上下/左右)
margin: 10px auto;
写越短就越省事啊~懒出新高度(ﾉ>ω<)ﾉ
Image for post
可以用这张图来帮助记忆顺序，从top开始顺时钟转，因为 padding 和 border 也是类似的原理
敲代码写法

有在使用 sublime 或 VS code 这类编辑器的人应该都对 emmet 不陌生，搭配tab键是必备技!
mt10 →margin-top: 10px;
mr10 →margin-right: 10px;
mb10 →margin-bottom: 10px;
ml10 →margin-left: 10px;
m0-a →margin: 0 auto;
m-a →margin: auto;
m10-0-10 →margin: 10px 0 10px;
ps.如果要改单位例如%或em也可以喔
m10p →margin: 10%;
m10e →margin: 1em;
m10r →margin: 1rem;
欢迎拍手鼓掌给我鼓励~!!