今天完成的事情：

提交了任务8任务9，改了它的bug，规范了一下，改了一些小问题，任务10做好了导航栏，我仍然引用的框架做的。开了周会一下午，所以就没有做多少任务。

明天计划的事情：

、

做完任务10.

遇到的问题：

图片太长导致把我给它父元素，加上的边框给挤掉了，一开始并不知道是什么原因，在浏览器检查时，发现边框被挤出来，因为我用的栅格系统，自动给它分配宽度，但是那个图片比其他的图片宽一点，所以分到的宽度小于它自身的宽度，我找到了俩种方法，一种是切图，把他本来的图切掉一点，还有一种方法限制它的最大宽度，就可以防止这个bug。

.number{
    min-width: 80px;
    text-align: center;
    line-height: 80px;
    width: 80px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px 1px #333333;
    font-size: 2rem;
    color: #29b078;
}

还有就是负的外边距，我之前虽然知道，也看过，但是因为没用过，所以就忘了，今天又重新看了一下，因为要让3个父元素加在一起所以就看了一下

• marin-left或者margin-top是负值：它会将元素在相应的方向进行移动。left就是左右方向移动，top就是上下方向移动。也就是会使元素在文档流里的位置发生变化。
• margin-right或者margin-bottom是负值：它不会移动该元素(该元素不变化)，但会使该元素后面的元素往前移动。也就是说，如果margin-bottom为负值，那么该元素下面的元素会网上移动；如果margin-right为负值，那么该元素右边的元素会往左移动，从而覆盖该元素。 

它可以让元素互相覆盖也可以让元素紧紧的贴着。

.long-box{
    display: inline-block;
    width: 25px;
    height: 5px;
      padding: 0;
    margin-right: -5px;
    margin-left: -5px;
    background-color: #cccccc;
}

inline-block 后的元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。

一句话解释：它是一个格式化为行内元素的块容器。

兼具行内元素和块元素的特点。它实际上是一个行内（inline）的问题，它由空格、换行或回车所产生空白符所致

方法1: 改变书写方式

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了。

方法2：font-size

方法3：使用margin负值

margin负值的大小与上下文的字体和文字大小相关，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题

方法4：使用word-spacing或letter-spacing

letter-spacing子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。

收获：

用到了负的外边距，并且学会了，还有就是改了bug意识到，自己做的任务还有很多需要纠正的地方。