今天完成的事情，任务7投票页面内容布局，布局自适应，与投票页面的hover效果。

遇到的问题1，

三个盒子我使用flax两端对齐居中之后，发现页面无法去自适应缩小。给盒子之间左右设置margin，padding也无法去自适应。以为要设置 flex-shrink: 0;，当项目空间不足的时候，自动缩小，需要设置试了很多种方法之后问了师兄，师兄说得是，让我把单位换成vw单位。

vw单位时候css里面的自适应布局的视口单位，视口代表着我们打开一个浏览器的可视区域，

1vw就等于视口宽度的1%，我们伸展页面的时候，vw单位可以帮助我们的界面随着缩放变小。

下面部分的hover效果，我把图片写入css部分了，发现图片的大小与盒子模型不匹配，就算给图片设置vw单位之后，图片还会随着页面的伸展变形。

问了师兄之后，师兄让我用背景图片去写。

.operation{

    background-image: url("image/img.png");（设置背景图片）

    background-repeat: no-repeat;

    height: 5vw;

    background-size: 100% 100%;（因为继承关系，图片xy轴设置为百分之百正好和上面的盒子保持一致。）

    display: none;（隐藏）

}

.figure:hover +.operation{

    display: block;

}

hover效果，我迷瞪了半天，设置了hover效果无法触发，我尝试去用hover设置背景颜色，背景颜色在别的盒子触发了，那就证明我写的没有错。

就感觉自己可能hover没用对，最后保持试一下的心态，触发了，因为盒子模型不是父级关系，所以我们设置hover效果的时候，需要容器加hover效果加要hover的内容。我忘记设置加号了。

今天的收获，vw自适应布局的掌握，hover效果。

反思，感觉自己最近心态有点懈怠，就是沉不下心，改变一下吧。

明天计算，完成投票页。