以前在自学的过程中,只了解到行内元素以及块级元素。
- 行内元素:
1.设置宽高无效
2.设置margin,左右有效,上下无效;设置padding,上下左右都有效,即会撑大空间
3.不能自动换行
如:<span>
- 块级元素:
1.能够设置宽高
2.margin,paddin上下左右都有效
3.可以自动换行
4.多个块级元素,从上到下排列
但是问题来了~
<img>是行内元素,为什么它可以设置宽高?
我们很明显发现第二幅图的宽高被设置了,到底是怎么回事~
这里,<img>实际上就是所谓的替换元素
替换元素在MDN上的解释:CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>
、 <object>
、 <video>
和 表单元素,如<textarea>
、 <input>
。 某些元素只在一些特殊情况下表现为可替换元素,例如 <audio>
和 <canvas>
。 通过 CSS content
属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements)。
CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。
需要注意的是,一部分(并非全部)可替换元素,本身具有尺寸和基线(baseline),会被像vertical-align
之类的一些 CSS 属性用到。
由于我的CSS水平感人,不太能理解所有的意思,参考了一些博客,就在我所学习到的知识范围内做了一个理解:可替换元素所显示的内容,需要浏览器根据元素的属性去判断。
比如<img>元素,本身并没有什么内容,内容是有属性src决定的;又如<video>是同样的道理;又如<input>,其内容是由type属性确定。
所以,我们刚才的<img>,由于虽然是行内元素,但是也是替换元素,宽高由属性src的内容决定。而<span>作为行内元素,为非替换元素,它是什么,就显示什么,有行内非替换元素的特征。
写完了还有点乱~遇到了,接着写~