重点：学习bootstrap自适应的做法是怎么实现的，可以更深刻理解自适应

今天完成的事：

任务10

1.自适应调整了半天总算弄完10-1 orz

收获：

1.img-responsive

（关键：max-width: 100%;height: auto;，设定max-width的做法同样可以使用在其他元素诸如div的自适应上）

2.自适应思路：大屏幕PC左右margin大，普通PC左右margin中，平板左右margin小，手机一行只显示一个盒子

3.webstorm里tab键可以使选择的代码整体右移，而shift-tab是左移

明天计划的事：

1.任务10-2

2.任务11

遇到的问题：

1.网格系统如何实现五等分。

（参考http://www.xuejianzhan.com/35938.html，建新样式）

2.再次出现盒子阴影给遮挡问题，这次由于元素没使用绝对定位故不能直接用z-index解决。

（同时使用z-index和position: relative;）

3.列表的li在inline的情况下无法设置list-style。

（li元素的display默认是list-item，将display改为inline就表示这个标签不再是li元素了。）

（因此任务10中并不适合使用bootstrap的list-inline类）

4.很偶尔存在不希望浮动元素撑开父元素的时候，然而bootstrap一律用box-sizing撑开了。

（大概不是问题的问题）

5.0.875rem和1.125rem看起来简直没有什么不同。

（发现bootstrap的html的font-size固定是10px。）

（我还以为bootstrap会自带字体自适应，看起来没有，得自己搞定）

6.由于网格系统都使用同样的类container打头，经常出现想修改其中一两行的container样式而不得不在html{}里边改而没法写在文件头。同样由于这个影响很多情况下难以使用派生选择器来改动样式。

（之后才发现可以采用多个类，而且我好像遗忘了ID选择器orz，用ID完全能解决）