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 替换元素和非替换元素 行内非替换元素的更多相关文章

  1. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  2. CSS的布局之文档流,与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  3. 【转载】vim 中如何替换选中行或指定几行内的文本

    https://segmentfault.com/q/1010000002552573/a-1020000002552589 :'<,'>s/替换项/替换为/g 以下命令将文中所有的字符串 ...

  4. 行内元素与块级元素的区别,行内块级元素在IE8-的兼容性

    行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行 ...

  5. block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  6. CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  7. css菜鸟学习之text-align属性,行内元素,块级元素居中详解

    一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...

  8. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  9. 行内块inline-block元素之间出现空白间隙原因及解决办法

    首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...

随机推荐

  1. PIE SDK图层树伙伴控件示例

    1.  功能简介 TocControl控件的主要作用是显示当前加载的图层有哪些.采用什么样的符号等,目的是使用户对当前加载的数据和结构有一个总体的把握.与之相关联的伙伴控件有MapControl,Pa ...

  2. .net: 泛型List<T> 轉換成 DataTable類型

    public static DataTable ListToDataTable<T>(List<T> entitys) { //检查实体集合不能为空 ) { return ne ...

  3. Centos 添加swap

    swap是linux系统的虚拟内存,物理内存不足时,会用到.生产环境,最好添加上,以防内存异常暴增时,系统出现问题. 查看系统是否有swap分区,执行如下命令,若Swap那一行都为0,则表示没有Swa ...

  4. Rsa2加密报错java.security.spec.InvalidKeySpecException的解决办法

    最近在和支付宝支付做个对接,Java项目中用到了RSA2进行加解密,在加密过程中遇到了错误: java.security.spec.InvalidKeySpecException: java.secu ...

  5. vim脚本语言

    转自:http://man.chinaunix.net/newsoft/vi/doc/usr_41.html#usr_41.txt Vim 脚本语言在很多地方用到,包括 vimrc 文件, 语法文件, ...

  6. sqlserver2008 调试存储过程

    1.创建所需要调试的存储过程,并执行一下,也就是保存好 ,我要演示的存储过程名是 “usp_Passport_GetNewDepositary” 2.找到存储过程,右键“执行存储过程”,会弹出如下的界 ...

  7. 深入理解JavaScript系列(5):强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...

  8. FontAwesome 图标 class="fa fa-home"

    本文转自:http://www.yeahzan.com/fa/facss.html 引用方式: class="fa fa-home" 注意:每个图标的引用都必须要添加 fa fa- ...

  9. Java网络编程二

    向web站点发送get post请求,并从web站点取得响应 通相应的set方法,在调用connect()方法前,可以设置请求的各种参数,实现同浏览器类似的访问,调用connect()后可以调用相应的 ...

  10. sql查询时,根据特定的条件给表的某一个字段赋值

    先讲一下需要这个需求的情景: 这是一个招聘求职项目遇到的一个问题.个人A向公司B的职位投递简历后,公司B会收到个人A的简历;但是A投递后把简历删除,公司收到的简历信箱 还有这个简历,但却不能看了. 原 ...