inline、block和inline-block的区别和相同处

一、行内、块级、 行内块元素

首先我们要先了解以上三个的定义和区别

a、行内元素

与其他行内元素并排，不可设置长宽，默认宽度即内容的宽度

b、块级元素

独占一行，可设置长宽，默认宽度为父元素的宽度。

c、行内块元素

结合了行内元素和块级元素的优点。可设置长宽，也可以和其他行内元素并排

inline是行内元素，block是块级元素，inline-block是行内块元素

二、相互转换

可以采用display: inline(转换成行内元素)、block(转换成块级元素)、inline-block(转换成行内块元素)
如下图

    cat
    dog


    
pig
    
horse


    
chicken
    
frog

image.png

三、注意

1、当inline-block遇到同类时（inline、inline-block），谁的margin、padding和line-height的大，就按照谁的来显示，如下

    
chicken
    
frog
    
cat
    
dog

image.png

2、父元素设置为inline-block
如果要实现如下图所示，frog和cat在chicken和dog中间，

image.png

可以设置中间的parent为inline-block，然后其中元素采用块级元素进行显示

    chicken
    
        
frog
          
cat
    
    dog

3、块级元素能够设置width和height，而行内元素则是无效。当块级元素设置了长宽，当内容超过了尺寸的时候，就会涉及到元素的呈现行为，对于溢出元素内容区的元素如何处理，主要是通过overflow来指定（visible:内容不会被修剪，会呈现在元素之外、hidden：内容被修剪，并且其余内容不可见、scroll：内容被修剪，但是会显示滚动条、auto:内容如果被修剪，显示滚动条、inherit 从父元素继承overflow的属性值）
4、行内元素的水平方向margin、padding有效，垂直方向则无效。
5、若执意要让行内元素的margin、padding、width和height有效，可以采用float(浮动)、固定定位和绝对定位来实现，如下

    chicken
    
        parent
    
    dog

image.png