画一只皮卡丘
当我学完html和css之后，想着要不实践一下，毕竟老话说，实践出真知。刚好看看之前学的东西掌握的怎么样了，而且之前二师傅布置了一个作业，但是做的时候很多东西不对版，做不好，那不如就把它拉出来再完善一下呗
画皮卡丘之前我们先理清一下有哪些部分吧
- 首先，我们肯定要给整个页面的布局设定一个绝对居中的效果，这样我们画五官的时候就不会分散到网页四处，这里我们用到的是
display：flex（弹性布局），display属性规定了元素应该生成的框的类型，而flex属性则用于设置弹性盒模型对象的子元素如何分配空间，如果元素不是弹性盒模型对象的子元素，那么flex属性是不起作用的。 - 布局里还要给整体设定一个皮卡丘的颜色，然后铺满整个页面，这里我们用
background来表示将要设定的颜色，这是一个背景缩写的属性，可以在一个声明中设置所有的背景属性，或者你也可以用background-color来指定你要使用的背景颜色
body{
background：yellow；
display:flex;
width:50px;
height:20px;
}
- 整体的页面布局搞定之后就可以开始画皮卡丘的鼻子了，我们可以先画一个圆，然后再给这个圆形的两边裁剪一下，这里用的是
border属性，这个属性是用来指定元素边框的样式、宽度和颜色，可以设置的属性按顺序排分别是：border-width、border-style、border-color，要把鼻子方方正正的角度变成一个有弧度的扇形，可以用border-radius来表示设置元素的外边框圆角，
#nose{
border：10px solid transparent
position：absolute；
border-radius：50%；
}
- 眼睛这部分需要用到伪元素
::before,::after，可以先画出一个眼球的样子，然后用border做一个边框，但是这样的眼睛看起来没什么精神，此时我们就需要给眼睛画上收到惊喜的时候发光的样子，那么就需要用到伪元素将要画的那部分叠放在眼睛上方
.eye::before,
.eye::after{
content: '';
display: block;
width: 30px;
height: 30px;
background: white;
border-radius: 15px;
left: 8px;
position: absolute;
border: 2px solid black;
}
- 腮红这一块和眼睛有点类似的，先画出一个方块，然后用
border-radius设置外边框的圆角，我们给它的数值是50%，这样画出来刚好是一个圆，最后再用border给腮红的加一个边框。 - 嘴巴这一块就相对复杂很多了，分为嘴唇上边弯弯的嘴角和舌头两部分，首先我们先解决上嘴唇的部分，或许我们可以先画一个方块，然后用
border-top：none来将不想要的边给它隐藏掉，嘴巴这块也是分成左右两边来画的，嘴巴整体这部分我们需要用z-index来将嘴唇这部分元素叠加在舌头上面，z-index的值为正数的时候表示对象会在它上面，为负数的时候表示对象会在它下面，表示指定一个元素的堆叠顺序
.upperLip{
position: absolute;
top:120px;
width: 100%;
display: flex;
justify-content: center;
z-index: 1;
}
- 舌头的话我们考虑先画一个方形，然后用
border-bottom-left-radius给左下角添加圆角边框，以此类推，给舌尖那两个角都添加一个圆角的边框，但是我们画完之后的舌头会很长，我们不想让皮卡丘变得奇奇怪怪，这时候就需要用到overflow属性了，这个属性是表示那个内容溢出一个元素的框的时候，后面跟上你想要操作的内容，这里的话肯定是要让皮卡丘多出来的舌头消失的，所以这里我们可以用overflow：hidden来将超过嘴唇部分的舌头给它修剪一下，让它不要出现。
了解完皮卡丘的大致结构分布之后，咱就可以开始动手了
页面布局
前面说了，我们想要的是五官聚在中间而不让它在网页四处飘荡，那我们应该怎么去写比较好呢？
首先我们可以用display：flex来让整体布局呈现一个绝对居中的效果，
| 属性 | 值 |
|---|---|
| flex-direction | row：横向从左到右排列（左对齐） row-reverse：从右往左排列，最后一项排在最前面 column：纵向排列 |
| justify-content | flex-start：让flex容器中的子节点居左 flex-end：让flex容器中的子节点居右 center：让flex容器中的子节点居中 space-between：让它平均分布在这一行上面，如果剩余的空间为负，则等于flex-start space-around：平均分布在这一行上，两边留有一 半的间隔空间，如果剩余空间为负数则等于center |
| flex-wrap | nowrap：flex容器为单行，这种情况可能会溢出容器 wrap：flex容器为多行，溢出的部分会被放置到新行，flex内部会发生断行 |
| align-items | stretch：是一个默认值，表示元素被拉伸适应容器 center：元素在容器的中心 flex-start：元素位于容器的开头 flex-end：元素位于容器的结尾 |
绝对居中的效果有了，还需要给皮卡丘上个肤色，我们可以用background来给皮卡丘上色
| 值 | 描述 |
|---|---|
| background-color | 指定要使用的背景颜色 |
| background-position | 指定背景图像的位置 |
| background-size | 指定背景图片的大小 |
| background-repeat | 指定如何重复背景图像 |
| background-origin | 背景图像的定位区域 |
| background-clip | 背景图像的绘画区域 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 |
| background-image | 指定要使用的以恶搞或多个背景图像 |
这里我想给整个画面加一个盒模型
整体的盒模型是这样的，但是在标准模型下，我们给元素设定的宽和高只会作用到内容上，而内边距和边框有出现其他数值的话都是另外设定的，现在我们对页面布局这块了解的差不多了，可以开始写代码了
<body>
<div id="box">
</div>
</body>
#box{
margin: 0;
padding: 0;
box-sizing: border-box;
height: 300px;
width: 180px;
position: relative;
}
#box::before,
#box::after{
box-sizing: border-box;
}
body{
background: #ffe000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
眼睛
眼睛这一块我们先用position属性给它设定一个绝对定位的值
| 属性 | 值 |
|---|---|
| position | absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位 fixed：生成固定定位的元素，相对于浏览器窗口进行定位 relative：生成相对定位的元素，相对于其正常位置进行定位 static：默认值，没有定位 sticky：粘性定位，该定位基于用户滚动的位置 |
然后就可以开始画一个宽和高一样的正方形，但是眼睛都是圆的，不能是正方形，所以我在这个基础上再用border-radius来设置元素的外边框圆角，然后就可以给眼睛上色了，眼睛外面也应该有一个边框将它包起来的，所以我们用border属性来加一个边框包裹住里面的图形，接下来要用top属性让眼睛定位在外边距边界的哪个地方，这样眼睛我们就完成一半了，还要再画一下眼睛里的一个点，这时候就需要用伪元素::before、::after来将画的东西放在眼睛的上面，
| ::before | 选择器向选定的元素前插入内容，使用content属性来指定要插入的内容 |
|---|---|
| ::after | 选择器向选定元素的最后子元素后面插入内容，用content属性来指定要插入的内容 |
这里我们用display：block来表示框的类型是什么
| 属性 | 值 |
|---|---|
| display | none：表示该元素不会被显示 block：表示该元素将显示为块级元素 inline-block：表示为行内的块元素 list-item：表示该元素会作为列表显示 |
这些数值都算好了，我们还要让眼睛左右两边放在合适的位置，可以用right：50%，你可能会好奇，为什么是50%，是以哪个属性为准的呢？这时候目光可以回到前面画眼睛那里，你的top属性设置的值是多少，下面设定的值也是会被影响到的，然后我们就可以开始画眼睛了，这里我们分成左右两边眼睛来画
<div class="eye eye-left"></div>
<div class="eye eye-right"></div>
.eye{
position:absolute;
width: 60px;
height: 60px;
background-color: #2e2e2e;
border:2px solid black;
border-radius: 50%;
top:65px;
}
.eye-left{
right: 50%;
margin-right: 90px;
}
.eye-right{
left: 50%;
margin-left: 90px;
}
.eye::before,
.eye::after{
content: '';
display: block;
width: 30px;
height: 30px;
background: white;
border-radius: 15px;
left: 8px;
position: absolute;
border: 2px solid black;
}
鼻子
皮卡丘的鼻子是一个倒三角形，且又带有圆角的，一开始我想的是可不可以先画一个扇形还是一个方形，然后把其中几个多出来的图案给它隐藏掉呢？后来还是画成了一个圆形，我们画左右边框的时候隐藏掉多余的图形就可以了，最后再用border-radius修饰一下鼻子两个角那里，给元素设定一个外边框的圆角，使用%定义角落的形状，所以这里我们可以这样写
<div id="nose"></div>
#nose{
border: 10px solid transparent;
position: absolute;
left:50%;
top:90px;
transform: translateX(-50%);
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid black;
border-radius: 50%;
}
腮红
腮红这一块和眼睛那部分其实很像，可以先画一个方块，然后用border-radius来设置元素的外边框圆角，最后再用一个边框将它包围起来就可以了，这里我们还是分作左右两边来写，
<div class="face face-left"></div>
<div class="face face-right"></div>
.face{
position: absolute;
border:3px solid black;
background: red;
top:180px;
width: 80px;
height: 80px;
border-radius: 50%;
}
.face-left{
right: 50%;
margin-right: 130px;
}
.face-right{
left: 50%;
margin-left: 130px;
}
嘴巴
嘴巴这块分为嘴唇和舌头两部分，咱先画嘴唇那个地方吧，先用display：flex给嘴唇这块设置一个绝对居中的效果，position：absolute生成一个绝对定位的元素，用justify-content：center让flex容器中的子节点居中，我们还要让嘴唇这部分是一直在上面的，不然等下画舌头的时候可能会被舌头覆盖了，那我们可以用z-index：1来试试，z-index属性表示的是指定一个元素的堆叠顺序，后面跟的1表示他是在上面的，这样等下画的时候就不会被舌头覆盖了，准备工作做好了，我们就可以开始画皮卡丘的嘴巴了，这里我们按照习惯还是分成左右两边来画，先画一个方形，然后把上边和靠近鼻子那里不要的线用none隐藏起来，但是方块的四个角都是直角，很明显皮卡丘的嘴角不会是一个直角，所以这边还需要用border-bottom-left-radius border-bottom-right-radius来给嘴角两边添加一个圆角的边框，让嘴角有一个弧度，这里咱用了两个值，第一个是用于下边框的弧度的，第二个是用于左边框的弧度的,这样一个嘴唇就画好了，但是我们想让皮卡丘开心一点，所以我们还要用transform：rotateZ（-23deg）让嘴巴沿着Z轴逆时针旋转23°，这样一个嘴唇就完成啦。
| 属性 | 值 |
|---|---|
| transform | none：表示定义不进行转换 translateX(x%)：表示只用X轴的值进行转换 translateY(y%)：表示只用Y轴的值进行转换 translateZ(z%)：表示用Z轴的值进行转换 rotateX(deg)：表示沿着X轴的3D旋转 rotateY(deg)：表示沿着Y轴的3D旋转 rotateZ(deg)：表示沿着Z轴的3D旋转 skew(x-angle,y-angle)：定义沿着X和Y轴的2D倾斜转换 |
嘴唇画好之后我们来画舌头，先画出一个大致的形状，这里我画的是一个方形，然后也是用border-bottom-left-radius和border-bottom-left-radius在舌尖那个地方添加一个圆角边框的形状，皮卡丘在靠近嘴唇那里还有一个阴影的部分对吧，这里可以用box-shadow来添加那块阴影，我们也要给它弄成有弧度的，而不是一个平的线条，那我们可以用border-top-left-radius和border-top-right-radius来设置圆角边框的形状，box-shadow属性是把一个或多个下拉阴影添加到框上的，可以用逗号隔开
| 属性 | 值 |
|---|---|
| box-shadow | h-shadow：水平阴影的位置，允许负值 v-shadow：垂直阴影的位置，允许负值 blur：模糊距离 spread：阴影的大小 color：阴影的颜色 inset：从外层的阴影开始时改变阴影内侧阴影 |
在这里还有重要的一步，我们的舌头画好之后，他会特别长，长过脑壳，但是超过的那部分我们不想要怎么办？这里可以用overflow属性，这个属性表达的意思是如果一个东西溢出那个元素的框，后面的值表示你想对溢出的那部分做点什么，在这里我们是不希望它出现的，那么就用hidden将他隐藏了吧
| 属性 | 值 |
|---|---|
| overflow | visible：表示默认值，这时候内容不会被修剪，会呈现在元素框之外 hidden：内容会被修剪，并且其余的内容不可见 scroll：内容会被修剪，但是浏览器会显示滚动条以便于查看其余的内容 auto：如果内容被修剪，那么浏览器就会显示滚动条以便于查看其余的内容 inherit：规定应该从父元素继承overflow属性的值 |
现在我们试着把嘴巴画 一 下
<div class="upperLip"></div>
<div class="lowerLip-wrapper">
<div class="lowerLip"></div>
</div>
.upperLip{
position: absolute;
top:120px;
width: 100%;
display: flex;
justify-content: center;
z-index: 1;
}
.upperLip::before{
content: "";
width: 80px;
height: 26px;
border: 3px solid black;
border-top:none;
border-right: none;
border-bottom-left-radius: 80px 40px;
transform: rotateZ(-23deg);
background: #ffe000;
}
.upperLip::after{
content: '';
width: 80px;
height: 26px;
border: 3px solid black;
border-top: none;
border-left: none;
border-bottom-right-radius: 80px 40px;
transform: rotateZ(23deg);
background: #ffe000;
}
.lowerLip{
position: absolute;
border: 3px solid black;
bottom: 0px;
height: 1300px;
width: 200px;
left: 50%;
transform: translateX(-50%);
border-top: none;
border-bottom-left-radius: 100px 650px;
border-bottom-right-radius: 100px 650px;
border-top-left-radius: 100px 100px;
border-top-right-radius: 100px 100px;
background: #ff444f;
box-shadow: inset 0 1145px 0 20px #9f000a;
}
.lowerLip-wrapper{
position: absolute;
width: 180px;
top: 130px;
height:160px;
overflow: hidden;
}
写在最后
刚开始接触皮卡丘的时候其实挺兴奋的，喜欢探索新的东西的那种感觉，觉得这应该是一个很厉害的大神才能做出来的，甚至那几天连做梦都是在敲代码的路上，眼睛刚闭上脑海里就是各个属性应该怎么布局，要放在哪里比较好，但是后来做到嘴巴这部分的时候就感觉有点阻力了，好像那个舌头它一直不受控制，到后来慢慢的想放弃了，有时候一直在一个地方摸着但是没有任何进展的时候真的很容易失去耐心，甚至再要拿起它的时候还会感到有点烦躁，想着怎么又是它！
但是最后还是没放弃它（老大不给放弃的机会哈哈哈）把它做出来了，有些之前没想到的地方在一番指点之下做了下修改，原来，我没有将舌头多余的部分给它修剪掉；虽然我在页面布局那一块给了一个绝对居中的效果，但是因为前面html那里的布局没弄好导致它变成了一个摆设，所以后面做的时候网页一放大缩小就是两个画面，要么挤成一团，要么分得很开；原来，我没有把嘴唇那个地方放在最上方，所以当舌头往上面移动的时候嘴唇那里就不见了，我以为我css已经学会了，原来需要学的还有更多，绝不止于书上的那些内容。css真的是一个很神奇的东西，它从无到有的转换就在那么一瞬间。
