今天完成的事情:

1.完成响应式导航栏.

2.完成任务8大部分内容

3.了解js基础知识

    明天计划：

1.继续写任务8

2.研究如何写轮播图

    遇到的问题：

思考怎么不使用bootstrap实现轮播图

    收获总结：

1.今天在任务中学习到了一个非常好用的属性 Box-sizing属性：

Box-sizing属性可以特定的方式定义匹配某个区域的特定元素。

它可以取以下值：

content-box：（默认值）宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

文字描述有点抽象，下面这张图能形象看出两者的区别：

可以看出通过设定Box-sizing的值为border-box，可以有很多的用法：

锁定元素的宽高，可让border包含在元素之内，

而且再设定padding时，由于宽高不变，padding会挤压内容，可以防止padding和border撑

破布局容器；

兼容性：

现代浏览器都支持box-sizing，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器

还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，

所以box-sizing兼容浏览器时需要加上各自的前缀；

2.了解渐进增强和优雅降级：

渐进增强和优雅降级都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。