CSS置换元素和非置换元素
置换元素:
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置换元素和非置换元素的更多相关文章
- HTML中的置换元素和非置换元素
我们都知道,行内元素不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素. 置换元素: w3c官方解释:“An ele ...
- [CSS]置换和非置换元素
转自:http://blog.doyoe.com 先进一个题外话 在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方, ...
- CSS的置换和非置换元素
一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受 ...
- 5:CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
- 转:CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;"> < ...
- HTML和css面试题:内容转载
1.常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - ...
- 知识点总结 HTML+CSS部分
1.html+css经典布局 ①左列定宽,右列自适应 .left{width:100px;float:left;} .right{overflow:hidden;} ②两列顶宽,中栏自适应 .left ...
- CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...
- HTML学习笔记Day6
一.元素类型 1.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素.内联元素.行内块元素.可变元素 2.块状元素 1)块状元素在网页中就是以块的形式显示,所谓 ...
随机推荐
- 小而美的GIF生成神器ScreenToGif
起因 在写计算机图形学博客时,需要讲解一个算法,课本上抽象的语言未免让人读着头大,还在老师给的PPT中有代码的演示,我就想将演示做出GIF动图帮助读者理解算法,其实之前浪迹博客园的时候就发现有许多博主 ...
- 如何在Android手机上进行自动化测试(下)
版权声明:允许转载,但转载必须保留原链接:请勿用作商业或者非法用途 前言 通过阅读本篇教程,你将会了解到: 如何使用Poco对Android原生应用进行测试 Poco支持直接对任何Android原生应 ...
- Codeforces Global Round 6
久违的写篇博客吧 A. Competitive Programmer 题目链接:https://codeforces.com/contest/1266/problem/A 题意: 给你一个只包含数字 ...
- SSM(Spring+SpringMVC+Mybatis)框架整合
1.数据准备 SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for `admin` -- - ...
- WinForm WebBrowser 设置cookie
[DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] public static exte ...
- Cesium专栏-百度地图加载(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- 18.JAVA-pull解析XML
1.pull解析介绍 pull解析其实和我们上章学的sax解析原理非常类似,在Android中非常常用. 在java中,需自己获取xmlpull所依赖的类库分别为:kxml2-2.3.0.jar,xm ...
- python--推倒式(列表、字典、集合)
python的各种推导式(列表推导式.字典推导式.集合推导式) 推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据序列构建另一个新的数据序列的结构体 ...
- C++之typename和typedef关键字
1. typename的作用 template <typename Distance> class KDTreeIndex : public NNIndex<Distance> ...
- OLTP
On-Line Transaction Processing,联机事务处理过程(OLTP),也称为面向交易的处理过程 其基本特征是前台接收的用户数据可以立即传送到计算中心进行处理,并在很短的时间内给出 ...