今天完成的事情：

今天在写JS2 ，完成了部分页面；

看了暴风烈酒和一丝大神对inline-block和浮动方面的博客，了解了部分与table-cell相关的知识

明天计划的任务：

继续任务JS2

遇到的问题：

今天写JS这部分的页面时，遇到了左右两边等高的布局。以前没有遇到过这种问题，因此弄了好长时间。百度了下，才知道可以通过设置display：table-cell来实现。结果，果然生活处处有惊喜啊。由于div布局的横空出世，它的灵活定位和多种样式导致table布局逐步没落，因而对table和table-cell的理解不是很深入，有时候只是简单的把它们类比于block和inline-block的关系。结果发现，table-cell真的很好用。table-cell元素可以并排排列，实现子元素等高，并且它实现垂直居中很方便。我左边的“玩家配比”部分就是用diaplay：table-cell和vertical-align:middle；实现的，我发现它不像inline-block元素那样只是单行文字垂直居中，而是多行文字也可以。更惊喜的是，table-cell没有inline-block那1/4空格的问题。看到table-cell，我最容易联想到的就是bootstrap里面的栅格布局。因此，打算以后深入研究一下用table-cell来取代inline-block布局的可行性，以及二者布局的优劣。

  今天除了写代码，还看了关于inline-block方面的知识。因为英文不是很好，Google和百度的使用姿势可能不是很正确，所以很难找到好的资料。因而，对于前端的一些基础知识总感觉理解的不是很透彻。只能一边写代码，一边进行猜测。前段时间，一直在思考inline元素、inline-block元素和block元素的作用机制。搞不明白为毛block元素独占一行。如果说是因为它的宽度占100%；但是我们给了定宽，不论多少还是独占一行。曾用F12查看过，它会自动添加margin-right，导致铺满屏幕宽度。于是，我又把margin和padding值都设为0，但块级元素还是独占一行。于是，我只能理解，块级元素后面默认加了一个换行符，因而独占一行。至于inline-block元素，我发现有些很奇怪的问题。比如input，它文字只在一行显示，若文字宽度超过其定义的宽度，会使得前面的文字被后面的文字往左边挤，最后就被隐藏起来。但是对span设置inline-block后，给定宽后，文字会换行。于是，不得已，我只能这样理解：inline-block有两种，分别表现为偏向inline的inline-block元素和偏向block的inline-block元素。至于inline元素，它不能设置高度，我也曾怀疑过因为它没有行高，因而无法撑起高度。曾经做过一个demo，在container里面套一个span，给span设置line-height和background-color，但是只有文字部分font-size所在的inline盒子部分有背景颜色，而不是line-height区域都有背景色，因而猜测inline元素是由于没有行高撑开height导致height对它不起作用。

   所幸，今天看了一丝大神的帖子inline-block的前世今生，这是链接：http://www.iyunlu.com/view/css-xhtml/64.html；还有暴风烈酒的的display的恐怖解密故事：inline-block属性，这是链接：http://www.cnblogs.com/StormSpirit/archive/2012/10/17/2726994.html。特别是暴风烈酒的部分内容，这是截图：

让我有一种豁然开朗的感觉，感觉好像已经解开了inline-block的神秘面纱了。但是部分东西理解起来还是有些困难，所以还需要整理一下，才能真正揭开inline-block的神秘面纱。

收获；

1、认识了一种全新的布局方式table-cell；

2、对inline-block的理解有了更深入的理解；

3、找到了更好的资料来源，终于摆脱只能看张鑫旭的博客的局面了，感觉这样接触的知识面太过狭窄了。