摘要:可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。例如元素,可能具有自己的样式表,但它们不会继承父文档的样式。使用属性插入的内容都是匿名的可替换元素。可替换元素拥有内置宽高,他们可以设置和。
之前刷面试题,看到一道题目 如题!?惊到了,以前写代码怎么没注意到这样的细节 ( ̄▽ ̄)"
真是才疏学浅了。
参考:可替换元素 - CSS:层叠样式表 | MDN
原来CSS中还有一个概念:可替换元素
MDN上是这么解释的:
在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。
简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。例如 元素,可能具有自己的样式表,但它们不会继承父文档的样式。
典型的可替换元素有:
有些元素仅在特定情况下被作为可替换元素处理,例如:
"image" 类型的 元素就像一样可替换
(已废弃)
CSS的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
这些元素有一个共性,就是他们的内容都不是通过在标签内添加文本,而是通过某个属性(src、data()、label()或js控制())来显示内容的。
可替换元素拥有内置宽高,他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。
ps:我在看别人的资料的时候,看到个误区,textarea、button等并不是可替换元素,他们是浏览器默认的内联块元素。
额外知识:
当需要给图片设定固定宽高,并需要不拉伸时(等类似情况),
1)背景图,background-size配合background-position。(适用于装饰性图片)
background-size: [
background-position: [ left | center | right | top | bottom |
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-height。
解决:img元素display: block;
图片来自:CSS深入理解vertical-align和line-height的基友关系
3.vertical-align 只对行内元素、表格单元格元素生效。
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom |
图片来自:深入理解 CSS 中的行高与基线
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114545.html
摘要:可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。例如元素,可能具有自己的样式表,但它们不会继承父文档的样式。使用属性插入的内容都是匿名的可替换元素。可替换元素拥有内置宽高,他们可以设置和。 之前刷面试题,看到一道题目 如题!?惊到了,以前写代码怎么没注意到这样的细节 ( ̄▽ ̄)真是才疏学浅了。参考:可替换元素 - CSS:层叠样式表 | MDN showImg(https...
摘要:先来一张图,看懂的几个属性顺便带上图片出处,文章讲得还可以,理解这张图片,后面就好理解了。元素根据标签的属性决定显示输入框还是按钮。还有,还有近来很火的。 最近看到一篇20 个CSS高级技巧汇总的汇总,感触很深,不过我想,与技巧相比,有些常见css布局难题,有时候更加让我们的日常开发变得踌躇沮丧吧。在写这一篇文章之前,自己还写过一篇:我所不注意的那些CSS冷知识,但却阻止了我做项目的速...
摘要:宋体块级元素主要有宋体宋体内联元素不会以新行开始,和相邻的内联元素在同一行。也就是说,绝对定位或者浮动的内联元素,实际表现为块级元素,可以设置宽高和边距。为什么有些内联(行内)元素如img、input可以设置宽高? 在说明之前我们先来了解一些定义。 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示。 宽度(width)、高度(height)、...
摘要:一和都可以为页面引入,区别方式方式祖先的差别,属于标签,而完全是提供的一种方式。继承父元素属性的值十有哪些性特征。给超出高度的标签设置或者设置行高小于你设置的高度 一. link和import都可以为页面引入css,区别?link方式:@import 方式 @import a.css ① 祖先的差别,link属于XHTML标签,而@import完全是css提供的一种方式。li...
阅读 1331·2021-11-15 11:37
阅读 2215·2021-09-23 11:21
阅读 1303·2019-08-30 15:55
阅读 2107·2019-08-30 15:55
阅读 2816·2019-08-30 15:52
阅读 2820·2019-08-30 11:12
阅读 1574·2019-08-29 18:45
阅读 1886·2019-08-29 14:04