替换元素_80%的前端会答错的问题:lt;imggt;是什么元素?
前言
某天晚上,和几个朋友去撸串,突然就聊到了面试,都在感叹现在的面试题太变态了,其中一个突然很神秘的问我:“你写前端这么久了,那你知道 <img> 是什么元素吗?”
于是我结合平时写页面的经验,脱口答道:“应该是内联元素吧。”但说出来就后悔了,因为肯定没那么简单。
果然,他像“非洲大山”穆托姆博那样对我摇了摇指头。
于是我回去就查了一下,发现答案还不是那么明朗,以下是百度和谷歌的结果:
但通过图中可以发现,都提到了一个词:替换。于是我去了更权威的 MDN web docs,寻找替换元素 的定义。
正文
什么是可替换元素?
在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。
简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。
其他的可替换元素
1. 典型的可替换元素
- <iframe>
- <video>
- <embed>
- <img>
2. 仅在特定情况下被作为可替换元素处理
- <option>
- <audio>
- <canvas>
- <object>
- <applet>
3. 特殊的 <input>
HTML 规范说明了 <input> 元素可替换,因为 "image" 类型的 <input> 元素就像 <img> 一样被替换。但是其他形式的控制元素,包括其他类型的 <input> 元素,被明确地列为非可替换元素(non-replaced elements)。
4. CSS 属性中的 content
用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中,因此是“匿名的”。
标签 <img> 的权威定义
这里还是要引用 MDN 的解释:
<img> 是一个可替换元素。它的 display 属性的默认值是 inline,但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的,使得它就像 inline-block 一样。你可以为 设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。 <img> 没有基线(baseline),这意味着,当在一个行内格式的上下文(an inline formatting context)中使用 vertical-align: baseline 时,图像的底部将会与容器的文字基线对齐。
CSS 在某些情况下会对可替换元素做一些特殊处理,比如计算外边距(margin)和一些 auto 的具体值。这就是为什么插入图片的时候,还同时需要设置一些 CSS 属性,否则总会出现一些你意料之外的表现。
结尾
在起标题的时候很纠结,因为也许会有很多读者能回答上来,或许是我孤陋寡闻了。但我问了几个(前)同事、朋友,他们都没有很完整的回答出来,所以最后还是决定使用这个标题,毕竟符合“二八定律”,如果有标题党的嫌疑,还请各位见谅。
但是,写页面这么久,包括平时的交流中,还真没深入讨论过这个问题,也可能是看某本书时提到过,但印象不深吧,直到被当做面试题来问。
这里再次暴露了一个现象级问题:面试到底应该问什么?
“面试造火箭,进去切图片”是近年前端面试的痛点,甚至去年面试过一家,笔试题里面居然有软件工程题和项目管理题,然后面试官还各种装X,说他很看中基础,公司是某个集团旗下的子公司,然后就他不知道哪个网站 copy 的智商题大谈自己的理解(好像是什么独木桥、两个手电筒,几个人,每个人过桥时间不一样,没有光照就 GG,求最佳过桥策略)。然后我心想:“我就是来面试前端的,跟我扯那么多有的没的是在干啥?还扯到项目管理,到底是招程序员还是招项目经理?”环顾四周,其实也就是个工厂改造的创业基地,面试的地方还堆了各种杂物……真是庙小妖风大,池浅王八多,拜拜您呐。
个人觉得,如果是招聘有经验的开发岗,应该多问问项目经验以及遇到问题的解决思路,这种没法靠背面试题来忽悠,而不是翻故纸堆,问“回”字有几种写法这种“孔乙己”式问题。
这类问题,看过就知道,没看就不知道,对项目的帮助微乎其微,除非面试的是架构师、算法岗这类需要很深的理论研究的。但据我观察,市场上绝大多数的前端,招进来就是写页面(除了大厂),而且在团队中也是很卑微的存在,重要性远比不上后端(这就是现状,因为很多领导、总监都是后端出身,对前端不那么重视)。
所以,面试的时候,少一些套路,多一些真诚不好吗?
最后,还是要引用一下 Linus 大神的名言:“屁话少说,放码过来。”
原作者姓名:布拉德特皮
原出处:掘金
原文链接:80%的前端会答错的问题:<img>是什么元素?
替换元素_80%的前端会答错的问题:lt;imggt;是什么元素?相关推荐
- [Android]打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。...
[错误] 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\android-sdks\system- ...
- 德国80%的统计学教授都会答错的6个与P值有关的问题!
欢迎关注"R语言和统计"~~ 在2022年的第2天,小编阅读了一篇发表于2002年关于P值的一项问卷调查研究 [1],作者在6所德国大学中邀请了3组不同的受试者,分别为: 心理学专 ...
- web前端的易错点和冷知识,新人必看!
都记录一些有关前端方面的冷知识或者一些易踩坑点,防止大家踩坑. JavaScript 所有对象都有 proto 属性,都指向创造对象的函数对象的 prototype. 上传文件要使用 formdata ...
- flex布局怎么设置子元素大小_Web前端(三):前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
- 谷歌AI聊天机器人Bard答错问题,股价大跌7.4%;淘宝屏蔽ChatGPT;孟晚舟4月将首次当值华为轮值董事长丨每日大事件...
数据智能产业创新服务媒体 --聚焦数智 · 改变商业 投融资 深氧科技获千万元级天使轮融资 3D短视频的一站式AIGC引擎技术服务提供商深氧科技于2月8日宣布完成由汉能创投投资的千万元级天使 ...
- 关于前端接口报错500原因
关于前端接口报错500原因 1.前端与后端入参有出入 2.前端请求头与后端有出入造成, 下面展示一些 内联代码片. Content-Type: application/x-www-form-urlen ...
- 前端接口报错431解决办法
起因 这次的项目使用的是后端返回的token来进行接口请求登录验证,由于后端没有进行优化,当权限过多时造成了前端请求时报错431,这我就头大了,接下来都无法进行开发了.当然这是在开发环境下,部署之后使 ...
- [Android]打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。
[错误] 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\android-sdks\system-im ...
- Python中删除set中指定元素元素不存在时不报错:s.discard()元素不存在时报错:s.remove()
[小白从小学Python.C.Java] [Python-计算机等级考试二级] [Python-数据分析] Python中删除set中指定元素 元素不存在时不报错:s.discard() 元素不存在时 ...
最新文章
- word文档基本编辑功能_【读者培训】Word在编辑长文档时的基本应用
- python第五章_Python数据分析-第5章Series(下)
- reverse函数实现vector变量的翻转
- 华为android系统最新版,谷歌再放大招截胡鸿蒙系统!发布最新版安卓系统:国产手机抢先升级...
- powerdesigner-建立数据库模型及全局脚本
- VisualSVNServer的使用
- CSS轮廓样式属性为,简述CSS轮廓样式
- C语言 结构体练习之投票
- django 清理缓存,解决manage.py没有clear_cache命令
- mysql status lock_MySQL性能突发事件问题排查技巧
- Nlpir Parser智能语义平台全文搜索
- python中实用的collections模块
- 电视机顶盒搜台原理和方法简析
- Win7窗口最大化和最小化快捷键
- 如何解决DNS解析错误
- Win10 如何解决,应用商店打不开,错误代码0x80131500问题
- 钓鱼c语言,C语言实现小猫钓鱼游戏
- python中步长什么意思,python步长是什么
- C语言《填数游戏》全流程
- 3dmax2014【3dsmax2014】官方简体中文(64位)安装图文教程、破解注册方法
热门文章
- php deprecated,解决php中each函数在7.2版本提示deprecated错误问题
- 基于小程序·云开发构建高考查分小程序丨实战
- [SimplePlayer] 1. 从视频文件中提取图像
- cogs 547:[HAOI2011] 防线修建
- 线程间通信 GET POST
- Calculation控制台
- 一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service(2)--在事件注册表单上创建表单加载规则...
- [剑指offer]面试题第[58-2]题[JAVA][左旋转字符串][拼接]
- 打架程序_学生打架不知道怎么处理?一般程序了解下,对你或许有帮助
- 微星刀锋 无法进入bios_夏天来了 微星主板风扇转速调节攻略