行内元素和块级元素
1、行内元素和块级元素的区别
- 行内元素会在一条直线上排列（
默认宽度只与内容有关），都是同一行的，水平方向排列，设置width、height、margin、padding 无效，但是可以设置可以设置line-height。 - 块级元素占据一行（
默认宽度是他本身的父容器的100%，与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 - 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
2、行内元素转和块级元素的转换
display:inline; (字面意思表现形式设为行内元素)
display:block; (字面意思表现形式设为块级元素)
3、inline-block
inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。 HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。 参考博客
