今天完成的事情：

解决随着屏幕的变化正方形变形

实现盒子高度随宽度等比例缩放使用vw单位就能实现

viewpoint width，视窗宽度，1vw=视窗宽度的1%

hover在两种情况下的两种用法

当hover的元素和需要改变样式的元素是父子关系时，可以写成这种形式（ .list_block:hover .child）简单来说就是，父子关系的时候，要hover的元素类名称+:hove+空格+要改变样式的元素的类名称。

.list_block和.child是兄弟关系（同级），这种情况下用.list_block:hover .child就不能实现鼠标放在“boot”上出现“hello”的框，这种情况应该这样写（ .list_block:hover+ .child）简单地说就是要hover的元素类名称+（:hove+）+空格+要改变样式的元素的类名称。

小图标的间隔调不好，使用外边距垂直居中方式，随着屏幕分辨率的不同，小图标下面的盒子就把小图标给挤出原来的位置

换个思路，如果我在hover里面在调会怎么样试试看。试了之后发现是一样的，

终于弄好了

用css隐藏页面元素有许多种方法。

1、opacity:0
2、visibility:hidden
3、diaplay:none

4、position:absolute

opacity

     opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

visibility

     第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏

    注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可。

dispaly

    display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

    不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

position

    假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。在这种情况下，只能考虑将元素移出可视区域。这个办法既不会影响布局，有可能让元素保持可以操作。

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;

}

clip-path

    隐藏元素的另一种方法是通过剪裁它们实现。

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

}

明天计划的事情：完成任务七

遇到的问题：使用%，px 等长度单位   很难让屏幕随着屏幕分辨率的不同很难实现高度随宽度等比例缩

收获：任务7投票页