关于img标签的探讨：一直以来img属于那一种标签受到困惑，因为它既有块元素的特性也有行内元素的属性。它独占一行，也可以设置宽高。 在此重新学习一下标签元素的分类; html元素的分类：块元素、内联元素和内联块状元素。 块元素：
    
     、
     
、
     
...
     
、
      
       、
       
        、
        
         、
         
、
          
            、
           
 块级元素特点：（display:block;） 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 行内元素：
           、、
、、、、、、、、 行内元素特点：（display:inline） 1、和其他元素都在一行上； 2、元素的高度、宽度、行高及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 内联块状元素：、 内联块状元素特点：（display:inline-block） 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置 读了好多博客和知乎关于对img的解释，有的人把img解释为内联块元素，也有人分为置换元素。其实它的属性都具有两者的性质。 这来元素默认的宽高计算规则： 1.若宽高都设置为auto时，img有固定的宽高时，按其img固定宽高。input除外，宽设置为auto时会呈现浏览器默认的样式。 2.若有固定的宽，高为auto时，这时会根据 h = 宽度值 * 固有宽高比； 这个尤其在移动端常用，设置img的宽度，高度为auto；这样图片不会出现压缩，模糊等现象。（自己走过的坑）
          
         
          、