今天完成的事情：

修改了task8-3个任务中导航栏部分和html和css文件，使左边的logo实现垂直居中。

完成task8

明天计划的事情：

task9

遇到的问题：

1.职位列表页面中有段文字中包含"HTML/CSS/JavaScript/flash"一长串，

开始的时候这串字母前面的字都正常显示在头像右侧，然后剩余的部分都显示在头像的下方。

后来加上了word-break: break-all;属性，意思就是允许在单词内换行。系统应该是把这一长串当成一个单词了。

word-break: normal;——使用浏览器默认的换行规则

word-break: keep-all;——只能在半角空格或连字符处换行

2.职位列表页面方向那一栏，我实现的方法是在container里装button，使用bootstrap的"btn"和"btn-default"两个类，

然后通过自定义样式把它调整成psd的样子。但后来在设置active类的时候，

没有注意到bootstrap中也有个同名的active类，导致默认选中的“全部”按钮在被鼠标悬停在上面的时候颜色显示出现问题。

后来把自定义的类名改成act解决了该问题。

3.职位列表页面的列表部分，在写完一个完整列表后，没有先调试就复制了很多份在后面。这样如果再想修改就不太方便，

以后这种情况应该先把一个单元调整好、修改好，然后再复制出更多份。

4.还是列表部分，一开始没有给父元素设置overflow: hidden;，结果运维那一栏的内容自动滑到后端那一栏的空白部分去了，设置了overflow: hidden;后显示正常。搜索后了解到overflow: hidden有清除浮动的作用，overflow是溢出，hidden是隐藏，翻译过来就是隐藏溢出。

当一个div content被加上浮动属性的时候，在显示器的侧面，它已经脱离了父元素div box，这时候content的宽高对box是不起作用的，也就是俗称的“撑不起来”，那么当我们给box加上overflow:hidden的时候，content在这个立体的浮动就被清除了。如果没有给box设置高度，那么要隐藏溢出首先要知道box和content的高度分别是多少，要计算内容全部高度才能确定在什么位置hidden，然后才能知道溢出部分高度有多少，才能隐藏溢出，但是由于box没有设置高度，结果就是box被content“撑开”，box的高度等于content的高度。

还有一种思路是说overflow: hidden会触发BFC（块级排版上下文），BFC的意思是，我这个元素里面的子孙元素，不会影响外部元素的布局。但浮动本身会造成行内宽度的压缩，出现文字环绕效果。如此一来，浮动元素越宽，当然行内的可容纳的文字数就越少，文字的行数就会增加，文档流高度也就增加。这样，就影响了其外部元素的布局。所以从BFC的本意来说，必须给浮动元素撑出高度，使得后续的元素无法跟浮动元素共享同一水平位置，看上去就是 clear both 的效果了。

收获：

了解了职位列表页面中这种鼠标悬停后覆盖显示内容的实现方法。

对覆盖者使用绝对定位，width和height:100%; top和left:0; 

transform: rotateY(180deg)，transform的含义是改变，使。。。变形，转换

rotate则是旋转的意思，deg是度的意思。

综合到一起就是水平或垂直旋转若干度来改变。