可替换元素

可替换元素和不可替换元素

从元素本身的特点来讲,可以分为可替换元素(replaceable element)和不可替换元素(none-replaceable element)。

可替换元素

可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
可替换元素的属性可以不写,因为自带宽高,css的优先级<img>的属性要高,所以可以覆盖<img>的属性值。

(x)html中的<img><input><textarea><select><object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素。

MDN官网中对于可替换元素的概述是这样的:

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img><object><video> 和 表单元素,如<textarea><input> 。 某些元素只在一些特殊情况下表现为可替换元素,例如 <audio><canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements
CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。
需要注意的是,一部分(并非全部)可替换元素,本身具有尺寸和基线(baseline),会被像vertical-align之类的一些 CSS 属性用到。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概述 CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 ...
    OTT179阅读 3,996评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 空元素 一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子...
    达摩先森阅读 1,495评论 0 0
  • CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立...
    TravisW阅读 6,041评论 1 0
  • 根据MDN查询的定义,可替换元素是指元素内容的展现不是由CSS来控制的,而是外观渲染独立于CSS的外部对象。 简而...
    ttcs1991阅读 4,290评论 0 0