前端之旅HTML与CSS篇之block与inline的区别

display:block;和display:inline;的区别
block元素特点：
1）处于常规流中时，如果width没有设置，会自动填充满父容器
2）可以应用margin/padding
3）在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4）处于常规流中时，布局在前后元素位置之间（独占一个水平空间）
5）忽略vertical-align
inline元素特点：
1）水平方向上根据direction依次布局
2）不会在元素前后进行换行
3）受white-space控制
4）margin/padding在竖直方向上无效，水平方向上有效
5）width/height属性对非替换行内元素无效，宽度由元素内容决定
6）非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
7）浮动或绝对定位时会转换为block
8）vertical-align属性生效