可替换元素是什么？

　　请问什么是可替换元素和非可替换元素，它们的差异是什么？并举例说明。

 

　　前端面试中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{

 

　　60px;

 

　　height:60px;

 

　　}

 

　　该元素的展现即为60像素。

 

　　MDN的释义

 

　　看过上面的例子之后我们再来理解概念性的知识就比较容易了。

 

　　可替换元素（replacedelement）的展现效果不是由CSS来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于CSS的。

 

　　简单来说，它们的内容不受当前文档的样式的影响。CSS可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

 

　　典型的可替换元素有<iframe><video><embed><img>，还有一些元素仅在特定情况下被作为可替换元素处理，比如<input>。





本文转载自中文网

 

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