行内元素、块级元素以及行内块元素的区别

行内（内联）元素(display: inline )

a / strong / b / em / i / span / u / s / del / ins

1. 天生自带属性display: inline,通常用来进行文字(加粗，斜体，链接)、小图标（小结构）的搭建
2. 不独占一行，从左到右依次排列；排列到超出父元素的宽度会自动折行;
3. 设置宽高属性以及margin和padding的上下不起作用，需要加display:block/inline-block 去转换为块级元素
4. 不设置宽度属性的情况下，它的宽高是本身内容的宽高；

块级元素 (display:block)

div ul/li ol/li dl/dt/dd p h1-h6

1. 天生自带属性display: block,一般用来划分块结构或者搭建整个网页的布局
2. 独占一行，每个块级元素都会重新另起一行，从上到下依次排列；
3. 可以设置宽高以及盒子模型的所有的css属性
4. 块级元素不设置宽度的情况下，会继承父级元素的宽度,它的宽度是父元素的宽度;
5. 块级元素不设置高度的情况下，高度是它本身内容的高度;

行内块元素 (display: inline - block)

img

1. 既有行内元素的特点，又有块级元素的特点；
2. 可以设置宽高以及盒子模型的所有属性
3. 不独占一行