今天有很多事需要处理，再加上懒癌发作，就没怎么学习，浪费大好时光啊，不知什么时候才能像沉迷游戏一样沉迷学习无法自拔。

【今天完成的事情】

1. 按照师兄的提点，修改了一下任务三，为最下方的图片添加下边距，使之与页面底部有了一定的距离。关于文字介绍部分自动换行时产生的高度变化挤走了最下方的两张图片的问题，师兄给我支了招，但是我没咋看明白（智商堪忧），但是按照师兄的提醒，我为文字介绍部分添加了高度，基本上算是解决了这个问题。如果还有什么毛病，请师兄帮忙指出来，我会好好改正的！麻烦师兄了！

2. 认真的研究了一下媒体查询时rem换算的问题，感觉大概是明白怎么回事了，这一块各种像素，各种单位，各种分辨率什么的实在是有点愁人，不过好在已经有了点眉目。

假设页面是以640的宽度（指设计图宽度）去切的，那么屏幕宽度为384的html的font-size的计算方法就是 384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

3. 看了CSS权威指南的边距，边框一章。

4. 在做居中的时候，通过查询资料，大概明白了margin：0 auto为什么会使元素居中的原因，同时对盒模型也有了进一步的认识。

在标准和模型下，水平方向的7个属性margin-left，border-left，padding-left，width，padding-right，border-right，margin-right之和一定等于父元素的width，在这7个属性中只有width和左右margin可以设置为auto，其余属性必须为特定的值或者默认值为0.

一言不合就来个demo：

1）将子元素的width设置为auto，margin左右不变，皆为100px；效果图和上图一样，在这里子元素的宽度由auto自动计算得到400px的值。

2）将子元素的宽度设置为300px;margin-left为100px，margin-right为auto，结果发现margin-right的值自动计算得到了200px的值，

.father{

     margin: 0;

    padding: 0;

    width: 600px;

    height: 100px;

    background-color: red;

}

.son{

    margin-left: 100px;

    margin-right: auto;

    padding: 0;

    width: 300px;

    height: 100px;

    background-color: green;

}

从某种程度上来讲，auto会自动弥补实际值和父元素的宽度之间的差值，但是假如子元素的width和margin左右皆为100px，三者的和根本达不到父元素的宽度（600px）会出现什么状况呢？f12后发现，子元素的margin-left个width都没有问题，都是我们设好的数值100px，通过观察控制台出现的盒模型(就是下图)margin-right显示的数值也是没有问题的，然而当点击这个盒模型的margin-right部分时却发现了一个问题，margin-right自动补满了父元素剩余的空间：

这表明如果这三个值都设置为非auto，且值之和小于父元素的宽度，浏览器会自动把margin-right当做auto来处理，由这个auto值来补满所需的距离。

3）若将子元素的margin-right设置为200px，width和margin-left都设为auto，则会发现margin-left的auto自动计算为0，width的auto值计算为400px。

4）若将margin左右和width都设为auto，会发现margin左右的auto都计算为0，即margin-left：0; margin-right: 0; 而宽度的auto计算为600px，占满了整个父元素。综合3）和4）两点来看，在外边距和内容都没有显式声明任何值的时候，margin会默认为0，width会尽可能的宽。

5）margin左右auto，宽度为200px，两边的margin会自动设置为相等的宽度，则子元素会在父元素里水平居中，这是一种常见的水平居中方法。

【明天计划的事情】

1. 继续写任务

2.看权威指南的浮动和定位

【遇到的问题】 

1. 在修改任务三的时候，发现有一处不怎么尽善尽美的地方，在不同的设备宽度下文字以及图片的大小变化过于突兀，暂时还不知道如何利用媒体查询和rem换算实现动态的文字字体变化效果。

【收获】

如上！