css快捷方式

本来是年前准备整理发布的，都搞定50%了，一篇万恶的《盗墓笔记：九幽将军》让我猪油蒙了心.....诶，不说了，搞一半就算了，最后还忘了保存，此刻只听得那一万只草某马呼啸而过...

言归正传吧，去年面试的时候，项目经理问我一个问题，做几年了？第二个问题，有博客什么的吗？问题就出在第二个问题，他触动了我，让我觉得是时候开始形式上的积累了，

脑子比较内存有限，以前我的积累方式就是收藏夹，真到用的时候，那家伙，不是找不到在哪儿，就是链接失效，那时候的心情，不说了，蛋扯的有点多了...总而言之，干这一行，积累是很有必要的，未必要见解高深，但一定要做到心中有数，用时知道在哪儿找！

begin...

　　No.1　居中对齐系列

　　1、知道子元素宽度与高度的情况下   解决思路：位置定位法 absolute + margin

　　 .parent {

    position: relative;    background: skyblue;    width: 100vw;    height: 100vh;　　}　　.child {    position: absolute;    width: 100px;    height: 60px;    top: 50%;    left: 50%;    margin: -30px 0 0 -50px; /**子元素宽度/2  高度/2*/    background: #131313;　　}

   2、不知道子元素高与宽的情况下，解决思路：位置定位 absolute + transform

.parent {    position: relative;    background: skyblue;    width: 100vw;    height: 100vh;}.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    position: absolute;    width: 50%;    height: 50%;    background: #00ffff;}

3.通用法：flexbox居中对齐

.parent {    display: flex;    justify-content: center;    align-items: center;    width: 100vw;    height: 100vh;    background: #00ffff;} .child{     width: 50px;     height: 50px;     background: #512da8; }

今天先这么着，未完待续...