今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

任务3任务总结。

耗时2018.6.14-2018.6.15

我的脑图

官方脑图

首先按照任务要求进行了布局，对盒子模型和行元素和块元素有了更深一层的认识。

而后通过css对元素添加样式，熟悉了相关css语句，学会了使用

将文本图片相对于块水平居中

初步学习了Photoshop的切图，保存。测量，和查看照片相应位置对应的元素属性，比如字体颜色，字号。。这里需要注意，Photoshop所有的单位都是二倍图。转换到实际的web应用中应缩小2倍。

通过使用margin padding来调整盒子内外边距，使视图更加美观。

而后学会了使用transform：（scale0.5）；来使用二倍图。

了解和学习了px、em、rem等字体单位的区别。

px像素是相对单位，但是他的相对是对于显示器分辨率而言的，其值是固定的。

em是会不断变化的单位，他的值不是固定的，而且会继承父类元素的的字体大小。但是如果在使用em的块元素内，对其font-size声明为固定的px值，其就不会继承父类元素值。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

可以在使用em时：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

但是一般时候不使用em单位。。。因为其字体大小逐层复合产生的连锁反应。

rem是相对单位，在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，所以会受到浏览器中字体大小的设置影响。

比如浏览器默认是16px 这时1rem=16px。当用户调整浏览器字体大小为20px。这时所有的1rem=20px。

所以使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，布局都能调整到合适大小。

总结与 rem 差异 em

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

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

然后了解了css选择器的权重

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.通配符选择器也有权重，权重被认为是 0，0，0，0。

权重的基本规则

1、相同的权重：以后面出现的选择器为最后规则

2、不同的权重，权重值高则生效：包含更高权重选择器的一条规则拥有更高的权重

选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高。

任务4总结。

我的脑图

官方脑图

首先学习了position的static、relative、fixed、absolute。四个属性

tatic 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

然后学习了input和form表单。通过

对input输入框限制输入数据。通过type限制输入类型。使用padding和margin调整输入框位置。利用outline-style和border设计输入框外观。

使用

调整输入框内提示文字的属性。

而后对页面进行调整，对布局和相应的操作指令进行学习和掌握复习。

而后看了居中的几种方法。

居中分为水平居中和垂直居中。

对于行内元素使用

text-align:center;

‍‍可通过给父元素设置 text-align:center 来实现，

这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

‍‍

在宽度固定的情况下可以使用margin：0 auto；来实现水平居中。

改变块级元素的 display 为 inline-block 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

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

看一下BFC
遇到的问题：（遇到什么困难，怎么解决的） 

花样居中挪不动盒子
收获：（通过今天的学习，学到了什么知识）

- -对盒子和行和块的概念理解深入。