HTML元素分类（详解）

最新推荐文章于 2024-06-12 01:29:39 发布

screamn

最新推荐文章于 2024-06-12 01:29:39 发布

阅读量180

点赞数 1

分类专栏： CSS 前端文章标签： css 前端

本文链接：https://blog.csdn.net/screamn/article/details/133561519

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

引入

相信看这篇博客的都是理科生，默认大家都学习过化学了，高中化学的元素周期表中可以根据性质或者表现的不同划分元素种类，比如说金属与非金属元素。同理，在HTML中元素也存在分类。

HTML中的元素分为不同的类型，每个类型都有其独特的特性和限制。有些元素不能直接设置宽度和高度，它们的大小主要由其内容决定。而另一些元素则可以通过设置边框、颜色、背景等属性来实现更多的样式效果。

举个例子，假设我们要创建一个网页布局，其中包含多个盒子。有些盒子是用来展示文章内容的，这种类型的元素通常会根据文本的长度和字体大小自动调整宽度和高度。而另一些盒子则用来作为导航菜单，我们可以设置它们的边框样式、背景颜色以及鼠标悬停效果等，使其在页面中呈现出漂亮的外观。

通过了解不同元素的分类和特性，我们可以更好地掌握HTML标签的运用，以及css的书写。无论是调整页面布局还是实现各种样式效果，了解元素的特性都至关重要。

元素类型对应的css属性值是display：[属性值];

块级元素block

什么是块级元素呢？

块级元素是 HTML 和 CSS 中的一种元素类型。它们以块级的形式独占一行或一块空间，相邻的块级元素会各自占据一行。块级元素在文档流中独立存在，其默认的宽度是其父元素的100%（这里主要是体现的是继承性，稍后博客会给大家讲解）。

大家通过图片发现了什么？网页的不同功能是按照不同模块划分的，他们像一个一个小盒子，有的自己独占一行，有的和其他小盒子一起占一行显示。细心的读者会发现，这些小盒子中还包含其他小盒子。造成一个嵌套的效果。

这些元素都有一个相同的特征，那就是本身具有大小，占据一行或者一部分空间（默认都是占一行的，之所以占据一部分空间是由于更改了css的默认属性）

常见的块级元素标签有

块级元素的特性：

默认情况下会独占一行，不与其他元素共享同一行。
可以设置宽度和高度以及垂直方向的外边距和内边距。
可以容纳其他块级元素或者行内元素，用于组织和嵌套页面结构。
会根据父元素的宽度自动填充水平空间。
可以通过 CSS 属性对其进行样式设置，比如背景颜色、字体样式、边框等。

行内元素inline

行内元素是 HTML 文档中的一类元素，它们以行内的方式出现在文本流中，通常用来包裹文本内容或者其他行内元素。a标签太典型了本身的大小就是靠文字撑起来的。有时候我们会在a中放一个img标签，用于点击图片跳转。

常见的行内元素包括<span>、<a>、<em>、<strong>、<img>等。与块级元素不同，行内元素没有固定的宽度和高度，它的宽度和高度由内容本身的大小决定，不能通过CSS直接设置。

特点：

默认情况下以行内的形式显示，无法设置宽度和高度。
可以容纳其他行内元素或文本内容，多个行内元素会按照从左到右的顺序依次排列，并且元素之间的空格和换行会被自动忽略。
不会产生新的一行，而是与其他行内元素共享一行，在页面上的位置只受到前后相邻元素的影响。
可以通过 CSS 属性对文字内容进行样式设置，比如字体、颜色、大小、加粗等。

行内块元素inline-block

行内块级元素（inline-block）是 CSS 中一种特殊的元素显示方式，它具有行内元素的特性，同时又能够设置宽度和高度、垂直方向的边距和内边距，以及水平对齐等属性，实现了块级元素的某些特性。

与行内元素不同，行内块元素独占一行，并可以容纳其他行内元素或行内块元素，类似于一个小型的块级元素。

常见的行内块级元素包括<img>、<input>等表单元素，也可以使用CSS中的display属性将其他元素设置为行内块元素。

特点：

默认情况下以行内的形式显示，但是可以设置宽度、高度、边距等样式属性。
可以容纳其他行内元素或行内块元素，实现灵活的排列和布局。
可以让多个行内块元素在同一行上水平对齐。
支持盒模型，可以设置内外边距、边框等样式属性。

注意：

在使用行内块元素时，为了避免元素之间产生空格或者换行引起的布局问题，需要在 HTML 代码中使用注释标签或者将元素写在同一行。
在使用行内块元素时，需要考虑到不同浏览器对行内块元素默认垂直方向对齐方式的设置问题。可以使用 vertical-align 属性进行设置，比如将值设置为“top”、“middle”或者“bottom”等。

我给大家详细讲讲第二个注意，这这个真的是太典型了。

先介绍一下vertical-align；是一种用于设置行内元素或表格单元格（table-cell）中的元素在垂直方向上的对齐方式。

使用场景：当我们在一行中既有文字又有图片等行内元素时，它们的基线（baseline）可能不在同一水平线上，此时就可以使用 vertical-align 属性来控制它们的垂直对齐方式。

文字基线分布：

在一行文本中，每个字符都有自己的高度、上行高度、下行高度和基线位置。基线通常是字符底部与行框底部对齐的一条线，也可以说是字符中部到行框底部的距离。

如果一行中字符高度不相同，那么它们的基线就会处于不同的位置，从而导致不同字符的底部不在同一水平线上。当处于不同位置的时候就是恐怖的时候。

废话不多说上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS行内块元素的疑问讲解</title>
    <style>
        .contain{
            display: block;
            width: 1000px;
            height: 200px;
        }
        .contain div{
            display: inline-block;
            width: 200px;
            height: 200px;
            margin-right: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="contain">
        <div></div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>