任务三最开始也还是挺狼狈，本来想用position定位图片的位置，结果发现无论是用absolute还是relative还是两者都用都无法精确定位，最后的位置都是很奇怪，后面查资料才知道是触碰了BFC。其实布局很重要，将图片分成三个部分，设置三个div,引入img全部修改成block，里面所有的数据值都是用em和百分比来代替。

关于BFC：

BFC全称：block formatting context,意思是块级格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干（盒子内部的元素不会影响到这个盒子的外部元素，盒子外部的元素也影响不了这个盒子的内部）；display属性为block,list-item,table的元素，都会生成块级盒子block-level box,并且参与BFC.

BFC的布局规则：

1.内部的盒子会在垂直方向一个接一个的放置；

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠；

3.每个元素的margin box的左边，与其父元素的border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。

4.BFC的区域不会与float box重叠（个人理解就是浮动元素不会盖住普通流中的元素）.

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是一样.

能够生成BFC的元素：

1.根元素；

2.float属性不为none；

3.position的值为fixed或absolute;

4.display为inline-block、table-cell、table-caption、flex、inline-flex；

5.overflow的值不为visible

关于position:

1.absolute,关于absolute有一个层模型必须要注意，当一个元素成为绝对定位元素时，它会脱离原来的层跑到上面的层去，意思就是它会脱离原来位置进行     定位。

2.relative，保留原来位置进行定位，它是相对于最近的有定位的父级定位，如果没有最近的有定位的父级就相对于文档定位。

3.fixed，相对于视窗定位。

如何进行自适应网页设计：

1.允许网页宽度自动调整（添加meta name="viewport" content="width=device-width,initial-scale=1.0")

2.不使用绝对宽度布局，多使用%和auto.

3.字体多用rem.

4.使用流式布局，谨慎使用绝对布局

text-align是针对文本的对齐方式,可以设置为left左对齐，center居中，及right右对齐；margin：0 auto；是用于设置块状元素的居中，用于调节<img>标签时，不能起作用，<img>是内联元素，可以把<img>转换为块状元素display：block；便可以使用margin：0 auto；

水平居中设置
     1、行内元素
           设置  text-align:center
     2、定宽块状元素
           设置  左右  margin  值为  auto
     3、不定宽块状元素
           a:在元素外加入  table  标签（完整的，包括  table、tbody、tr、td），该元素写在  td  内，然后设置  margin  的值为  auto
           b:给该元素设置  displa:inine  方法
           c:父元素设置  position:relative  和  left:50%，子元素设置  position:relative  和  left:50%
垂直居中设置
     1、父元素高度确定的单行文本
           设置  height = line-height
     2、父元素高度确定的多行文本
           a:插入  table （插入方法和水平居中一样），然后设置  vertical-align:middle
           b:先设置  display:table-cell  再设置  vertical-align:middle

今天完成的事情：任务三终于在我的摸索下完成了。

明天计划的事情：完成任务四加n+1篇代码

遇到的问题：position里面的absolute和relative比较棘手，设置出来后的位置很奇怪；页面布局还是比较弱

收获：太多了，上面的知识就是一部分，还有下次代码写不出来或者代码网页显示很奇怪的时候，不要一个人苦想，可以找找资料，或许资料里就有答案