画一只动态皮卡丘（一）

前言

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

一 设置盒模型

设置盒模型为 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; /*