今天完成的事情：今天写了一部分任务五，然后遇到的问题自己差不多都能百度解决，然后补了任务总结，今天webstorm崩了，然后就一直在听老大演讲，后来老大演讲结束之后，就重新在网上找教程，改了文件，换了注册码，就浪费了点时间。

明天计划的事情：

明天上午敲任务五，然后下午会看垂直居中的知识点，了解父元素和子元素的关系，然后补任务总结，

深度了解下群组选择器和后代选择器，然后尽量记一些属性的名称，了解子元素和父元素的关系。（因为一直没有看过这方面的资料，所以用起来很吃力，然后查资料解决图层问题，明天的话暂时就想起来这么多，学习时间肯定不会让i自己闲着。

遇到的问题：今天遇到了图片定位设置大小之后无法加图层，就是说白色的字体在图片上面无法显示需要换成其他颜色字体才能够正常显示，明天会继续找资料解决这个问题，然后就是定位的问题，运用的还不是太熟练，明天会继续熟练在相对的情况下用相对定位还是绝对定位。

收获：

看了flex属性

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性。

Flex是它可以简单、完整、响应式的实现各种网页布局，目前已经得到了大多数主流浏览器的支持，有关于它的兼容性可以在CanIuse中的查询到：

基本概念

flex container：采用Flex布局的元素，即父元素，称为Flex容器，简称容器。

flex item：父元素内包含的子元素，称为Flex项目，简称项目。

Flex是没有方向之分的，在Flex容器中默认存在两根轴，水平的轴为 主轴main axis，垂直的轴为 侧轴cross axis。（如果改变flex-direction，主轴和侧轴也将会改变）

主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end 。

侧轴的开始位置叫做 cross start ， 结束位置叫做 cross end 。

项目默认沿主轴方向排列，单个项目占据的主轴空间叫做 main size ，侧轴空间叫做 cross size 。

 然后因为任务5定位用的比较多所以就重点看了定位这一块。

• 定位标签：position
• 包含属性：relative（相对） absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

css-task1-任务总结

任务耗时：3天

成果链接：https://wjxhd.github.io/task/html/task1.html

在任务一学到了html的基本格式，了解了html的常用标签，

                                                                       float浮动，

                                                                        盒子模型，

                                                                      宽度自适应，

                                                                  网页是由什么组成的

                                                                        html和css如何搭配工作

脑图