前言
今天开始做一个 画皮卡丘的项目，所以总结一下过程中学到的一些新知识。
一 设置盒模型
设置盒模型为 IE盒模型：
*{margin: 0;padding: 0;box-sizing: border-box;
}*::after, *::before{ /*注释1： css3伪元素*/box-sizing: border-box;
}
二 flex布局
通过flex布局，形成绝对居中的效果：
body{height: 100vh; /* 注释2：css3单位*/border: 1px solid green;display: flex; /*注释3： css3 flex布局*/justify-content: center;align-items: center;
}
三 水平居中的方法：
通过相对定位和绝对定位，形成水平居中：
.wrapper{width: 100%;height: 165px;border: 1px solid red;position: relative; /*注释4：和绝对定位配合，实现水平居中*/
}.nose{width: 22px;height: 22px; background: black; position: absolute; /*注释5：相对于最近的 非static布局的 父元素*/left: 50%; /*注释6：整体的左上角移动到中间*/top: 28px; transform: translateX(-50%); /*注释7：css3属性让整体向左平移 负50%*/
四 形成一个扇形：
S1 先构造一个正方形：
.nose{width: 22px; /*之所以设置宽高，是为了确定下面的 圆角半径*/height: 22px; background: black;
S2 再从正方形构造成圆形：
.nose{width: 22px;height: 22px; border-radius: 11px; /*让半径/宽度=50%即可*/background: black; /*背景是是黑色的 圆形*/
S3 直接利用边框构造圆形：
.nose{width: 0; /*把宽高都置为0，从而利用boder构造圆*/height: 0; border: 11px solid red; /*把宽高都置为0，从而利用boder构造红色的圆*/border-radius: 11px;
}
S4 设置边框圆的四个颜色：
.nose{width: 0; height: 0; border: 11px solid red; border-radius: 11px;border-color: black transparent transparent; /*分别设置边框颜色*/
}
S5 微调一下颜色和宽度：
.nose{width: 0; height: 0; border-radius: 11px;border-color: black transparent transparent; border-width: 12px;border-style: solid;
}
五 创建圆里面，还有一个小圆：
S1 先构造一个正方形，且水平居中：
.eye{ width: 49px; /*创建一个正方形*/height: 49px;background: #3e3e3e;position: absolute; /*绝对定位*/
}
.eye.left{right: 50%;margin-right: 90px; /*水平居中*/
}
S2 再创建圆：
.eye{ width: 49px;height: 49px;background: #3e3e3e;border-radius: 50%; /*创建圆*/border: 2px solid black; /*创建圆的边框色*/
}
S3 创建圆里的小圆,并用绝对定位微调其位置：
.eye::before{content: ''; /*必须要有的*/display: block; /*默认类型是 inline*/width: 24px;height: 24px;background: white;border-radius: 50%;position: absolute;left: 6px; /*距离相对元素左边6px，即右移6px*/top: -1px; /*距离相对元素上面-1px,即下移-1px*/
}
六 Reference
??1 border-radius圆角详解;
??2 详解 CSS属性::before & ::after；