彻底搞懂行内元素，块级元素，行内块元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
当然，他们之间也是可以转换的。

• display:inline;转换为行内元素
• display:block;转换为块状元素
• display:inline-block;转换为行内块状元素
  那各元素有些什么特征呢？

---

行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间　
(3)不会自动进行换行
元素：span 修饰字体和标签，还有和这两个标签可以直接做出平方的效果

---

块状元素特征：
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
元素：div、p、nav、aside、header、footer、section、article、ul-li、address

---

行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
综合了行内元素和块状元素的特性

---

总结
不管块级元素还是行内元素，区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。

块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
而行内块级元素又同时拥有块级元素和行内元素的特点。