首页 > 其他 > 详细

可替换元素是什么?

时间:2020-08-08 18:30:20      阅读:74      评论:0      收藏:0      [点我收藏+]

 

  请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。
 
  前端面试中HTML的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的HTML语义化,今天就借此机会来谈谈可替换元素。
 
  释义
 
  什么是可替换元素?顾名思义,就是会被替换的元素。(尬笑……
 
  比如一个典型的可替换元素img:
 
  <imgsrc=xxx.jpg>
 
  我们并没有在img标签中写入任何内容,那它的内容从哪里来的呢?
 
  是浏览器去下载src属性给到的图片,并用该图片资源替换掉img标签,而且浏览器在下载前并不知道图片的宽高。所以,可替换元素比较特殊,它的宽高是由其加载的内容决定的。(当然CSS可以覆盖其样式)
 
  示例
 
  还是用img标签举几个例子:
 
  <imgsrc="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
 
  该图片在页面中展现出来的话,就是图片本身本身的宽高。
 
  img元素也支持width和height属性:
 
  <imgwidth="80"height="80"src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
 
  此时该元素展现出来就是宽高为80像素。
 
  如果我们再用CSS去覆盖其样式:
 
  img{
 
  width:60px;
 
  height:60px;
 
  }
 
  该元素的展现即为60像素。
 
  MDN的释义
 
  看过上面的例子之后我们再来理解概念性的知识就比较容易了。
 
  可替换元素(replacedelement)的展现效果不是由CSS来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。
 
  简单来说,它们的内容不受当前文档的样式的影响。CSS可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。
 
  典型的可替换元素有<iframe><video><embed><img>,还有一些元素仅在特定情况下被作为可替换元素处理,比如<input>。

技术分享图片技术分享图片



本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h55810.shtml

可替换元素是什么?

原文:https://www.cnblogs.com/webpon/p/13458428.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!