编

报

哈哈哈，这个必须挂出来，首先在此多谢关楠师兄的教导！

其次开始讲今天的收获：

因为昨天有事被耽搁了，今天才完成上传。上传之后就拿到群里去问效果，然后就有了如上对话。

------------------------------------分割线-------------------------------------------------------------------

其实仔细想想，前端页面的大部分东西都是由一个个或大或小的盒子组成（只是单纯的以我现有的浅薄见识猜测的），

剩余的就是盒子内部的事情了。

今天在坐地铁的时候突然觉得，这个地铁本身就非常像盒模型，人是里面的内容content，车厢内的空间就是padding，

车的外壳就是border，车厢与地铁隧道之间的空间就是margin。

想让人（内容）松散一些，不至于太挤，这个时候就可以调整padding；

想要强调一下人（内容）的重要性，安全性，让内容更显眼，这个时候就可以调整border；

列车所占的空间需要驱离其他部分，这个时候就可以调整margin，但是margin也不能太大，否则会影响其他部分。

任务1完成了，但是半天都没被审核，所以就去看了任务3，在切图的时候，发现图是png的，平时用的表情包都是jpg，

一时不知道咋回事，就去百度jpg和png的区别，没想到图像还有这么多的格式，下面就是常用的几个格式：

1、psd

photoshop的专用格式。

优点：完整保存图像的信息，包括未压缩的图像数据、图层、透明等信息，方便图像的编辑。

缺点：应用范围窄，图片容量相对比较大。

2、jpg

网页制作及日常使用最普遍的图像格式。

优点：图像压缩效率高，图像容量相对最小。

缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。

3、gif

制作网页小动画的常用图像格式。

优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。

缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。

4、png

网页制作及日常使用比较普遍的图像格式。

优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。

缺点：不能制作成动画

位图和矢量图

位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

svg

目前首选的网页矢量图格式。

优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。

缺点：色彩不够丰富。

总结

1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；

如果要使用透明或者半透明背景的图片，就使用png图片；

2、使用小幅面图片或者图标图片时，

如果图片含多种颜色，可以使用gif或png图片；

如果图片是单色，而且要求有很好的显示效果，可以使用svg；

如果是图片时动画的，可以使用gif。

链接来自https://blog.csdn.net/xun527/article/details/77726573 

所以我觉得任务3还是png靠谱点

明天的计划：1 深入了解flex布局

                      2 接着切图，今天切的图显示在页面上面是缩略图，还没搞清楚啥状况

                      3 贪多嚼不烂，自己觉得理解的差不多了，实践出来再与师兄们交流，共勉！