置换元素:

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. BottomNavigationView 的使用

    转载请注明出处:http://blog.csdn.net/wl9739/article/details/52875710 BottomNavigationView 很早之前就在 Material De ...

  2. 如何在Sublime中打开左侧文件夹导航

    Sublime中我们可以通过菜单栏的View->Side Bar->Hide Side Bar(Show Side Bar)来显示和隐藏左侧的导航栏,如下图所示. 但是,这里只会显示当前打 ...

  3. webpack学习3.1由浅入深-打包JS

    打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...

  4. c++-多态的学习

    多态的基本介绍 多态基础 面向对象新求 C++编译器提供的多态解决方案 多态意义.多态成立的是三个条件 多态理论基础 多态面试题强化 多态的理解 C++编译器如何实现多态 重载重写重定义 虚析构函数 ...

  5. 【前端学习】网页tab键的实现 01

    友情提醒:阅读本文需要了解一些基本的html/Css/Javascript知识 前端常用tab键的实现,用到的原理是当点击一个元素时,通过javascript操作css的display属性,达到控制另 ...

  6. vue & nodejs jwt 的基于token身份验证

    现在比较流行的验证方式,是带着token的登录验证 原理 1. 登陆时,客户端发送用户名密码 2. 服务端验证用户名密码是否正确,校验通过就会生成一个有时效的token串,发送给客户端 3. 客户端储 ...

  7. Could not find any version that matches com.android.support:appcompat-v7:29.+

    新学Android开发设计用到Android Studio,说实话真的是BUG满天飞,稍有不慎就会蹦出一个不明所以的问题. 新建Android工程时编译运行报错: 目测是本地文件和工程对应的依赖包不匹 ...

  8. java月考题JSD1908第二次月考(含答案和解析)

    考试 .container { clear: both; margin: 0 auto; text-align: left; /*width: 1200px;*/ } .container:after ...

  9. keras 添加L2正则 和 dropout层

    在某一层添加L2正则: from keras import regularizer model.add(layers.Dense(..., kernel_regularizer = regulariz ...

  10. js 日期格式化小问题

    看一个图 toLocaleString 的格式是 yyyy/MM/d , 想要 yyyy/MM/dd, toISOString 的格式基本满足, 本想直接 split("T"),  ...