可替换元素和非替换元素
时间:2022-07-24
本文章向大家介绍可替换元素和非替换元素,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
可替换元素和非替换元素
可替换元素replaced element
也称作可置换元素,其展现效果不是由CSS
来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS
的。非置换元素non-replaced element
也称作非替换元素,其内容由CSS
渲染直接表现给客户端。
可替换元素
- 一个内容不受
CSS
渲染控制,CSS
渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸例如宽度、高度、宽高比等的元素,被称之为置换元素。对于可替换元素,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 - 可替换元素的内容不受当前文档的样式的影响,
CSS
可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。对于某些可替换元素,例如<iframe>
元素,可能具有自己的样式表,但它们不会继承父文档的样式。 -
CSS
能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。CSS
在某些情况下会对可替换元素做一些特殊处理,比如计算外边距margin
和一些auto
的具体值。一部分可替换元素,其本身具有的尺寸和基线baseline
会被一些CSS
属性用到,加入计算之中,例如vertical-align
,只有可替换元素才能具有这种自带值。 - 例如浏览器会根据
<img>
标签的src
属性的值来读取图片信息并显示出来,图片的内容由src
决定,CSS
并不考虑对图片的内容进行渲染。又例如根据<input>
标签的type
属性来决定是显示输入框,还是单选按钮等。 - 常见的可替换元素,例如
<iframe>
、<video>
、<embed>
、<img>
等,有些元素在特定情况下会被当作可替换元素处理,例如<option>
、<audio>
、<canvas>
、<object>
、<applet>
、<input>
等。
非替换元素
- 非替换元素是其内容包含在文档中的元素,其内容可以受
CSS
渲染控制。 - 非替换元素的内容不会超出
CSS
的模型范围,CSS
在渲染时会考虑非替换元素的内容。 -
HTML
的大多数元素是不可替换元素,即其内容直接表现给浏览器,例如<div>
、<p>
、<h1>~<h6>
、<table>
等等等等。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/87f53471d6c2
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
https://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自定义ToolBar并实现沉浸式的方法
- python初学者笔记—入门基础知识
- Android SurfaceView画板操作
- Android利用Andserver搭建服务器的详细教程
- 位运算处理进制转换问题
- python的to_sql那点儿事
- Android自定义控件之刻度尺控件
- Android 使用Vibrator服务实现点击按钮带有震动效果
- sprintf函数的使用
- Android实现定时任务及闹钟
- Android使用ftp方式实现文件上传和下载功能
- slenium模拟登陆知乎2020
- Android两种轮询的实现方法
- 汉诺塔问题
- Android实现雷达View效果的示例代码