今天完成的事情：

从昨天到今天完成了任务5
明天计划的事情：

完成任务6
遇到的问题：

在做任务5时，底部按钮拉伸到最小的时候字不会自动换行。并会出现横向滚动条，使用overflow-x：hidden.解决了问题，左边灰色的字会自动换行。然后自己百度了一下，使用white-space：nowrap；强制不换行。制作页面的时候 底部按钮宽度并不是固定的，设置border的时候宽度会变成原来的宽度+border的宽度，导致溢出了，这时候有两种方法可以解决

1.使用box-sizing:border-box;它有三个属性

2.使用calc();‍‍calc()从字面我们可以把他理解为一个函数function。calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

‍‍‍‍为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，这就是难点，死卡住了‍

像今天这任务5我设置底部按钮的宽度是45%，在这个基础上减去boder的宽度（3px * 2 = 8px），即"45% - (3) * 2 ，最终得到的值就是按钮的width值：

width: calc(45% - 6px);
height: calc(48px - 6px);

‍‍

收获：条条大路通罗马，解决一个问题的方法有很多，但是我们需要在这写方法中找到最快捷方便的。很多问题网上都有解决方案，只要自己去找。

背景图片的拉伸不变形，可以使用background-size：cover；花了三四个小时写完了这个任务，时间有点太长了，但是对一些属性加深了一些认识。比如overflow：hidden；知道是隐藏但不知道是隐藏什么，这个是超出部分隐藏。

布局较之前有所进步，没有之前那么乱。学习并引入了font awesome这样一个图标库。在需要一些图标的时候还是很方便的。

http://fontawesome.io/