HTML元素分类【三种类型】

在CSS中，html中的标签元素大体被分为三种不同的类型：
块状元素、内联元素(又叫行内元素)和内联块状元素。

块状元素：display:block内联元素：display:inline
内联块状元素：display:inline-block

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：
<img>、<input>

内联(行级)标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行

块状标签：标签独占一行，可指定宽、高

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置

区别：

是否占一行能否指定高宽垂直方向的margin 内联否否否块是是是是

（扩展）隐性改变display类型：
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolute 或 position:fixed
float : left 或 float:right

display:inline-block的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

转载于:https://www.cnblogs.com/luoyishan/p/8316503.html

HTML元素分类【三种类型】相关推荐

HTML中常见的元素分类(三种)
今天来和大家分享一下,我在学习过程中遇到的HTML元素的几种类别,目前来说我知道的有三类: 块状元素(block), 内联元素(inline 也称为行内元素), 可变元素. 1. 块状元素(block ...
html5中标签分为,HTML标签的三种类型
HTML标签的类型分为三种:行内元素,行内块元素,块级元素而标签的属性是可以转换的 display:inline: 转换为行内元素 display:linline-block 转换为行内块元素 di ...
python列表元素都加倍_关于python列表增加元素的三种操作方法
关于python列表增加元素的三种操作方法 1.insert方法,该方法包含两个参数,第一个参数为插入的位置参数,第二个参数为插入内容 a = [0,0,0] b = [1,2,3] a.insert ...
html样式表三种类型包括,css样式有哪几种类型
CSS样式有三种类型:1.行内样式(内嵌样式),使用style属性直接把CSS代码添加到HTML的标记中:2.内部样式(内联样式),把css样式写在style标签中:3.外部样式(外联样式),将css ...
物联网平台的三种类型
什么是物联网平台借用ITU的定义,物联网是物品与互联网相连接,进行信息交换和通信,以实现智能化识别.定位.跟踪.监控和管理的一种网络.由于接入物的不同,应用领域或者行业不同,以及应用本身的功能差异, ...
linux支持三种类型的硬件,linux
纪晓岚曾经说:"世间的道理与事情,都在古人的书中说尽,现在如再著述,仍然超不过古人的范围,又何必再多著述."于是他一生之中,从不著书,只是编书--整理前人的典籍,将中国文化作系统的 ...
带你了解区块链的三种类型
为了更好的理解区块链,今天我们要讲的内容是区块链的分类.一般来说,按照区块链的开放程度,主要会分为三种类型,分别是公有链.私有链和联盟链. 所谓公有链,有点像一个大家共同记账的公共账本,对任何人都是开 ...
Asp.net支持三种类型的cache[转]
from:http://www.cnblogs.com/thomasnet/archive/2006/11/26/573104.html Asp.net支持三种类型的cache 想写一个技术快速概述, ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
java中三种转string的方法_java中int,char,string三种类型的相互转换
如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将 ...

HTML元素分类【三种类型】

HTML元素分类【三种类型】相关推荐

最新文章

热门文章