行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别

简介: 行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别

行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

行内元素有哪些

行级元素是,在HTML文档中可以一行显示的元素,不会换行。

a(锚点元素)、b(粗体)、br(换行)、code、em(强调)、font(字体设置)、i(斜体)、img(图片)、input(输入框)、span、strong(粗体强调)、textarea、u等;块状元素有:address(地址)、blockquote(块引用)、center(居中对齐块)、div、h1~h6(标题)、hr(水平分隔线)、p、ul、ol等。

块级元素有哪些

块级元素是会换行的。

三大列表和表格、六大标题和表单、段落地址要分块

div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr

空(void)元素

空元素就是没有内容的 HTML 元素,是在开始标签中就关闭的元素。

通俗点来讲空元素就是能不成对出现的标签

br、hr、col、area、base、img、input、link、source等等

元素之间的转换

通过给div添加display:inline条件,可以让块级元素变为行级元素,如果添加display:inline-block,那就是变成行内块元素。

inline与inline-block的区别是,后者多了一个block属性,具有块级元素的宽和高的特性。

块级元素中可以设置 width、height、padding、margin 等属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline;
        }
    </style>
</head>
<body>
    <span>极客李华</span>
    <div>
        李华
    </div>
</body>
</html>

运行结果

从结果上看,可以发现两个元素的内容到了同一行。

总结

行内元素的属性为:display:inline ===>不独占一行,并且不可以设置宽高

块级元素的属性为:display:block ===> 独占一行,并且可以设置宽高

行内块元素的属性为:display:inline-block ===> 不独占一行,可以设置宽高

相关文章
|
人工智能 安全 测试技术
Inflection AI团队仅70人,Pi每日聊天消息数超40亿
【2月更文挑战第24天】Inflection AI团队仅70人,Pi每日聊天消息数超40亿
421 3
Inflection AI团队仅70人,Pi每日聊天消息数超40亿
|
设计模式 Oracle Java
设计模式--- 桥接模式、JDBC 源码剖析(桥接)
设计模式--- 桥接模式、JDBC 源码剖析(桥接)
209 2
|
算法 数据库 计算机视觉
Dataset之COCO数据集:COCO数据集的简介、下载、使用方法之详细攻略
Dataset之COCO数据集:COCO数据集的简介、下载、使用方法之详细攻略
|
SQL 监控 关系型数据库
mysql统计数据库大小
通过这些方法,数据库管理员可以有效地监控和规划MySQL数据库的存储需求,确保数据库的稳定运行。
536 3
|
安全 调度 C语言
iOS多线程之GCD-同步、异步、并发、串行、线程组、栅栏函数、信号量等全网最全的总结
iOS多线程之GCD-同步、异步、并发、串行、线程组、栅栏函数、信号量等全网最全的总结
1457 1
|
Swift
swift 闭包简写实际参数名$0、$1等理解
swift 闭包简写实际参数名$0、$1等理解
327 0
|
API vr&ar Android开发
一文搞懂ARKit,ARCore,RealityKit和Vuforia
AR框架的一个核心是含能够理解特征的场景和各种类型的锚点。锚点有很多种,可根据特定场景来摆放3D模型 ,甚至可以真人来做距离测量(ARBodyAnchor)。并且这些框架不容忽视的优势是具有进行场景重建和人形遮挡(occlusion)的32位尝试数据。
1659 4
|
前端开发 小程序
前端get请求参数包含数组的情况
前端get请求参数包含数组的情况
635 0
|
网络协议 Python
Python上篇:2. 异步编程的核心:epoll+callback+event loop三驾马车搞定异步编程
Python上篇:2. 异步编程的核心:epoll+callback+event loop三驾马车搞定异步编程
|
网络协议
计算机网络学习16:以太网交换机自学习与帧转发流程、生成树协议STP
假设各主机已经知道网络中其他主机的MAC地址,无需进行ARP。
计算机网络学习16:以太网交换机自学习与帧转发流程、生成树协议STP