关于img标签的探讨

关于img标签的探讨：一直以来img属于那一种标签受到困惑，因为它既有块元素的特性也有行内元素的属性。它独占一行，也可以设置宽高。

在此重新学习一下标签元素的分类;
html元素的分类：块元素、内联元素和内联块状元素。
块元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：（display:block;）
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

行内元素特点：（display:inline）
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素：<img>、<input>

内联块状元素特点：（display:inline-block）
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置

读了好多博客和知乎关于对img的解释，有的人把img解释为内联块元素，也有人分为置换元素。其实它的属性都具有两者的性质。
这来元素默认的宽高计算规则：
1.若宽高都设置为auto时，img有固定的宽高时，按其img固定宽高。input除外，宽设置为auto时会呈现浏览器默认的样式。
2.若有固定的宽，高为auto时，这时会根据 h = 宽度值 * 固有宽高比；
  这个尤其在移动端常用，设置img的宽度，高度为auto；这样图片不会出现压缩，模糊等现象。（自己走过的坑）