HTML行内元素、块状元素、行内块状元素的区别

　
HTML行内元素、块状元素、行内块状元素的区别

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

1.行内元素  span， <b>加粗 、 <i>倾斜 
                 <sub>和<sup>：平方的效果
 
    行内元素特征 ：(1)设置宽高无效

　　　　               (2)margin 左右方向有效，上下无效；
                                 padding设置上下左右都有效，即会撑大空间

　　　　               (3)不会换行（没有行）

 2.块状元素
    代表性的就是div，其他如p、nav、aside、header、footer、section、article、
                                         address、<h1-h6>、<ul>< li> 、<dl>< dd>< dt>等等，
                                语义化标签，使得代码可读性强，且便于查错。

　　块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

3.行内块状元素
　　行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。
       常见的行内块标签：<img>、<input>、<textarea>、<select> 、<option>

　　行内块状元素特征：(1)不自动换行（能和其他元素待在一行）

　　　　　　　　　　　(2)能设置宽高

　　　　　　　　　　　(3)默认排列方式为从左到右