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

参考链接1

参考链接2

参考链接3

参考链接4(全)

1、常见块级元素
div ，hr , p ，ul , li ,ol，h1-h6，dl，form，table
2、常见行内元素
span ,a ,strong ,em ,b ,s ,i ,font…

传统网页的布局分为三种方式
1、普通流(标准流/文档流)–标签按照默认方式排列
标签分为：
块内元素：独占一行，从上而下排列。
行内元素：一行可放多个，从左到右排列。
行内块元素：上述二者的结合体

注意：实际开发中，一个网页基本包含了3种布局方式(移动端更多)

浮动特性：
1、脱标
2、浮动元素一行显示
3、任何类型的元素，只要加了浮动，都具有行内块元素相似的特性。
（1）如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
（2）浮动的盒子中间是没有缝隙的，是紧挨着一起的
（3）行内元素同理

浮动应用：
1、浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.

摘要：

(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
使用css的display可以进行类型转换

行内元素最常使用的就是span，(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
　　
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等，都可以用div来实现。
块状元素特征：(1)能够识别宽高
2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
5）若没有加浮动，没设置宽度，其宽度将和父亲的宽度一样，若其父亲的是body，则其宽度为100%。若加浮动，不加宽度，块内元素由内容撑起来的宽度。

行内块状元素：<img> <input><td>。综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。可以给他们设置宽高、对齐属性。
行内块状元素特征：(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右