详解css中的display属性（行内元素和块级元素）
首先，所有主流浏览器都支持display属性。其次，display属性规定了元素应该生成的框的类型。默认值：inline
我们常用的display属性有：
- inline
- block
- inlien-block
- none
把display设置成none就不会保留元素本该显示的空间（元素直接不显示），但是visibility：hidden会保留。那么其他三个有什么区别呢？看下下面css代码：
1 | <body> |
inline特性
我们发现内联对象inline给它设置属性height和width是没用的，致使它变宽变大的原因是：
内部元素的宽高‘+padding’。观察inline对象的前后元素我们会发现inline不单独占一行，其他元素会紧跟其后。
block特性
而块对象‘block’是可以设置宽高的，但是它的实际宽高是本身宽高+’padding‘。观察block的前后元素，我们会发现block会独占一行。
如果，我们即希望div有宽高，又不希望它独占一行要怎么办？
inline-block
这个时候我们就需要’inline-block‘属性了，我们看下显示效果，就会发现：
inline-block即具有block的宽高特性又具有inline的同行元素特性。
也就是说，当我们想让一个元素即不独占一行，又可以设置其宽高属性的时候，我们就可以选择inline-block了。
行内元素特点
- 和其他元素都在一行上；
- 元素的高度，宽度，行高及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
块级元素特点
- 每个块级元素都是从新的一行开始，并且其后的元素也另起一行；
- 元素的高度，宽度，行高及顶部和底部边距都是可以设置的；
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素一致），除非设定一个宽度。
在html中，span,a,lable,input,img,strong和em就是典型的行内元素。div,p,h1,form,ul,li就是块级元素。
块级元素是可以设置宽高的，但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行，给他设置宽高是没有用的。