画一个皮卡丘项目小结（1）

前言

今天开始做一个 画皮卡丘的项目，所以总结一下过程中学到的一些新知识。

一 设置盒模型

设置盒模型为 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；