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元素的。