前言
今天开始做一个 画皮卡丘的项目，所以总结一下过程中学到的一些新知识。
一 设置盒模型
设置盒模型为 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*/
}