行内元素,块元素,置换元素(替换元素,非替换元素) img属于什么元素

html元素分类

部分初学者估计是和我一样,刚开始只注意到了html元素分为块元素(block)和行内元素(inline).这里先简单的说下行内元素和块元素的特性:

block:(div/p/dl/form/h1-h6/ol/ul):

1. 独占一行
2. 高度有里面的元素撑开
3. 宽度默认100%(继承父元素宽度)
4. 可以设置外边距/内边距
5. 可以包裹其他任意元素
6. p标签比较特殊: 不可包裹块元素(只存放文本)

这里要说下p元素中放个块元素会发生什么:

<p>
    <div></div>
</p>

这个在浏览器中就会被解析为

<p></p>
<div></div>
<p></p>

行内元素特性:(a/b/em/i/img/span)

1. 和其他行内元素处于同一行
2. 不支持宽高
3. 上下外边距无效,auto无效(不支持auto居中)
4. 内边距只对内联元素产生影响,无视块元素
5. 标签中间的空格解析
6. a 比较特殊 能包裹块元素(区域链接)

看到这里,一些动手写过code的同学估计就会有疑问????行内元素不能设置上下外边距(margin-top, margin-bottom), 但是他居然对<img src="" alt="">生效了.
好吧,这个问题同时也让我头疼一阵子.有些人会说可以把img看作是拥有inline-block(行内块元素)的特性,但是是inline(行内元素),是不是有点绕口, 也就跟着一知半解的这么记了记,会用就行.根据我查的资料,我是这么理解的(fllowing):
<img>是替换内联元素replaced inline element.

行内元素同时也分为替换内联元素和非替换内联元素:

不可替换元素

HTML的大多数元素是不可替换元素,即内容直接表现给用户端(直接呈现给浏览器界面).
<p>段落内容</p>
段落<p>是一个不可替换元素,文字"段落内容"全部被显示出来

可替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素具体显示内容.
先用简单的input便签来说明下

<input type="text">

在更改type 的赋值时, input样式也会随之更改,eg:<input type="radio">,<input type="password">等等, 不同的type值 呈现的样子会不一样.

img

浏览器会根据<img>标签的src属性的值来读取图片信息并且显示出来,如果只是查看html代码就看不到图片的实际内容.

行内非替换元素特性

行内替换元素遵从上面的行内元素的特性

行内替换元素特性

width,height,margin的四个方向,padding的四个方向 都正常显示,并且遵循标准的css盒模型

哪些是替换元素,那些事非替换元素

具体哪些元素是替换元素呢?
<img>`<object>videotextarea`inout,还有一些元素只在特殊情况下表现为可替换元素:audio canvas,通过CSScontent属性插入的对象北辰做匿名可替换元素(anonymous replaced elements).