今天完成的：

        学习了关于html和css常用的布局。

        了解了一下vertical-align属性。

        学习了媒体查询相关的一些知识。

        解决了昨天内容区拉伸布局可能会被影响的问题。（用媒体查询.....）

        修改了一小部分任务八首页的样式，可以适应980px以上的屏幕宽度。

        （今天报名了线下，正式成为了一名内门弟子。然后看了些注意事项，填了些东西啥的，占用了一些时间。今天的效率和进度确实慢了不少，明天一定注意。）

明天计划的：

        开始写职业推荐页面。

遇到的问题：

        vertical-align 作为垂直居中的一个方法，我一直对它有点不太理解，今天偶然看见一篇讲vertical-align的文章，仔细研读了一下。

        在通过媒体查询改样式的时候，有部分样式没有改动成功。检查了一下，发现是优先级的问题，复写的样式优先级低于了原先样式的优先级。突然想到了之前师兄跟我说过的写样式的时候选择器不要超过三层，现在大概明白了用意。。。

        还发现了一些问题：在屏幕宽度小于980px的时候，（官网上）很多布局都变了，样式也有改变。我的页面就.....嗯，简直快不能看.....不过因为样式要求改变有很多，结构也要改变不少，暂时先不去做改动（毕竟任务九才要求了响应式）。目前想简单的改一下，能适应大多数pc端（像我的屏幕宽度比较小的，按个F12样式就变了不少.......）

今日收获：

        了解了一些常见的布局，及实现方法。

            如：水平、垂直居中；一列定宽，一列自适应；两列定宽，一列自适应；一列不定宽，一列自适应；多列布局；全屏布局；响应式布局等等。

        了解了vertical-align的一些属性及用法，对这个属性有了一定的理解。（主要是用来对行内的元素进行各种垂直方向上的各种定位）。不过一般情况下很少会用到该属性。参考资料见：https://www.zhangxinxu.com/wordpress/2010/05/我对css-vertical-align的一些理解与认识（一）/

         不过还是了解到一个小知识点：

            .test { vertical-align : -2px ; }

            元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。

        学习到了不少响应式相关的知识。响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。

        流式布局：就是使用百分比等相对单位进行样式的设计，可以让页面结构在不同分辨率、屏幕大小下不会出现结构的混乱。

        媒体查询：用于对目标设备提供有针对性的样式；比如上面的流式布局，若在屏幕大小比较小的手机端，就够就会被缩放到比较小，有时候会影响用户体验，使用媒体查询，在特定的分辨率或者其他条件下，能给与指定的样式，让不同客户端都能有较好的体验。

        （主要用到的就是对屏幕width的查询了）

        流式媒体：当视窗发生改变的时候，媒体（图片、视频等）大小并不总是能做出适应的改变。这时就可以通过使用最大宽度值为100%，来快速实现媒体按照比例进行缩放。对于一些iframe和嵌入媒体，此方法就不会那么有效，需要用到其他方法。过多的不再赘述。

（参考资料见：https://www.w3cplus.com/css/advanced-html-css-lesson4-responsive-web-design.html   其中还有不少拓展阅读）

        关于媒体查询的几种方法：

        1.在现有样式表中使用@media规则

        2.在一个新样式表里使用@import规则

        3.用link标签给html文档引用一个单独的样式表  （通常使用第一种方法。）

/* 今天虽说看了不少知识和拓展阅读，不过动手少了很多，就添加和修改了一下 task8-1 的一些样式，明天要抓紧时间赶任务，敲代码了。*/