块级、行内、行内块 三种显示模式的特点总结

块级元素	行内元素	行内块元素
display:block;	display:inline;	display:inline-block;
默认有宽度，父级的100%	宽高被内容撑开	受内容和默认样式的影响
设置宽高有效	设置宽高不生效	设置宽高有效
从上到下排列	从左到右排列	从左到右排列
四个方向内外间距都有效	左右方向内外间距有效 上下方向内外间距无效	四个方向内外间距都有效
无幽灵节点	有幽灵节点	有幽灵节点

注意1：内联元素包含行内元素与行内块元素

注意2：img图片虽然是行内元素，但是可以设置宽高，且四个方向的内外间距均生效

注意3：我们可以修改HTML元素的display属性值，切换显示模式

块级元素 —— display:block; 常见标签：div h1~h6 p form table ul li ...... 排列方式：按照标签的书写顺序从上往下依次排列 独占一行(一行指的是占其父元素宽度的100%) 可以指定width height

行内元素 —— display:inline; 常见标签：span a i b.... 排列方式：按照标签的书写顺序从左往右排列，可以与其它元素共处一行，一行放不下才显示在下一行 无法使用width和height改变宽高，大小是被内容撑开的 img元素是特殊的行内元素，它被称为可替换元素，它有自己的宽高，也可以修改宽高

行内块元素 —— display:inline-block; 常见标签：button input 既有行内元素的特点，又有块级元素的特点： 可以与其它元素共处一行(行内) 又可以指定宽高(块级)