inline,inline-block,block元素的区别

html元素分成inline，inline-block, block元素

inline元素称为行内元素.inline元素的宽高之和元素内的内容有关。当有多个行内元素和行内块级元素时，他们会并排排列，不会独占一行。

inline元素相较于inline-block元素和block元素最大的区别点是，该种元素不能设置宽高，行高（line-height），盒子模型中的margin-top和margin-bottom设置对于inline元素也是无效的，这个大家在使用中要注意，其他的盒子模型中的属性padding,margin-left,margin-right都是可以正常使用，这个是inline元素和其他类型元素的最大区别。

我们常用的html中的行内元素有：span, i, b, label, a, img, addr,em ,strong等

inline-block元素称为行内块级元素，我们通常可以将inline元素通过设置display: inline-block，将行内元素设置为行内块级元素。设置成行内块级元素后就可以设置元素的宽和高，从而可以在网页布局中控制元素宽和高，从而实现符合需求的css布局。行内元素在通常浏览器使用中会有3px bug的问题，就是两个相邻的inline-block元素之间会有3px的间隙，这样往往会成为网页排版中的bug，通常情况下我们可以通过设置包含inline-block元素的font-size属性设置为0，然后在inline-block元素中设置font-size。第二种是通过float浮动布局来消除这种问题。inline-block元素有img

block元素称为块级元素。相对于前两种元素，块级元素布局会独占一行，可以设置元素的宽高和行高。也可以将块级元素通过设置display: inline,inlie-block转换成另外两种元素。

常用的块级元素：div，ul，li，dl，p，h等元素

刚才提到的这三种元素可以通过display: inline, inline-block,block相互转换，但是再具体coding过程中，我们要遵循html的语义化原则，我们尽量使用相应的元素，而不是通过设置display属性，但inline转inline-block元素是比较常用的。其次对于html的嵌套原则，原则上inline元素是不能够嵌套inline-block,block元素的。