任务九

今天完成的事情

1. 1. 完成任务八的剩下2个页面。
2. 2. 使用栅格系统布局，使用媒体查询让页面能适配不同得屏幕。
3. 3.使用rgba来实现职业页面hover时的透明效果。

明天计划的事情

1. 1.完善任务八的页面。
   
2. 2.收集资料并编写星期天的小课堂ppt。
3. 3.开始任务10，学习css项目的布局。

遇到的问题

1. 1.在职位选择页面中，每个职位的详情框框里面的布局比较适合表格布局。但是在自适应的要求下，每个td的宽度百分比必须是一样的，而框框框内有些行的列分布比较特殊。比如薪资待遇这一列。然后我全部使用的是div和float来布局。结果在成长周期和稀缺程度这部分遇到了问题，宽度过小时，稀缺程度栏会换行，高度会变化，而成长周期不会，所以显得很难看。最后我采用的媒体查询这个笨方法解决的。其实完全可以使用table布局解决，不过要用几个table。
2. 
3. 2.上面这个图片要有一个hover效果，最开始没有头绪，询问师兄后，采用绝对定位和rgba实现了这一效果。
4. 下面附上css代码：

5. .info-hidden{
    display: none;
    position: absolute;
    top:100%;
    left: 0;
    -webkit-transform: translateY(-100%);
       -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
         -o-transform: translateY(-100%);
            transform: translateY(-100%);
    padding: 60px 32px 0 32px;
    width: 100%;
    color: #fff;
    font-size: 16px;
    background-color:rgba(0,0,0,0.8);
   
   }
   .front-item:hover .info-hidden{
    display: block;
    height: 452.8px;
    z-index: 10;
   }

收获

1. 小课堂上师兄讲解了line-hight。假设，我们有一个<div>标签，然后，里面有一张<img>图片，我们会发现图片下面有一段空白空间。为什么会有一段空白，其实这段空白间隙是vertical-align和line-height一起造成的。所以消除这段缝隙只要修改这两个属性的其中一个就行。我们可以选择：
2. ‍‍1. 让vertical-align失效‍‍
3. ‍‍图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了‍‍
4. 2.设置line-height为0
5. 可以通过font-size：0和line-height：0这两种方法来修改。
6. 利用这一特性，我们可以实现固定高度下图片垂直居中。因为图片后面（前面）有个类似空格字符的节点，然后就能响应line-height形成高度，此时，图片再来个vertical-align:middle，这时图片就可以和这个被行高撑高的「幽灵空白节点」(近似)垂直对齐了。