刷了之前的面试题，看到了一道题目一样的题目！？我很奇怪，为什么我以前写代码的时候没有注意到这样的细节(￣▽￣)”我真是无知。参考：可替换元素-CSS：层叠样式表|MDN原来CSS中还有一个概念：可替换元素MDN是这样解释的：在CSS中，可替换元素的显示效果不受CSS控制。这些元素是外部对象，它们的外观渲染与CSS无关。简单来说，它们的内容不受当前文档样式的影响。CSS可以影响被替换元素的位置，但不会影响被替换元素本身的内容。例如，元素可能有自己的样式表，但它们不继承父文档的样式。典型的可替换元素有：<iframe><video><embed><img>一些元素只在特定情况下被视为可替换元素，例如：<input><input>oftype"image"元素是可替换的，如<img>对于<option><audio><canvas><object><applet>（已弃用）CSS的content属性用于在元素的::before和::after伪元素中插入内容。使用content属性插入的内容是一个匿名的可替换元素。这些元素有一个共同点，就是它们的内容不是通过在标签中添加文本来添加的，而是通过一个属性（src、数据（<object>）、标签（<option>）或者js控件（<canvas>))来显示内容。可替换元素内置了宽度和高度，它们可以设置宽度和高度。它们的性质与设置了display:inline-block的元素一致。ps：我在看别人资料的时候看到一个误会。文本区域、按钮等不是可替换元素。它们是浏览器默认的内联块元素。补充知识：当需要给图片设置固定的宽高，并且不需要拉伸时（类似情况），1）背景图片，background-size匹配background-position。（适用于装饰图像）background-size:[<length-percentage>|汽车]{1,2}|封面|包含；背景位置：[左|中心|对|顶部|底部|<length-percentage>]{1,2}background-position值也可以是边偏移量：例子：background-position:bottom10pxright20px;2)img元素，object-fitwithobject-position。（适用于内容图片）object-fit:fill|包含|封面|无|缩小;50%50%；背景位置默认为0%0%；2、由于vertical-align和line-height的原因，imageimg元素下方有空白区域。解决方案：img元素显示：block；图片来自：CSS深入理解vertical-align和line-height的友情3.vertical-align只对行内元素和tablecell元素生效。垂直对齐：基线|子|超级|文字置顶|文本底部|中间|顶部|底部|<百分比>|</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="前端面试CSS环节问题 top、translateY这种属性如果使用百分比，是相对于谁的百分比" href="/webqianduan/207176.html">前端面试CSS环节问题 top、translateY这种属性如果使用百分比，是相对于谁的百分比</a> </div> <div class="prev">下一篇：<a title="ATaleofTwoViewports-DesktopEdition(翻译)" href="/webqianduan/207178.html">ATaleofTwoViewports-DesktopEdition(翻译)</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>为什么img标签是内联元素，可以设置宽高？相关文章</code></div> <ul> <li><a href="/kejifunen/368062.html" target="_blank" title="智能手表销量首次超越瑞士手表！为什么">智能手表销量首次超越瑞士手表！为什么</a></li> <li><a href="/kejifunen/368025.html" target="_blank" title="自由湾！为什么选择Zephyr来开发可穿戴设备？ ">自由湾！为什么选择Zephyr来开发可穿戴设备？ </a></li> <li><a href="/kejifunen/368017.html" target="_blank" title="为什么 Fitbit 和 Apple Watch 不及格？ ">为什么 Fitbit 和 Apple Watch 不及格？ </a></li> <li><a href="/kejifunen/367945.html" target="_blank" title="20个动铁单元 为什么这款耳机要过万？ ">20个动铁单元 为什么这款耳机要过万？ </a></li> <li><a href="/kejifunen/367850.html" target="_blank" title="苹果为什么要把Apple Watch打造成“时尚”产品？ ">苹果为什么要把Apple Watch打造成“时尚”产品？ </a></li> <li><a href="/kejifunen/367792.html" target="_blank" title="为什么高端小米电视都采用中端芯片？ ">为什么高端小米电视都采用中端芯片？ </a></li> <li><a href="/kejifunen/367662.html" target="_blank" title="为什么扛起自动驾驶大旗的是百度Apollo而不是谷歌Waym">为什么扛起自动驾驶大旗的是百度Apollo而不是谷歌Waym</a></li> <li><a href="/kejifunen/367644.html" target="_blank" title="为什么说未来好的HR一定是好的数据分析师？ ">为什么说未来好的HR一定是好的数据分析师？ </a></li> <li><a href="/kejifunen/367624.html" target="_blank" title="为什么选华为nova3不选vivo X21？这些理由够不够？">为什么选华为nova3不选vivo X21？这些理由够不够？</a></li> <li><a href="/kejifunen/367517.html" target="_blank" title="为什么AR初创公司不像VR那么受欢迎也许问题不在于技术和使用">为什么AR初创公司不像VR那么受欢迎也许问题不在于技术和使用</a></li> <li><a href="/kejifunen/367402.html" target="_blank" title="为什么大多数视频网站在VR热潮中如此谨慎？ ">为什么大多数视频网站在VR热潮中如此谨慎？ </a></li> <li><a href="/kejifunen/367284.html" target="_blank" title="为什么绿巨人浩克不使用 Apple Watch 来监测心率？">为什么绿巨人浩克不使用 Apple Watch 来监测心率？</a></li> <li><a href="/kejifunen/367181.html" target="_blank" title="自动驾驶的前世今生（一）！为什么要打架？ ">自动驾驶的前世今生（一）！为什么要打架？ </a></li> <li><a href="/kejifunen/367081.html" target="_blank" title="为什么Apple Watch仍然无法避免被遗忘的命运">为什么Apple Watch仍然无法避免被遗忘的命运</a></li> <li><a href="/kejifunen/366966.html" target="_blank" title="酷刑可穿戴！为什么智能手环经常出现质量问题">酷刑可穿戴！为什么智能手环经常出现质量问题</a></li> <li><a href="/kejifunen/366729.html" target="_blank" title="为什么2016年中国VR厂商纷纷开店？ ">为什么2016年中国VR厂商纷纷开店？ </a></li> <li><a href="/kejifunen/366717.html" target="_blank" title="为什么OLED电视还没有打败液晶电视？ ">为什么OLED电视还没有打败液晶电视？ </a></li> <li><a href="/kejifunen/366686.html" target="_blank" title="为什么AI可以让死去的亲人“重生”">为什么AI可以让死去的亲人“重生”</a></li> <li><a href="/kejifunen/366651.html" target="_blank" title="全景摄影变得越来越流行，为什么VR还没有跟上？ ">全景摄影变得越来越流行，为什么VR还没有跟上？ </a></li> <li><a href="/kejifunen/366577.html" target="_blank" title="为什么选择海尔KJ-F300F-MFC空气净化器在家除甲醛？">为什么选择海尔KJ-F300F-MFC空气净化器在家除甲醛？</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371111.html" title="明星都在玩VR，你为什么不跟上呢？ " target="_blank">明星都在玩VR，你为什么不跟上呢？ </a></li> <li><em>2</em><a href="/kejifunen/371023.html" title="我为什么不投资人工智能？ " target="_blank">我为什么不投资人工智能？ </a></li> <li><em>3</em><a href="/kejifunen/370971.html" title="苏宁手机的火爆程度让网友们为之疯狂，他们为什么要寻找它来购买" target="_blank">苏宁手机的火爆程度让网友们为之疯狂，他们为什么要寻找它来购买</a></li> <li><em>4</em><a href="/kejifunen/370817.html" title="重新思考可穿戴设备和数据利用！为什么这么难坚持" target="_blank">重新思考可穿戴设备和数据利用！为什么这么难坚持</a></li> <li><em>5</em><a href="/kejifunen/370782.html" title="为什么VERTU手机总是受到精英人士的青睐？ " target="_blank">为什么VERTU手机总是受到精英人士的青睐？ </a></li> <li><em>6</em><a href="/kejifunen/370678.html" title="为什么美国AR公司Meta被认为能够挑战微软的Hololen" target="_blank">为什么美国AR公司Meta被认为能够挑战微软的Hololen</a></li> <li><em>7</em><a href="/kejifunen/370482.html" title="苹果为什么要在watchOS 3智能手表平台上推出呼吸应用程" target="_blank">苹果为什么要在watchOS 3智能手表平台上推出呼吸应用程</a></li> <li><em>8</em><a href="/kejifunen/370457.html" title="智能手表新创意！为什么不能有两个屏幕？ " target="_blank">智能手表新创意！为什么不能有两个屏幕？ </a></li> <li><em>9</em><a href="/kejifunen/370337.html" title="看完这些评论终于知道为什么魅族16th在京东能获得99.41" target="_blank">看完这些评论终于知道为什么魅族16th在京东能获得99.41</a></li> <li><em>10</em><a href="/kejifunen/370331.html" title="为什么需要两台机器来扫地和拖地？浦桑尼克LDS M6不仅仅可" target="_blank">为什么需要两台机器来扫地和拖地？浦桑尼克LDS M6不仅仅可</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/370321.html" title="为什么苹果 AirPods 如此重要？因为它将颠覆一切" target="_blank">为什么苹果 AirPods 如此重要？因为它将颠覆一切</a></li> <li><em>2</em><a href="/kejifunen/370146.html" title="都说VR头显没机会创业了，为什么还在做" target="_blank">都说VR头显没机会创业了，为什么还在做</a></li> <li><em>3</em><a href="/kejifunen/370081.html" title="撕掉定制流量标签后，还剩多少家家居企业能够成功？ " target="_blank">撕掉定制流量标签后，还剩多少家家居企业能够成功？ </a></li> <li><em>4</em><a href="/kejifunen/369941.html" title="融资达30亿美元，VR-AR的颓势无法掩盖，为什么金钱吸引力" target="_blank">融资达30亿美元，VR-AR的颓势无法掩盖，为什么金钱吸引力</a></li> <li><em>5</em><a href="/kejifunen/369903.html" title="为什么魅族16需要屏下指纹识别？工程师的话令人心碎" target="_blank">为什么魅族16需要屏下指纹识别？工程师的话令人心碎</a></li> <li><em>6</em><a href="/kejifunen/369802.html" title="丢掉角色，丢掉标签！ 717京东游戏日，做最酷的自己" target="_blank">丢掉角色，丢掉标签！ 717京东游戏日，做最酷的自己</a></li> <li><em>7</em><a href="/kejifunen/369564.html" title="为什么 Magic Leap 和微软要制造 AR 眼镜！关于" target="_blank">为什么 Magic Leap 和微软要制造 AR 眼镜！关于</a></li> <li><em>8</em><a href="/kejifunen/369552.html" title="为什么华为nova 3选择易烊千玺？年轻有实力的群体定位精准" target="_blank">为什么华为nova 3选择易烊千玺？年轻有实力的群体定位精准</a></li> <li><em>9</em><a href="/kejifunen/369522.html" title="为什么去年中国VR头戴设备只卖出了30万台？ " target="_blank">为什么去年中国VR头戴设备只卖出了30万台？ </a></li> <li><em>10</em><a href="/kejifunen/369447.html" title="小米，为发烧而生，为什么智能跑鞋没有“加热”功能？ " target="_blank">小米，为发烧而生，为什么智能跑鞋没有“加热”功能？ </a></li> <li><em>11</em><a href="/kejifunen/369312.html" title="当每个人都拥有智能手机时，为什么我们还需要佩戴手表？ " target="_blank">当每个人都拥有智能手机时，为什么我们还需要佩戴手表？ </a></li> <li><em>12</em><a href="/kejifunen/369232.html" title="为什么教智能音箱一门新语言如此困难？ " target="_blank">为什么教智能音箱一门新语言如此困难？ </a></li> <li><em>13</em><a href="/kejifunen/369062.html" title="为什么投影仪的图像与原始图像相差如此之大？原来这就是原因" target="_blank">为什么投影仪的图像与原始图像相差如此之大？原来这就是原因</a></li> <li><em>14</em><a href="/kejifunen/368926.html" title="让我们从 Apple Watch 开始吧！为什么苹果的产品版" target="_blank">让我们从 Apple Watch 开始吧！为什么苹果的产品版</a></li> <li><em>15</em><a href="/kejifunen/368838.html" title="为什么苹果比谷歌更了解智能手表？ " target="_blank">为什么苹果比谷歌更了解智能手表？ </a></li> <li><em>16</em><a href="/kejifunen/368810.html" title="传闻阿里巴巴将收购饿了么！为什么上海的互联网公司总是被卖？ " target="_blank">传闻阿里巴巴将收购饿了么！为什么上海的互联网公司总是被卖？ </a></li> <li><em>17</em><a href="/kejifunen/368729.html" title="为什么智能戒指Ring众筹成功却遭到不少诟病？ " target="_blank">为什么智能戒指Ring众筹成功却遭到不少诟病？ </a></li> <li><em>18</em><a href="/kejifunen/368431.html" title="智能电视只要连接网线就可以观看，那为什么还需要安装电视盒呢？" target="_blank">智能电视只要连接网线就可以观看，那为什么还需要安装电视盒呢？</a></li> <li><em>19</em><a href="/kejifunen/368364.html" title="全球第一份AR报告用两万字告诉你为什么比VR更酷（全文）" target="_blank">全球第一份AR报告用两万字告诉你为什么比VR更酷（全文）</a></li> <li><em>20</em><a href="/kejifunen/368334.html" title="看完这些样张，我明白为什么华为P20 Pro称霸DxOMar" target="_blank">看完这些样张，我明白为什么华为P20 Pro称霸DxOMar</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>
