CSS 替换元素和非替换元素 行内非替换元素
html元素也可以分为替换元素和非替换元素
1.替换元素
替换元素是由浏览器根据表示的元素和属性决定显示的内容。
例如:<img src="./image.jpg" />他由标签元素img和属性src来决定显示的内容。
<input type="text" />如果text换成其他的属性值,input会显示不同的样子,这也是有input和type属性值决定显示内容的。
像<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素没有实质的内容
2.非替换元素
html中大多数都是非替换元素,浏览器直接显示标签元素的内容。
比如:<p>paper</p>
行内非替换元素
width和height在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后(在任何子元素相对偏移之前)的宽度,它的高则是基于字体。
<a>、<span>是行内非替换元素
但是浮动后的行内非替换元素可以使用width和height。
CSS 替换元素和非替换元素 行内非替换元素的更多相关文章
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS的布局之文档流,与行内/块级元素的延伸
文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...
- 【转载】vim 中如何替换选中行或指定几行内的文本
https://segmentfault.com/q/1010000002552573/a-1020000002552589 :'<,'>s/替换项/替换为/g 以下命令将文中所有的字符串 ...
- 行内元素与块级元素的区别,行内块级元素在IE8-的兼容性
行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行 ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- css菜鸟学习之text-align属性,行内元素,块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
随机推荐
- IT职场?未来?
转自 IT职场?未来? 不能否认,有些技术大牛,生活也过的不错,工资不少挣.但是这种人,本来就不多啊,很少啊.这些人一般都是小时候就搞程序的,你觉得你半路出家,能变成这种超级牛人么?? 而且这些牛人, ...
- API 接口收集
节假日 http://api.goseek.cn/ http://timor.tech/api/holiday http://www.easybots.cn/api/holiday.php?d=201 ...
- 请求网络图片缓存到本地 ,还有一些现成的图片加载框架的使用 Ace网络篇(一)
现在去买年货~~~~~~ 占坑, 现在来填坑 填完睡觉,感谢这俩月的把自己往死里逼得奋斗从JAVA什么都不懂到现在,做这些也是给在自学路上的新人(我也是菜鸟)一点点我力所能及的帮助,等我水平更高了还会 ...
- Spark on Yarn运行错误:Yarn application has already ended! It might have been killed or unable to launch application master
Spark on Yarn模式运行错误: bin/spark-shell --master yarn --deploy-mode client #报错 查看8088页面上的工作日志 错误原因:在执 ...
- 深入理解JavaScript系列(33):设计模式之策略模式
介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...
- [转] EF cannot be tracked because another instance of this type with the same key is already being tracked
本文转自:http://stackoverflow.com/questions/6033638/an-object-with-the-same-key-already-exists-in-the-ob ...
- 人民币金额大小写Js转换
/** * 数字转中文 * @param dValue * @returns */ function chineseNumber(dValue) { var maxDec = 2; // 验证输入金额 ...
- CSP学习之ASN.1编码(一)
一.定义: 是定义抽象数据类型的标准. 是用于描述数据的表示.编码.传输.解码的灵活记法. 它提供一套正式.无歧义和精确的规则,以描述独立于特定计算机硬件的对象结构. 标准的ASN.1编码规则有其基本 ...
- 移除script标签引起的兼容性问题
一.应用场景: 有时候我们需要动态创建script标签实现脚本的按需加载,我们会为script标签绑定onload或者onreadystatechange事件,用于检测动态脚本是否加载并执行完毕,在事 ...
- 安装redis服务端
1. redis服务端和客户端的安装 [root@xxx ~]# cd /usr/local/src [root@xxx src]# wget http://download.redis.io/rel ...