置换元素:

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. 获取本地计算机名称和Ip地址

    using System.Net; Dns.GetHostName();//获取本地计算机主机名 IPAddress[] IP = Dns.GetHostAddresses(Dns.GetHostNa ...

  2. VS2019 开发Django(八)------视图

    导航:VS2019开发Django系列 这几天学习了一下Django的视图和模板,从这几天的学习进度来看,视图这里并没有花很多的时间,相反的,模板花费了大量的时间,主要原因还是因为对Jquery操作d ...

  3. JVM系列二(垃圾收集算法).

    一.标记-清除算法(Mark-Sweep) 这种算法分为"标记"和"清除"两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象. Mar ...

  4. laravel起步的一些小问题

    工作中主要使用的是.NET,PHP只是我业余喜欢的一门语言,而之前一直用的是yii2框架,觉得Yii2是最好的框架了,然而,laravel在业界的名声太大,被誉为:最优雅的框架,所以,我决定花点时间研 ...

  5. Python活力练习Day5

    Day5:连续输入n个字符串,请按照长度为8拆分每个字符串后输出到新的字符串组:长度不是8的整数倍的字符串请在后面补数字0,其中,空字符串不做处理. eg : input :   2    12345 ...

  6. 在 Spring Boot 项目中使用 activiti

    新建springBoot项目时勾选activiti,或者在已建立的springBoot项目添加以下依赖: <dependency> <groupId>org.activiti& ...

  7. [Android逆向]APK反编译与回编译

    一.先查壳,再反编译看验证首先打开.apk文件==>反编译apk(dex/配置文件/资源文件(apk反编译失败)>修改关键文件实现自己的目的>重新打包签名(无法重新打包)==> ...

  8. 【iOS bug记录】UICollectionviewCell刷新变得这么莫名其妙?

    项目是一个即时聊天的社交软件,聊天流采用的是UICollectionView,随着进度的完善,发现一个特别的bug,UICollectionviewCell的复用,并没有直接insert进去,而是出现 ...

  9. 微信 电脑版 HOOK(WeChat PC Hook)- 框架

    软件构成:一个主进程exe和一个注入的dll主进程exe:把dll注入到微信,发送指令给dll,接受dll的信息注入的dll:被注入到微信内部,拦截微信的数据,调用微信的功能 接收主进程的指令,执行指 ...

  10. 使用.NET Core 构建现代化的桌面应用

    我们今天要聊的内容主要桌面开发四个方面:Windows平台..NET Core 3 平台上的WPF,Winform, 应用打包解决方案 MSIX 和 XAML 群岛访问原来UWP的控件,让我们的应用程 ...