[css] img标签是行内元素,为什么却能设置宽高
原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。 典型的可替换元素有:<iframe><video><embed><img>有些元素仅在特定情况下被作为可替换元素处理,例如:<input> "image" 类型的 <input> 元素就像<img>一样可替换<option><audio><canvas><object><applet>(已废弃)CSS的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。这些元素有一个共性,就是他们的内容都不是通过在标签内添加文本,而是通过某个属性(src、data(<object>)、label(<option>)或js控制(<canvas>))来显示内容的。可替换元素拥有内置宽高,他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。ps:我在看别人的资料的时候,看到个误区,textarea、button等并不是可替换元素,他们是浏览器默认的内联块元素。display: inline-block;display: inline-block;额外知识:1. 当需要给图片设定固定宽高,并需要不拉伸时(等类似情况),1)背景图,background-size配合background-position。(适用于装饰性图片)background-size: [ <length-percentage> | auto ]{1,2} | cover | contain;background-position: [ left | center | right | top | bottom | <length-percentage> ]{1,2}background-position值还可以是边偏移量:例:background-position: bottom 10px right 20px;2)img元素,object-fit配合object-position。(适用于内容图片)object-fit: fill | contain | cover | none | scale-down;object-position: 同background-position;object-position和background-position的区别在于默认值不同,object-position默认为50% 50%;background-position默认为0% 0%;2. 图片img元素下面有一段空白区域,是因为vertical-align和line-heigh空白区域空白区域解决:img元素display: block;3.vertical-align 只对行内元素、表格单元格元素生效。 vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题