今天完成的事情 :任务七第二个页面成功写出来 并且写了第三个页面完成度50%

遇到的问题:今天还是挺顺利的    今天看了很多师兄的任务感觉到我这里就是一个临界点对任务完成度的要求很高           display: inline-block;属性

<div class="box">本次游戏共计用时0小时25分钟</div>
<div class="box">杀  手0人      警  察1人      平民6人</div>
<div class="box">狙击手0人      医  生1人</div>
<div class="box">卧底词汇:爱新觉罗</div>
<div class="box">水民词汇:努尔哈赤</div>

这些 中间的间隔是不是需要给三个SPAN标签来解决然后给出间距呢

怎么去解决的:

今天的收获: 

inline（行内元素）:

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 

不能更改元素的height，width的值，大小由内容撑开. 

可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:

使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 

能够改变元素的height，width的值. 

可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

 inline-block（融合行内于块级）:

结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点

.inline-block布局 vs 浮动布局

    a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

    b.相同之处：能在某程度上达到一样的效果　display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
　　a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
　　b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。

明天计划学习什么: 争取能完成任务7的彻底制作然后开始看任务八希望不会被劝退