CSS块级元素、行内元素、行内块级元素

块级元素
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为块级元素

display: block;

常见块级元素：div p ul ol li 等；

1、每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

2、元素的高度、宽度、行高和顶底边距都是可以自行设置的，以此来对大小进行设置。

3、如果元素的宽度不进行设置的话会默认是父元素的宽度。

4、支持全部的样式

行内元素

因为文档流是从左到右，上到下的显示，行内元素它的所有子元素会在一行显示，如果所有子元素的宽度超过了其父容器的宽度，则会自动换到下一行.

display: inline;

常见的行内元素a span img 等

1、行内元素不会独占一行，只会占领自身宽高所需要的空间；

2、给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；

3、行内元素一般不可以包含块级元素，只能包含行内元素和文本；

行内元素相较于inline-block元素和块级元素最大的区别点是，行内元素不能设置宽高，行高（line-height），margin-top和margin-bottom设置对于行内元素也是无效的。

行内块级元素

inline-block可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，也可以和其他行内元素并排。

display：inline-block；

1、支持部分样式（不支持宽、高、margin上下、padding上下）

2、宽高由在里面的内容决定

3、如果代码换行的话，盒子之间会产生间距

4、子元素是内联元素，父元素可以用text-align属性设置子元素水平对方方式

在换行后会有间隙，可以设置父元素的font-size:0px取消间隙，然后再分别设置各个子元素的font-size数值将内容恢复正常。