企业信息网站,衡阳高端网站建设,汽车装饰网站模板,外包和劳务派遣哪个好[css] img标签是行内元素#xff0c;为什么却能设置宽高
原来CSS中还有一个概念#xff1a;可替换元素MDN上是这么解释的#xff1a;在 CSS 中#xff0c;可替换元素#xff08;replaced element#xff09;的展现效果不是由 CSS 来控制的。这些元素是一种外部对象…[css] img标签是行内元素为什么却能设置宽高
原来CSS中还有一个概念可替换元素MDN上是这么解释的在 CSS 中可替换元素replaced element的展现效果不是由 CSS 来控制的。这些元素是一种外部对象它们外观的渲染是独立于 CSS 的。简单来说它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置但不会影响到可替换元素自身的内容。例如 iframe 元素可能具有自己的样式表但它们不会继承父文档的样式。 典型的可替换元素有iframevideoembedimg有些元素仅在特定情况下被作为可替换元素处理例如input image 类型的 input 元素就像img一样可替换optionaudiocanvasobjectapplet已废弃CSS的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。这些元素有一个共性就是他们的内容都不是通过在标签内添加文本而是通过某个属性src、dataobject、labeloption或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;
2img元素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;个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
