今天完成的任务

a.日报6.6-6.10的回顾。

b.任务5的界面还原

c.基础知识的巩固和display: flex;的初步尝试。

明天的计划:

a.任务5界面的完善。

b.日报6.10-6.12的复习

c.拓展知识

遇到的问题：

background的一些简写化问题，和师兄沟通后明白了不能为了简写而简写，主要是看的清晰舒服（url地址的原理)。

disply: flex; 使用还很生涩， 然后设计界面过程中文本<p>和<div>在文本输入中设置效果一样（但是p是行元素 div是块元素，所以是文本我采用的P)

收获：

今天主要用的都是前面学习的知识，并没有特意去学一些其他的知识，要说的话，就是一些知识的温习巩固

background的简写（position/size):如果position是默认值，就另写一行background-size来书名，如果position设置了，就background: url() repeat position/size 这样的语法来写（貌似background：的语法属性不是特别要求前后，只要注意1、background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。 2.如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。这2个就行了）

display：flex; align-ltems: center;的运用，主要造成居中对齐效果。

flex;1详解：

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}

.item {

    flex-grow: 1;

    flex-shrink: 1;

    flex-basis: 0%;

}

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}

.item {

    flex-grow: 2;

    flex-shrink: 3;

    flex-basis: 0%;

}

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 2333 3222px;}

.item {

    flex-grow: 2333;

    flex-shrink: 1;

    flex-basis: 3222px;

}

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：

auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。

content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

总结：flex感觉要抽一天来学了哦，不好好理解使用起来还不是特别顺手。等任务5完善后特别花1-2天来深入学习。