今天完成的事情：

修改任务十三的两个小bug，提交通过。

把任务十四的响应式框架写出来了。

写完任务十四的头部和尾部。

把任务十四的除了导航和轮播部分写完。

明天计划的事情：

任务十四剩下两个页面的，还有导航栏部分。

遇到的问题：

设置了最大宽度，子元素设置百分比,同时设置了相对视窗定位，会超出我设定的最大宽度,而且只在右边有变化，左边没有

.max-wid {

  max-width: 780px;

  min-width: 320px;

  height: 100vh;

  margin: auto; }

header {

  position: fixed;

  top: 0;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0;

  line-height: 40px;

  font-size: 20px;

  color: #ffffff;

  background: #5fc0cd; }

  header img {

    height: 20px; }

后来的解决办法是在子元素也跟父元素一样限制宽度就好。

我在任务十四还遇到一个问题就是在我设置了媒体查询，跟bootstrap的一样。我设置的列宽度是25%，一行按照道理是可以排列四列。但是只能排三列。

后来查看了一下是padding占了位置，假如把padding去掉就可以。但是去掉padding，会导致后来的东西更麻烦。加各种媒体查询

最后的解决方案是，有个属性box-sizing:border-box。这个可以把盒子的宽度包含在边框和内边距。完美解决问题。

收获：

主要是收获一个知道一个关于盒子模型的新属性。传统的盒子模型是给内容设置百分比，宽度我们设置内容的宽度加上两边内边距加上两边边框，加上两边外边距。

通过box-sizing:border-box我们可以设置盒子的把盒子的宽度包括内容，加上内边距，加上边框。

具体来说就是我们设置width ：100px.box-sizing:border-box假如内边距是15px。没有边框，那么盒子的内容的宽度等于100-15*2=70px。

task4

我们平时写HTML的时候经常会使用很多的div，加上span，会导致很难维护，很难看懂。语义化的意思是我们写HTML时该写头部应该写head，尾部写foot，是列表就用ul.少写div，也有利于我们搜索引擎的优化。

task4p

CSS-task14

禅道主页：http://task.jnshu.com/zentao/project-task-709.html

任务开始时间：5.24

预计任务结束时间：5.29