今天完成的事情：

1.github如何发布网站；2.ps切图；3.完成任务三，重温知识点

明天计划的事情：

完成任务四

遇到的问题：

今日问题已全部解决，放入收获汇总

收获：

1.github网站发布

在自己的github上建立一个username.github.io仓库，克隆到本地，建立远程连接后将代码提交上去，然后就可以在   https://libingbing-li.github.io/路径/task.html上  查看自己的网站了。

2.ps切图

在输出的时候遇到了无法获得背景透明图标的问题，解决如下：切好图后将背景色透明度调至0，然后输出为web格式，点击要用的切图调整格式为png-24，选中透明度(如果不选切出来会有白色背景)和交错，输出。

3.任务三

代码

使用position： absolute来放置后退图标，使其完全脱离文档流

position知识点：

position可取的值为static(默认)，relative(相对定位)，absolute(绝对定位)，fixed(固定定位)和sticky(粘性定位)

相对定位：不脱离文档流，是在html文件已经解析完全，在网页上渲染出来后，相对自己正常出现的位置，再进行移动。因此会在原本的位置留下空白。

绝对定位：完全脱离文档流，相对于html元素或者最近的position为relative或者absolute的父元素进行定位。

固定定位：脱离文档流，与相对定位相同，但是是相对于浏览器窗口或者最近的transform不为none的父元素进行定位。

粘性定位：固定和相对的结合，如果不设置top、left、right或者bottom其中之一的属性，那就和relative无异，如果设置了，当滚动页面达成属性条件时，就转变为固定定位。

消除inline-block元素之间的间距：1.使用负margin  2.父元素font-size设置为0  

深度思考

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

px：像素

em：相对于父元素的字体大小，1em等同于父元素字体大小

rem：相对于根元素(html)字体大小

%：正常定位元素，相对于父元素；绝对定位元素，相对于它相对的那个元素；固定定位元素，同绝对定位元素

vw： 1vw =1%浏览器当前宽度

vh： 1vh =1%浏览器当前高度

vm： 1vm =1%浏览器当前宽高中较小的那个

2.css有哪些选择器，优先级如何计算？

id选择器：权重最高

class选择器：次之

标签/伪元素选择器：再次之

内联样式：最次

其中如果权重相同，那么更接近文档底部的样式更优先。

浏览器为元素添加样式，是先通过最右边的选择器(关键选择器)来找到所有符合要求的元素(本例：先找到所有p元素)，然后再遍历他们的祖先元素(本例：遍历找到的p元素的祖先，如果有div就符合要求，为这个p元素添加样式)

例子：div p{...}

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

不是。

像素有两种分类：物理像素和概念像素。

分辨率也有两种分类：屏幕分辨率和图片分辨率。

物理像素和屏幕分辨率都是基于设备的概念，如屏幕分辨率为1280*720，意思就是这台设备水平方向有1280个像素点(物理像素:设备实际拥有的像素点)，垂直有720个像素点。

概念像素(设备独立像素DIP),可以认为是css，js中使用的px

图片分辨率：一张图片在未经过缩放的情况下，分辨率为800*500，就是水平有800个像素点，垂直有500个。

设备像素比=物理像素/逻辑像素

在知道设备的屏幕分辨率以及它的设备像素比的情况下，就可以得到对应的逻辑像素值，写入css/js中