一天搞定HTML----标签类型与类型转换05

Myth丶恋晨 2022-06-16 07:16 203阅读 0赞

**标签类型：**

> 标签只有两类：行内元素和块元素
> 
> 行内元素：内容撑开宽高  
> 块元素：默认独占一行

**注意：**

> 在使用display时，会遇到一种inline-block类型的标签。这种标签不属于标签的分类。

--------------------

# 1.块元素block特点 #

![这里写图片描述][SouthEast]

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                body{
                    margin: 0;
                    padding: 0;
                }
                div{
                    height: 100px;
                    background: red;
                    margin: 50px;
                    padding: 30px;
                }
            </style>
        </head>
        <body>
            
            <div>div</div>
        </body>
    </html>

--------------------

# 2.行内元素inline特点 #

![这里写图片描述][SouthEast 1]

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                body{
                    margin: 0;
                    padding: 0;
                }
                span{
                    background: pink;
                    width: 200px;
                    height: 200px;
                    /*margin: 50px;*/
                    padding: 50px;
                }
                div{
                    background: green;
                }
            </style>
        </head>
        <body>
            
            <span>铁道学院</span>
            <strong>kaivon</strong>
            <div>div</div>
        </body>
    </html>

--------------------

# 3.行内块元素inline-block特点 #

**注意：它不属于标签分类中的一类。**

![这里写图片描述][SouthEast 2]

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                span{
                    width: 100px;
                    height: 100px;
                    background: red;
                    display: inline-block;
                }
                div{
                    width: 100px;
                    height: 100px;
                    background: green;
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            
            <span>kaivon</span>
            <div>kaivon</div>
        </body>
    </html>

# 4.块元素和行内元素有哪些？ #

**行内元素：**

> a,span,strong,em,mark,img,time

**块元素：**

> div ,h1~h6,p,列表标签（ul,ol,li,dd,dt),header,nav,footer,section,article,aside

# 5.标签类型转换 #

通过设置display的取值来改变标签的类型：

**display的值：**

1）none：隐藏标签
    
    2）block：块元素
    
    3）inline：行内元素
    
    4）inline-block：行内块元素

**代码演示**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 100px;
                    height: 100px;
                    background: green;
                    color: #fff;
                    display: inline;
                }
                span{
                    background: red;
                    width: 100px;
                    height: 100px;
                    display: block;
                }
            </style>
        </head>
        <body>
            
            <div>div1</div>
            <div>div2</div>
    
            <span>span1</span>
            <span>span2</span>
        </body>
    </html>

[SouthEast]: /images/20220616/147d7917fca141ccb52df8514224fca5.png
[SouthEast 1]: /images/20220616/e5715a0c7e5048328535e43e1e218c79.png
[SouthEast 2]: /images/20220616/01f80f2d0b9a4f48acf4cb9585cfb95a.png