block、inline、inline-block对比

display:block

　　1.block元素会独占一行，多个block元素会各类新起一行。默认状况下，block元素宽度自动填满其父元素容器；

　　2.block元素能够设置width和height属性，块级元素即便设置宽度仍是会独占一行；

　　3.block元素能够设置margin和padding；

display:inline

　　1.inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列不下，才会新起一行，起宽度随元素内容而变化；

　　2.inline元素设置width和height无效；

　　3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果；

display:inline-block

　　1.将对象呈现为inline对象，可是对象的内容做为block对象呈现，以后的内联对象会被排列在同一行内。好比咱们给a标签inline-block属性值，使其既具备block的宽度高度特性又具备inline的同行特性；