今天完成的事情：

任务五

.this{
    width: 202px;
    padding: 15px;
    border: 2px solid #5fc0cd;
    border-radius: 15px;
    text-align: center;
    color: #5fc0cd;
    font-size: 20px;
}
header{
    background: mediumturquoise;
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

明天计划的事情：计划开始任务六
遇到的问题：盒子模型理解的不透彻，还没有运用自如，听了师兄的建议重新看了盒子模型，才把问题解决了
收获：对flex和盒子模型理解的更深了，也能用的更自如了

                                                                                               任务三总结：

今天的任务三对我而言就比较复杂了，不是想九宫格那么简单了，我第一眼看到的时候还是比较懵逼的，这么复杂我能做出来吗？师兄却告诉我没事先试试，你先试试看看能不能做出来，或者说做到什么程度，有解决不了再让我去找他。对我而言问题最大的就是自适应，让内容随着屏幕的大小转换，而不是挤成一堆，后来想不出来问了师兄和查了百度才解决了。

                                                                                                  深度思考：

1.如何利用PS切图以及从UI图中获取所需信息？

首先找到切图工具，左侧第5个工具剪切下的子工具（切图工具 和切图选择工具 ），鼠标点击就会出现。

选中后开始切图，找到要切图位子，鼠标点击拖拽。如发现有偏移，可以再到左侧工具栏中选 “切片选择工具”进行调整（图片上可以有很多个切图）

当全部图标10个切完后的样子，下面我们按住组合快捷键shift+Ctrl+Alt+S

点选切图 同时按住shift 加选 ，鼠标点击10个切图 ，右上可以修改图片的格式，按存储即可完成切图（保存：选择要存储的位置后下面 的切片类型 选择“选中的切片”）

完成保存后，PS会自动建立一个images 文件夹，里面就是你切图的文件啦！

2.px、em、rem、%、vw、wh、vm等单位有什么区别？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

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

rem是css3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

%特点：普通元素的百分比定位基于父类.

设置了position: fixed的元素的百分比定位基于浏览器窗体.

设置了position: absolute的元素的百分比定位相对于static定位以外第一个父元素进行定位.

vw(viewport width, viewport指的是浏览器内部可视区域大小)

 特点：计算： 1vw = 1% * width_viewport

vh(viewport height)

特点：计算： 1vh = 1% * height_viewport

vm(viewport min) 特点：计算： 1vm = 1% * (width<height?width: height)

3.如何进行自适应网页设计？

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比来定义列宽度：
width: xx%;
或者：
width:auto;
或者：
使用最大宽度和最大高度max-width,max-height;
三. 相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
代码如下:
body {
font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代码指定，字体大小是页面默认大小的100%，即16像素
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

比较多哟，给你说下几种比较常见的吧：

1、优先级最高的是内部选择器，写在标签内部，例如<div style="color:red"></div>，这里的color=red是写在标签内部的，所以优先级最高

2、其次是id选择器

例如<div id="d1"></div> <style> #d1{ color:red }</style>，这里面#d1就是id选择器，用#表示, 标签里面是id属性 样式是#开始3、类选择器

例如<div class="c1"></div> <style> .c1{ color:red }</style>，这里面.c1就是类选择器，用.表示，标签里面是class属性，样式是 . 开始

4、标签选择

以标签名字作为选择器，这种不常使用

例如：<div><div> <p><p>

样式对应：div{ font-size:14px } p{font-size:20px}

由标签选择器，类选择器，id选择器，还可以延伸出很多选择器

CSS中margin和padding的区别如下：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。　　从图示中看得就会比较直观，可以很容易理解了　　　　CSS是层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

6.手机分辨率和网页中的px是一回事吗？

分辨率指图象中存储的信息量。这种分辨率有多种衡量方法，典型的是以每英寸的像素数（PPI，pixel per inch）来衡量；当然也有以每厘米的像素数（PPC，pixel per centimeter）来衡量的。图象分辨率和图象尺寸(高宽)的值一起决定文件的大小及输出的质量，该值越大图形文件所占用的磁盘空间也就越多。图象分辨率以比例关系影响着文件的大小， 即文件大小与其图象分辨率的平方成正比。如果保持图象尺寸不变，将图象分辨率提高一倍，则其文件占硬盘大小增大为原来的四倍。