display:block是块级元素
可以控制高度，行高，边距
宽度缺省是它的容器的100%，除非设定一个宽度
demo：
<!DOCTYPE html> <html> <body> <div style="width:200px;"> <div style="border:1px solid red">aaaa</div> </div> </body> </html>
display：inline是行内元素
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
demo：
<!DOCTYPE html> <html> <body> <div style="width:200px;display:block"> <div style="display:inline;border:1px solid red">aaaa</div> </div> </body> </html>
display:inline-block简单来说就是表现行内元素的块级元素，可以设置高度，宽度，但是和其他行内元素会在同一行显示
demo:
<!DOCTYPE html> <html> <body> <div style="display:inline-block;width:200px;border:1px solid red">aaaa</div> <div style="display:inline-block;width:200px;border:1px solid red">aaaa</div> </body> </html>