今天完成的事情：

今天上午看bug，然后把不足的地方改了一下，然后下午的时候听老大讲了课，晚上的时候改了bug
明天计划的事情：

任务八
遇到的问题：

已解决
收获：

今天的那个页面缩小之后里面也跟着缩小然后，中间有间距。

用px和rem的话都可以，但是vw就不行

这个是两个单位的效果。

我看了一下是boder：1vw solid white;这个代码的问题，因为我写页面用的是vw然后就是boder的话给他改成px或rem的话就可以了，但是看起来很别扭页面体验感不是很好，所以没有改，我这个在手机上面的话就没有这个bug，只有在电脑上面才有。这个应该不是bug的问题，应该是这个vw单位的缺陷。但是我用的页面就是vw写的，所以改起来的话应该会不好改所以我没有改。然后基本上没有bug了。

晚上的话看了html和css实现常见的布局。

只看了一点单列的布局然后缺点和优点

水平居中

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法然后下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素

1.使用inline-block 和 text-align实现

.parent{text-align: center;}.child{display: inline-block;}

优点：兼容性好；
缺点：需要同时设置子元素和父元素

2.是用margin:0 auto来实现

.child{width: 200px; margin: 0 auto;}

优点：兼容性好
缺点: 需要指定宽度

2.使用table实现

.child{display: table; margin: 0 auto;}

优点:只需要对自身进行设置
缺点:IE6,7需要调整结构

3.使用绝对定位实现

.parent{position:relative;}/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/.child{position:absolute; left:50%; transform:translate(-50%);}

缺点：兼容性差,IE9及以上可用

4.实用flex布局实现

/*第一种方法*/.parent{display:flex; justify-content:center;}/*第二种方法*/.parent{display:flex;}.child{margin:0 auto;}

缺点：兼容性差，如果进行大面积的布局可能会影响效率