display属性值之block、inline和inline-block

先说说display:block属性：
A. 设置了block的元素block独立占一行位置，后继的每个block都会在重起一行，默认情况下（不设置宽和高），block元素宽度自动填满其父元素宽度，高度则看它占的高度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。


block元素还可以设置margin和padding属性。
B. 接着说display:inline：
inline元素是内联元素，不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素设置水平方向的margin-left、margin-right、padding-left、 padding-right 都产生边距效果；但竖直方向的margin-top、margin-bottom、padding-top、 padding-bottom不会产生边距效果。
C. display:inline-block
将元素设置inline-block属性，对象就有了inline属性，比如元素会被排在一行内，同时，对象也有了block属性，比如可以设置高度和宽度。总而言之，设置inline-block属性值之后的内联对象会被排列在同一行内，使其既具有block的宽度高度特性又具有inline的同行特性。

请多多指教！