前言

今天開始做一個 畫皮卡丘的項目，所以總結一下過程中學到的一些新知識。

一 設置盒模型

設置盒模型為 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；

畫一個皮卡丘項目小結（1）