置换元素:

1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。 

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

3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。 

4. HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容,即是一个空元素。

非置换元素

HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器),如:
<!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
<span> hello world </span>

个人理解就如字面上那样,非置换就是我用了这个span标签那他就是span标签,内容不会变,但是置换标签不一样,得根据属性来显示具体内容,就相当于一个空盒子,盒子里面的物体是不固定的

CSS置换元素和非置换元素的更多相关文章

  1. HTML中的置换元素和非置换元素

    我们都知道,行内元素不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素. 置换元素: w3c官方解释:“An ele ...

  2. [CSS]置换和非置换元素

    转自:http://blog.doyoe.com 先进一个题外话 在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方, ...

  3. CSS的置换和非置换元素

    一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受 ...

  4. 5:CSS元素类型

    5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...

  5. 转:CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  6. HTML和css面试题:内容转载

    1.常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - ...

  7. 知识点总结 HTML+CSS部分

    1.html+css经典布局 ①左列定宽,右列自适应 .left{width:100px;float:left;} .right{overflow:hidden;} ②两列顶宽,中栏自适应 .left ...

  8. CSS全览_选择符+特指+单位+字体

    CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...

  9. HTML学习笔记Day6

    一.元素类型 1.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素.内联元素.行内块元素.可变元素 2.块状元素 1)块状元素在网页中就是以块的形式显示,所谓 ...

随机推荐

  1. WebGPU学习系列目录

    介绍 大家好,本系列从0开始学习WebGPU API,并给出相关的demo. WebGPU介绍 WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能. 为什么要学习 ...

  2. 基于C# WPF框架的贪吃蛇

    游戏开始界面 游戏开始 共有两条蛇,吃到红色食物加1分,吃到绿色毒食物减1分,知道0不减: 碰到墙壁游戏结束,碰到对方游戏结束,碰到自己游戏结束 此游戏通过Canvas画布布局,通过C#代码实现 游戏 ...

  3. 【每天一题】LeetCode 121. 买卖股票的最佳时机

    开源地址:点击该链接 题目描述 * https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock * 题目描述: * 给定一个数组, ...

  4. Python面向对象-多重继承之MixIN

    以Animal类为例,假设要实现以下4种动物: Dog(狗).Bat(蝙蝠).Parrot(鹦鹉)和Ostrich(鸵鸟) 如果按照哺乳类和鸟类来区分的话,可以这样设计: Animal: |--Mam ...

  5. crontab 定时任务没有响应 检测步骤

    设置规则 # 每分钟执行一次 */1 * * * * /scripts/script.sh # 每小时执行一次 0 */1 * * * /scripts/script.sh # 每天 02:00 执行 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

  7. Jmeter中使用HTTP信息头管理器发送json格式请求体的接口

    Jmeter中,如果请求体的格式为x-www-form-urlencoded,则不需要添加请求头,保持默认即可,但是如果遇到接口的请求体格式为json时,就要用到HTTP信息头管理器,在线程组上右键— ...

  8. C# 使用.net core 驱动树莓派的IO信号

    如何使用.net core来驱动树莓派的IO信号?是我们的实际项目需求中,可能就会有这种小项目,我们要输出一个IO信号,此处我们拿了树莓派4做测试 一共有两排引脚,引脚的顺序定义及功能如下: 我们就参 ...

  9. 转载 SAP用户权限控制设置及开发

    创建用户SU01 事务码:SU01,用户主数据的维护,可以创建.修改.删除.锁定.解锁.修改密码等 缺省:可以设置用户的起始菜单.登录的默认语言.数字显示格式.以及日期和时间的格式设置 参数:SAP很 ...

  10. MySQL的多表联查

    1.内连接        规则:返回两个表的公共记录        语法: -- 语法一 select * from 表1 inner join 表2 on 表1.公共字段=表2.公共字段 -- 语法 ...