今天完成的事情：

通过rz命令，上传文件至服务器，并成功访问；

任务三；

了解了rem、em、px之间的区别;

photoshop切png图，做雪碧图;

如何让布局更好地适应移动端；

明天计划的事情：

为ip地址绑定域名；

了解响应式、自适应布局的优缺点；

任务四；

遇到的问题：

1、图片无法通过padding设置负值居中；

图片无法设置padding，最后通过margin:0 auto;实现

padding 属性接受长度值或百分比值，但不允许使用负值。

 2、一次性上传多个文件，XShell出现乱码，并未上传成功；

解决：一次只上传一份文件

收获：

1、CSS 外边距设置外边距会在元素外创建额外的“空白”，这个属性接受任何长度单位、百分数值甚至负值。padding 属性接受长度值或百分比值，但不允许使用负值。

2、HTML有2种路径的写法：相对路径和绝对路径。

相对路径

../表示源文件所在目录的上一级目录，

../../表示源文件所在目录的上上级目录

./表示当前文件所在的层级。

/表示根目录。

引用下级目录的文件，直接写下级目录文件的路径即可。

绝对路径指带域名的文件的完整路径

如http://118.126.113.248/jnshu767/cssTask/cssTask1.html

5、 vmin：vw和vh中较小的那个。

vmax：vw和vh中较大的那个。

6、 rem,em区别

rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便，而rem是始终相对于html大小，即页面根元素

7、ps切png图

切片工具选择à选中需要的图à窗口à选项à点中背景à点去图层左边的小眼睛,若还有不需要的图层，快捷键và到处à存储为web所用格式，选中的切

图存储。

雪碧图：新建文档à试图à新建参考线版面à自定义视图，一次拖入需要的小图标存储à切图

什么是雪碧图？将很多很多的小图标放在一张图片上，就称之为雪碧图。

使用雪碧图的目的？有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

8、ppk把移动设备上的viewport分为layout viewport、visual viewport和ideal viewport  三类。

layout viewport是布局宽度，过宽。

isual viewport代表 浏览器可视区域的大小。

ideal viewport适配移动设备，宽度等于移动设备的屏幕宽度，不需要用户手动缩放，也不需要出现横向滚动条。

可通过meta标签实现ideal viewport。在HTML的头部，也就是head标签中增加meta标签，告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

9、Media Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。

Media Queries工作方式

● screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型

● and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

● (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在 style 标签里：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

.      class {

background: #ccc;

}

}