今天完成的事情：

  css7正在进行中明天计划的事情：

    努力完成css7，努力纠正书写规范
遇到的问题：  

   可能是头部没有固定好，布局出了点问题正在试着解决
收获：

如何实现css小三角原理就是：

宽高为零，单独设置border的宽度，然后上右下左，根据需要选择三角形的方向，比如选向上箭头，其他右、下、左设置为透明；然后放在下边，用margin-top：-10px 去。

任务三总结：

     首先就是按照认为流程到百度云下载任务资源，查看学习资料PhotoShop——Photoshop之CSS切图，然后把需要的图片利用工具切出来，然后进一步了解盒子模型，内外边距——margin和padding，利用div添加样式和文本内容，进行浮动改变位置布局，任务三最主要的任务首先学会PhotoShop切图，因为这个在以后任务中会经常使用，当然布局的移动需要自适应，也就是单位长度，px % rem vw 现在经常用到这个，当然任务三还有图片的布局文字是居中这些都是要查看和掌握的资料，需要掌握好基础知识。要活学活用，比如text-align: center;line-height: 50px;适用于文字的居中，当然图片的移动就是浮动，左浮和右浮，实现你想要的布局。

深度思考；

  第一什么是PhotoShop？

Adobe支持Windows操作系统 、Android与Mac OS， 但Linux操作系统用户可以通过使用Wine来运行Photoshop。

第二px em rem区别？

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点 

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

  第三文字的垂直居中怎么实现？

常常使用line-height设置内容（图片、文字）行高上下居中样式效果
line-height:+数字+单位（在CSS布局中我们一般采用像素px为单位）
行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。

然后文字居中就是 text-align: center加line-height: 50px就能实现 字体居的效果

第四盒子模型原理；

一、css盒子模型概念

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

二、css 外边距合并（叠加）

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。