1. explain several common attributes of value display, inline, block, inline-block
- inline (inline element):
- The element becomes inline elements, inline elements have characteristics, that line can be shared with other inline elements, not on a separate line.
- You can not change the elements of height, width values, the size of distraction by the content.
- You can use the left and right padding up and down effective, margin only left and right margins to produce the effect, but the top and bottom can not.
- Block (block element):
- That the element becomes block-level element, a separate line, without setting their width, the width of the block elements to fill default parent element.
- Elements can be changed height, the value of width.
- May be provided padding, each attribute value of the margin, top, left, bottom, right margin can produce results.
- inline-block (the fusion line in the block-level):
- Combined with some characteristics of inline block, combined with the above first feature of inline and block of the second and third characteristics.
- In plain words, is not exclusive line block-level elements. Figure:
Figure 1: 
Figure 2:
Two can be seen, display: inline-block after block element can be displayed on the same line, which was the same as the floating it says it. Yes, display: inline-block effect and floating almost the same, but there are also different, then talk about inline-block and comparing floating.
2.inline-block layout vs floating layout
a difference: the element is provided on the display: inline-block, without departing from the text flow element, so that the element will float out of the text stream, as well as the parent element and the effect of the height of collapse
b in common: to achieve the same effect to some extent
Let's take a look at these two layouts:
Figure I: display: inline-block 
Figure 2: Use float for two children: left, I talked about in the last floating layout, which is the height of the parent element will collapse, so closing float, the use of the box overflow: hidden, effect is as follows:
>> At first glance two can do almost the same effect, (look at the display: inline-block gap in the issue, leaving this to revisit below)
c floating layout is not a good place: uneven phenomenon, we see one effect:
Figure 3: 
Figure 4: 
>> As can be seen from Figure 3, 4 floating limitation is that, to the elements lined row, after wrapping still neatly arranged, we remain highly consistent sub-elements of the job, otherwise there will be three renderings, and inline-block does not.
Existing 3.inline-block small problem:
A . The above can be seen with the display: After inline-block, there is a gap problem, the gap of 4 pixels, the cause of the problems is that wrap caused because we write tags usually easily make a return after the label endings car, carriage will have carriage, carriage returns, the equivalent of white space, in general, multiple consecutive whitespace will be merged into a blank character, but the real reason for using a "gap" is this and let us less attention whitespace.
b. a method of removing voids:
1. The parent element is added, {font-size: 0} , is about the font size is set to 0, then that also becomes 0px whitespace, thereby eliminating voids
present method has been compatible with a variety of browser, before chrome browser is incompatible
Figure 1:
c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
在ie6/7下：
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素：需添加{display:inline;zoom:1;}
4.总结:
display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。