今天完成的事情：

今天开始任务五的切图，完成header、footer和主体内容的上半部分的布局，主要还是用之前的定位设置的，

继续学习flex的知识，查看了很多资料包括使用例子，但是还是不清楚怎么应用的任务五种，感觉个人理解能理有问题，理解什么是清除浮动以及方法，学习css自适应布局方法以及background的相关设置，Html元素关于内容分区的元素有哪些

明天计划的事情：

继续弄得flex布局的实际使用来设置任务五，关于html及css代码规范在详细学习一下，打好基础，复习之前的知识，包括浮动，盒子模型，定位等，现在对浮动和盒子模型的应用不能有更好的应用，现在还停留在最简单的了解

遇到的问题：

任务五主体内容的下半部分布局是可以继续用定位完成的，但是每一个小图片及小文字都需要设定宽高及位置，非常繁琐，还没学会flex怎么去设置这部分，感觉很难理解。

另外在设置内容主体上半部分的背景图片部分，随着拉伸页面，图片不会同比例变化，拉大后图片缺失，还没找到解决办法

收获：

1、flex布局容器属性

* flex-direction：决定主轴的方向

row 从下到上；row-reverse 从上到下；column 从左到右；column-reverse 从右到左；

* flex-wrap：如果一行排列不下如何换行

nowrap 不换行；wrap 换行；wrap-reverse 换行，第一行在下面；

* flex-flow：flex-direction属性和flex-wrap属性的简写形式

row warp；

* justify-content：项目在主轴上的对齐方式

flex-start 左对齐；flex-end 右对齐；center 居中；space-between 两端对齐；space-around 

* align-items：项目在交叉轴上如何对齐

flex-start 交叉轴的起点对齐；flex-end 交叉轴的终点对齐；center 交叉轴的中点对齐；baseline 项目的第一行文字的基线对齐； stretch 如果项目未设置高度或设为auto，将占满整个容器的高度；

* align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start 与交叉轴的起点对齐；flex-end 与交叉轴的终点对齐；center 与交叉轴的中点对齐；space-between 与交叉轴两端对齐，轴线之间的间隔平均分布；space-around 每根轴线两侧的间隔都相等；所以，轴线之间的间隔比轴线与边框的间隔大一倍；

stretch（默认值） 轴线占满整个交叉轴；

2、Flex项目属性

* order属性（num）

order定义自身排列顺序。数值越小，越靠前，默认为0。-1/0/1/2/3/...

* flex-grow属性（num）

flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

* flex-shrink属性（num）

flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。

* flex-basis属性

flex-basis定义最小空间，默认值为auto，即自身的本来大小。

* flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

* align-self属性

align-self定义自身对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3、Html元素关于内容分区的元素有哪些

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

address、article、aside、footer、header、<h1>, <h2>, <h3>, <h4>, <h5>, <h6>、hgroup、main、nav、section

4、background 属性

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

主要对background-size深入了解

background-size：水平方向 垂直方向，做移动端的时候经常需要用到这个。

属性值分别有：

1 设置具体的值 。background-size：100px 200px。你设置的多大  背景图片就有多大，当只设置一个值的时候高度会auto。

2 设置百分数 。background-size：100% 100% ，图片的宽高 会以容器的宽度为基准，来生成大小。当只设置一个值的时候，高度的值会默认为auto。但不一定会正好就等于图片的高度显示出来，我之前做一个移动端就是因为我设置的是background-size：100% ，后来发现背景图片的高度只显示了一部分，底部的就是看不到，但我们底部的背景又是需要展现出来的，后来改成background-size：100% 100%就好了。当然如果你的背景的重点不在下面。可以只写一个100%。

3 background-size： cover，这个就是不会考虑图片本身的比例，让图片能够把容器充满，所以很有可能图像只显示一部分，因此还是要根据你的需求来看。

如果你需要显示完整的图片，最好用background-size：100% 100%，如果图片的重点在上面，或者只显示一部分也没影响，可以用background-size：100% 和background-size： cover。

4 background-size： contain 把图像图像扩展至最大尺寸一直到。他们的宽度和高度都能接触到容器。

5、清除浮动

什么是清除浮动，因为在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动方法

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br />或<hr />来进行清理。

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

6、css自适应布局

https://www.cnblogs.com/qieguo/p/5421252.html

float布局、普通流布局、绝对定位、弹性盒子

这是实际上介绍的就是最近几个任务所用的布局方法，看这个总结可以比较清除各种布局方法的情况，但是具体如何应用在任务中还是需要对各种布局的基础知识理解透，这还是目前要努力的方向。

7、听泽平师兄讲解一些做前端的思维学习方法和态度，比如要有责任心和职业素养，编辑规范代码，不然后续工作会很麻烦，学习要有探索精神，有问题寻求解决方法，多考虑是否有其他跟便捷的方法，像任务一是否还能用其他方式实现，另外写工作日报要认识到重要性，对于自己总结学习经验，后期复习很有用。