HTML元素分类：inline、inline-block、block

三者可以互相转化——设置display属性值：inline、inline-block、block

inline

textarea、span、a、img、input、select 　行内元素特征：(1)设置宽高无效

(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间,行内元素尺寸 由内含的内容决定，盒模型中 padding, border 与块级元素并无差异，都是标准的盒模型，但是 margin 却只有水平方向的值，垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin- left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都 不会产生边距效果。padding设置上下左右都有效，即会撑大空间但是不会产生边距效果。

(3)不会自动进行换行

     (4)元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block

行内块状元素特征：(1)不自动换行

(2)能够识别宽高

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

block

div、p、ul、h1等标题元素、ol、form、table 块状元素特征：(1)能够识别宽高

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

(3)可以自动换行

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

补充说明：

在HTML5中，程序员可以自定义标签，在任意定义标签中，加入display:block;即可，当然也可以是行内或行内块状。

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。 　　* applet - java applet 　　* button - 按钮 　　* del - 删除文本 　　* iframe - inline frame 　　* ins - 插入的文本 　　* map - 图片区块(map) 　　* object - object对象 　　* script - 客户端脚本 inline-block和float的区别

1、文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

2、水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

4、空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴.

参考链接：https://blog.csdn.net/zhanglir333/article/details/79178370 https://www.jianshu.com/p/cca9f037a6b9