今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
了解了rem和em的区别，为什么建议使用rem和em

px：绝对的像素值

em：相对长度单位，

em特征：1、em值并不固定；2、em会继承父级元素的字体大小。

rem：CSS3新增的一个相对单位（root em，根em）

vw：是可视区宽度单位，1vw等于可视区宽度的百分之一

vh=可视区高度

Em的单位是相对于使用em单位的元素的字体大小

父元素的字体大小可以影响em值，但是这种情况的发生是因为继承。

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。 因此padding会翻译成 24px，即 1.5 x 16 = 24。

根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。

所以 html 元素的字体大小虽然是直接确定 rem 值，但字体大小可能首先来自浏览器设置。

因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。

总结与 rem 差异 em

上述所有归结如下:

 rem： 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

 em ：单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

但是，通过使用 rem 单位，如果用户调整其字体大小，我们也能保证布局的完整性，使用较小的文本避免文本空间被压扁了。

如果您确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。

这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。

为什么使用 em 单位

 em 单位取决于一个font-size值而非 html 元素的字体大小。

为此，em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。

使用 em 单位:

根据某个元素的字体大小做缩放而不是根元素的字体大小。

一般来说，你需要使用 em 单位的唯一原因是缩放没有默认字体大小的元素。

我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。

通常不使用 em 单位控制字体大小

我们经常会看到使用em作为字体大小单位，特别是标题，当我认为如果使用rem将更具可扩展性。

标题经常使用 em 单位的原因是他们相比px单位，在相对常规文本大小方面更出色。 然而 rem 单位同样也可以实现这一目标。 如果 html 元素上任何字体大小调整，标题大小仍会缩放。

使用 rem 单位:

不需要 em 单位，并且根据浏览器的字体大小设置缩放的任何尺寸。

这几乎在一个标准的设计中占据了一切，包括heights，widths，padding，margin，border，font-size，shadows，几乎包括你布局的每部分。

简单地说，一切可扩展都应该使用 rem 单位。

创建布局时，往往要以像素为单位更方便，但部署时应使用rem单位。

你可以使用预处理比如Stylus / Sass / Less，来自动转换单位或PostCSS之类的插件。

或者，您可以使用 PXtoEM 手动做您的转换。

不要使用 em 或 rem :

多列布局

布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。

然而单一列一般仍然应使用 rem 值来设置最大宽度。

例如:

.container {

    width: 100%;

    max-width: 75rem;

}

这保持列的灵活，可扩展。又能防止变得太宽了。

总结：

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

em 单位基于使用他们的元素的字体大小。

rem 单位基于 html 元素的字体大小。

em 单位可能受任何继承的父元素字体大小影响

rem 单位可以从浏览器字体设置中继承字体大小。

使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

使用rem单位，除非你确定你需要 em 单位，包括对字体大小。

媒体查询中使用 rem 单位

不要在多列布局中使用 em 或 rem -改用 %。

不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

其中有代表性的数字就是rem：62.5%

为了更好的进行换算，使用62.5%来换算

因为：1rem=10px

html,body{

  font-size: 62.5%; 

}

CSS position属性

position属性规定元素的定位类型

绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

absolute        

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed        

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative        

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static        默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit        规定应该从父元素继承 position 属性的值。

提交了任务3，需要加快进度。

明天计划的事情：（一定要写非常细致的内容） 
完成任务四

遇到的问题：（遇到什么困难，怎么解决的） 
没有了解什么是rem，em。通过查找资料找到了。

收获：（通过今天的学习，学到了什么知识）

学会了rem和em。