关于置换和非置换元素

原创 2015年07月19日 13:19:08

一、引题

在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的,但是也有特殊。比如img是内联元素,但可以设置宽高,这肯定让不少人迷惑。这样我们就要引入HTML中置换元素的概念(非置换元素在w3c中没有给出明确的解释,姑且我们就把除置换元素外的元素当作非置换元素吧)。

二、置换元素与非置换元素

a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。 
例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input>标签的type属性来决定是显示输入框,还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>、<object>都是置换元素。这些元素往往没有实际的内容,即是一个空元素。

置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。

b) 不可替换元素:(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(如浏览器)。

例如: <label>label中的内容</label> 标签<label>是一个非置换元素,文字label中的内容”将全被显示。 


【吴刚】网页元素设计WUI零基础入门视频教程

本套教程循序渐进,深入浅出,全篇干货,系统化的通过网页元素、网页元素的应用、网页元素的用户交互使用规范,以及相关的技术实现方法等各方面内容。
  • 2018年03月23日 12:52

置换元素(替换元素)和非置换元素(不可替换元素)

置换元素/替换元素 1.1. 一个 内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。 1.2....
  • SakuraLLj
  • SakuraLLj
  • 2015-09-08 09:55:42
  • 5385

HTML中置换元素和非置换元素

一、引题 在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的,但是也有特殊。比如img是内联元素,但可以设置宽高,这肯定让不少人迷惑。这样我们就要引入HTML中置换元素...
  • WKY_CSDN
  • WKY_CSDN
  • 2017-03-24 12:10:40
  • 457

javascript 替换元素节点replaceChild()

替换元素节点replaceChild()replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 语法: node.replaceChild (newnode,oldnew ) ...
  • baidu_32731497
  • baidu_32731497
  • 2016-07-01 21:30:36
  • 5094

替换元素、非替换元素、行内元素框模型

对于以前比较模糊的几个概念:替换元素、非替换元素、行内元素框模型,做了如下总结...
  • chenmoquan
  • chenmoquan
  • 2015-03-26 10:21:50
  • 4115

【前端攻城狮之路】为何img、input等内联元素可以设置宽、高?——替换元素的引出

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如和就不同,而和也不一样。在文档类型定义(DTD)中对不同的元素...
  • qq846294282
  • qq846294282
  • 2016-12-02 17:18:54
  • 149

HTML置换元素与非置换元素

一、置换元素1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。 2. 置换元素就是浏览器根据...
  • qq_38602656
  • qq_38602656
  • 2018-03-10 18:19:08
  • 18

关于置换和非置换元素

一、引题 在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的,但是也有特殊。比如img是内联元素,但可以设置宽高,这肯定让不少人迷惑。这样我们就要引入HTML中...
  • lai_xu
  • lai_xu
  • 2015-07-19 13:19:08
  • 2694

置换元素

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 、 、 和 表单元素,如、 。 某些元...
  • thqy39
  • thqy39
  • 2017-06-20 20:04:37
  • 45

HTML中的置换元素与非置换元素

什么是置换元素? 一个 内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。 什么是非置换元...
  • chandoudeyuyi
  • chandoudeyuyi
  • 2017-04-04 18:48:06
  • 152
收藏助手
不良信息举报
您举报文章:关于置换和非置换元素
举报原因:
原因补充:

(最多只允许输入30个字)