任务五

今天完成的事情

1. 给任务四添加媒体查询，解决了在480px屏幕下时页面过窄的问题。
2. 学习flex布局的基本语法，并在任务五中使用该布局。
3. 利用display:-webkit-box属性完成header和footer固定布局。
4. 使用background属性设置背景图案。

明天计划的事情

1. 完成任务五的样式编写，实现和官网一样的效果。
2. 开始任务六，学习bootstrap框架。

遇到的问题

1. 头部和底部如何固定？一般使用fixed即可，但是在手机移动端使用该方法可能会有一些奇奇怪怪的问题，所以想尝试使用flex布局。但是flex布局中没有fixed这一属性，更多的是用来处理百分比布局和垂直居中的，所以想要实现只能另辟新径。
2. 通过网上的搜索，找到了一个不错的解决方案，大概原理是外部一个div设置为display:-webkit-box，然后使内部div排列方式为垂直排列。然后给header和footer设置一个固定的宽度，content设置overflow：hidden；flex:1；由于flex布局的特殊性，中间的content高度是整个父级的高度减去footer和header的固定高度，简而言之，content的高度是自适应的。
3. 理解这一方法后，在实践中却发现footer无法固定，检查后发现应设置html：100%。原理大概是这样设置后，整个文档的高度等于浏览器窗口的高度。而flex布局中div的高度是100%，不设置的话会因为父级（html）元素高度不等于浏览器窗口的高度，中间的content高度无法自适应，从而导致无法实现footer紧贴底部的效果。

收获

1. 了解了flex布局的基本属性与思路。
2. 使用display：block属性来实现头部和尾部固定的布局方法。