一、今天完成的事情

1. 学习切图，掌握PhotoShop简单操作。

我平时喜欢摄影，也会用PS简单修修图，以为前端切图应该差不多，上手才发现完全是两条路子，还是需要花心思认真学学的。尤其要了解图层的概念。

注：任务三素材都在PSD格式文件里，需要用Photoshop才能打开。

推荐参考资料：

图解利用PhotoShop进行切图：https://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html

Photoshop怎么切图？PS切图方法汇总：http://www.jb51.net/photoshop/472293.html（较详细）

2. 进一步学习CSS样式及盒模型

任务一已经学习过viewport和长度单位的基本知识，任务三继续练习。这次布局需要控制的元素更多一些，方法也不止一种，尤其关注浮动、标签类型和盒模型。

浮动的特性：

1. 支持所有CSS样式；

2. 内容撑开宽度；

3. 浮动元素同行排列；

4. 代码换行不被解析；

5. 浮动元素脱离文档流，遇到父级的边界停止，影响布局，需要清浮动；

6. 浮动元素提升层级半级，

不同标签类型有不同的特性，标签类型转换可以使该标签获得其他类型标签的特性：

块标签：

1. 1. 支持所有CSS样式；
   

2. 2. 继承父级宽度；
   

3. 3. 独占一行；

4. 4. 代码换行不被解析。

5. 内联标签：

6. 1. 不支持宽高，不支持上下margin和padding；

7. 2. 内容撑开宽度；

8. 3. 同属性标签同行排列；

9. 1. 4. 代码换行被解析为一个空格；

   2. 5. 标签间距大小取决于父级的font-size。

内联块标签：

1. 支持所有CSS样式；

2. 内容撑开宽度；

3. 同属性标签同行排列；

1. 4. 代码换行被解析为一个空格；

2. 5. 标签间距大小取决于父级的font-size。

几个常用效果：

margin：0 auto；（元素左右居中）

text-align：center；（文字居中）

float：left；（元素左浮动）

float：right；（元素右浮动）

display：block；（标签类型转换）

推荐学习博客：px,em,rem,vh,vw,vmin,vmax的区别：http://blog.51cto.com/dapengtalk/1861496

二、明天计划的事情

1. 深度思考问题，什么时候用margin好，什么时候用padding好？

参考文章：布局那点事，用Margin还是用Padding？http://blog.sina.com.cn/s/blog_6970cb0c0102vytz.html

2. 深入学习flex布局

flex作为一种先进灵活的布局方法，也许是以后的趋势，不能只知道点皮毛。明天多读相关文章加强学习。

力荐资料：一劳永逸的搞定 flex 布局（https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb）

3. 开始任务四：登录页—— 一个最常见的移动端页面

练习定位布局，relative，absolute，fixed。

练习表单及常用控件；

三、遇到的问题

对元素的控制不熟练，样式继承问题还有很多坑要踩，通过练习有所提高。还是得多做任务，唯手熟尔。

四、收获

学会基本的切图方法，超实用，重燃学习Photoshop的热情。

练习浮动布局，比昨天又进步一点点。

补充知识盲点：媒体查询判断横竖屏。代码如下

/*横屏*/

@media screen and (orientation:portrait) {    

    p.a{        

        font-size: 1rem;    

       }

}

/*竖屏*/

@media screen and (orientation:landscape) {    

    p.a{        

        font-size: 3rem;    

       }

}