今天完成的事情：

   任务五完善细节，任务六重写结构

明日任务：

   任务六完成 任务七首页

今日遇到的问题：

   1.两个<span>标签之间其实有空格的，但是我当时不知道存在这种问题，无从下手解决，问了师兄才知道，还是基础不扎实，基本的知识点比较迷糊，平时要多看看基本知识点。

   2.之前以为雪碧图不能缩放，问了师兄后知道transform中scale属性可以按比例缩放，解决了图片过大的问题 

   3.bootstrap里面的button的btn属性自带样式，包含了最小宽度的设置，修改后才能在小屏幕正常显示

今日的收获：

  5种方法去掉HTML中Inline-Block元素之间的空白

方法1：各元素间不留任何空白  一个100%能解决这个问题的方法是在你的HTML代码里元素间不留任何空白：

方法2：在父元素上设置font-size: 0

方法3：HTML注释 将HTML元素间用注释填充，这跟它们之间没有空白效果一样： 

方法4：负边距   跟方法2很相似，可以利用inline-block的灵活性，给它们设置一个负边距，隐藏空白：

方法5：首尾接龙   另外一个利用HTML标记的方法是将元素的闭合标记和下一个元素的开始标记靠在一起：

 transform 2D  重要方法 

1 translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

2 rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

3 scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

4 skew() 方法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

5 matrix() 方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。