img的标签类型分析

刚刚在学习的时候，突然看到这么一个问题：<img>标签到底属于行内元素还是块元素？我第一时间想到的便是行内元素，这是毋庸置疑的，也是正确的，可是我们知道，<img>标签可以设置高宽，有点html基础的都应该知道，行内元素是有元素本身撑开一行的，因此无法设置高宽，那为何<img>标签可以设置呢？

带着这个问题，我查阅了相关资料，发现了一些很有意思的事情：

原来<img>标签属于替换元素，这是html中的一类特殊元素，具有内置的高宽属性，所以可以设置。

从元素本身的性质来看，元素分为可替换元素和不可替换元素，而html的元素种类大都为不可替换元素，而导致<img>可以设置高宽的原因如下：

1.浏览器根据元素的标签和属性，来决定元素的具体显示内容

2.浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容。

3.HTML中的 <img>、<input>、<textarea>、<select>、<object> 都是替换元素。这些元素往往没有实际的内容存在，都是一个空元素

可替换元素理解起来就像是在css样式中设置了display：inline-block一样具有两种元素样式的特性

可是我们需要牢记的一点是，等同不等于是！只是这样比较好理解这个问题，可是我们在使用时要把它看做行内样式！举个简单的例子，如果我们需要将一张图片设为居中，首先就要将图片设置为块内元素，才可以进行下一步操作。

下面是实例代码及图片：
 

没有添加display：block样式时

<style>
        img {
            margin-left: auto;
            margin-right: auto;
        }
</style>
<div class="box">
        <img src="./img/R-C.jpg" alt="" width="50%">
</div>

即使设置了margin-left: auto;margin-right: auto;也没有效果，而我们添加上display：block后变成了下面效果：

这点需要大家牢记，今天就先到这里，明天我们不见不散~~~。