CSS标签分类

不会写代码的菜

于 2022-06-19 22:15:33 发布

阅读量982

点赞数

分类专栏： css 文章标签： html css webview

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125363327

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

本文介绍了CSS中的三种标签类型：块级标签、行级标签和行级块标签，以及它们的特点和常见应用。块级标签占据整行，可以设置宽高；行级标签仅占自身大小，不能设置宽高；行级块标签可设置大小，不占整行。此外，文章还讲解了`display`属性的用法，如何通过它改变标签的行为。最后，提到了`div`和`span`这两个纯净标签，分别作为块级和行级元素的用途。

摘要由CSDN通过智能技术生成

在CSS中,不同的标签其所具有的特性不同,我们根据特性可以将它们分为以下3种:

块级标签,行级标签,行级块标签.
下面我们来一一进行介绍:

块级标签:
无论内容的多少,都只会占用一行的标签称为块级标签
- 常用块级标签如下: <h>,<p>,<ul>,<li>
- 块级标签可以设置标签的宽高
- 默认大小: 宽: 与父级标签的宽一致高: 0/与内容的高一致
行级标签:
只占自身大小的标签，不会占一行的称为行级标签
- 行级标签不能设置宽高
- 常见的行级标签如下: <a>,<b>,<u>
行级块标签:

可以设置大小,但不占一行的标签称为行级块标签
- 常见的行级块标签如下: <input>,<img>

各标签的代码示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
           块级标签
           p h1 ul ol
         -->
         <p>这是一个块级标签</p>
         <h1 class="h1">这是一个块级标签</h1><br />
         <!-- 
           行级标签
         -->
         <a href="CSS基本语法.html">行级标签</a>
         <!-- 
            行级块标签
            input img
         -->
         <input style="width: 500px; height: 300px;" />
    </body>
</html>

运行结果如下:

我们可以看到,块级标签每次占用了一行的位置.而行级标签只占用它自身的大小的位置

注意:

一般情况下,使用块级标签包含行级标签;不适用行级标签包含块级标签
a (超链接)可以包含任何标签,除去a本身
p 标签不可以包含任何的块级标签

下面我们再来介绍一些关于标签额外的知识:

①Display的用法

通过display样式,我们可以修改标签的类型,使之变为我们想要的类型

可选值如下：
- block ：设置标签为块标签
- inline ：设置标签为行级标签
- inline-block ：设置标签为行级块标签
- none ：隐藏标签（标签将在页面中完全消失）

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .h1{
                display: inline-block; /* 设置标签的样式为指定类型*/
            }
        </style>
    </head>
    <body>
        
         <p>这是一个块级标签</p>
         <h1 class="h1">这是一个块级标签</h1><br />
    </body>
</html>

②div和span标签

div和span是两个没有任何功能的纯净标签,下面我们来进行简单介绍:

div标签:
- div是块级标签，可以放置任何标签。
- div没有任何附加功能，给了什么属性就能变成什么样。
- div主要的作用是被用来布局网页
span标签:
- span是行级标签
- span 没有任何附加功能，给了什么属性就能变成什么样。
- span标签被用来选中文档中的文字。

代码示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
         <!-- 
            纯净标签
            div
            span
         -->
         <div> 
            <h3></h3>
            <span>这是一个span</span>
         </div>
    </body>
</html>