行内元素、块级元素以及行内块元素介绍

大家好，欢迎来到IT知识分享网。

1. 行内元素：

常见标签有：a、span、sub、sup、br、strong、b、em、i、label

特点：【1】一行内可以存在多个

　　   【2】无法设置width、height，padding、margin值不能设置垂直方向，只可以设置水平方向，可以设置line-height

　　   【3】一个行内元素内可以包括行内元素和文本内容，a标签特殊：可以放块级元素、行内块元素，但不能再放一个a标签

　　   【4】宽度默认随文本内容变化

2. 块级元素：

常见标签有：div、ul、dl、ol、li、table、h1-h6、p、form、hr

特点：【1】一个块级元素占据一行

　　　【2】可以设置width、height、padding以及margin值

　　　【3】块级元素可以包含块级元素、行内元素以及行内块元素，文本类型块级元素特殊：如h1-h6、p标签，只能包含文本

　　　【4】宽度默认为父级元素宽度

3. 行内块元素：

常见标签有：img、input、td

特点：【1】一行可存在多个行内块元素，但它们之间存在空隙

　　　【2】可以设置width、height、padding以及margin值

　　　【3】宽度默认随文本内容变化

注意：【1】行内块元素的兼容性问题：

在 IE 旧版本中需要使用以下方式将元素设置为行内块元素，*zoom是设置hasLayOut为true，使其可以设置width和height，再使用*display设置其可以表现为行内块特性

  <style>
    div {
      display: inline-block;
      *zoom: 1;
      *display: inline;
    }
  </style>

【2】如何解决inline-block的空白间隙问题？

1. 手动去除标签之间的换行以及空格，会导致代码不美观
2. margin负值，优先使用
3. word-spacing 单词间距
4. letter-spacing 字符间距，但这个会导致重叠现象出现，个人使用无法达到预期效果
5. font-size: 0，但存在一个缺点，若子元素需要字体大小，则还需重新设置