前端之旅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属性生效

上一篇:CSS position:absolute浅析


下一篇:关于display的属性:block和inline-block以及inline的区别,float相关说明