行内元素有哪些？块级元素有哪些？空（void）元素有哪些？inline与inline-block的区别

GeekLiHua

发布于 2025-01-21 21:20:39

10100

代码可运行

文章被收录于专栏：Java

运行总次数：0

代码可运行

行内元素有哪些？块级元素有哪些？空（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>

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