前端学习：元素的类型

最新推荐文章于 2022-10-12 15:13:21 发布

buupoo

最新推荐文章于 2022-10-12 15:13:21 发布

阅读量192

点赞数 1

分类专栏：前端学习文章标签：大数据前端学习 css html5

本文链接：https://blog.csdn.net/buupoo/article/details/125754058

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们知道，网页结构就是有许多的元素作为结构组成的。

~~元素分为三大类：水，火，土。~~

不好意思，元素分为块状元素（block），行内元素（inline）以及行内块元素（inline-block）。

块状元素的特点是可以直接设置宽高，并且独占一行，呈上下排列。

我们写下两个经典块状元素div，可以看到两个div是分别在两行的。

行内元素特点就是不能设置宽高，元素默认从左至右水平一行排列，经典行内元素span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .z{
           width: 100px;
           height: 100px;
           background-color: aquamarine;
       }
       .x{
           width: 200px;
           height: 200px;
           background-color: rgb(165, 127, 255);
       }
       .c{
           background-color: blue;
       }
       .v{
           background-color: cadetblue;
       }
    </style>
</head>
<body>
    <div class="z"></div>
    <div class="x"></div>
    <span class="c">世界和平</span>
    <span class="v">世界和平</span>
</body>
</html>

还有一种元素就是行内块元素，兼具了两者有属性，既能设置宽高，又能水平排列，例如input。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .b,.n{
           width: 200px;
           height: 50px;
       }
    </style>
</head>
<body>

    <input type="text" class="b" placeholder="我是b"><input type="text" class="n" placeholder="我是n">
</body>
</html>

三种元素之间可以使用display属性进行相互转换，但是主要还是块状元素及行内元素转换为行内块元素。

行内块元素有一个独属有的属性：vertical-align 垂直对齐属性。

因为行内块元素的对齐方式是以基线为准对齐，所以与其他元素总是对不齐的。

这个属性经常用于的场景是使图片居中显示。先设置text-align使图片水平居中。

在img图片边上写一个宽度为0px，高度为100%的span标签作为辅助线，使用群组选择器给img标签和span标签同时设置vertical-align：middle。这样图片就能在盒子中居中显示了。

        div{
            width: 500px;
            height: 700px;
            border: 1px solid #000;
            margin: 100px auto;
            text-align: center
        }
        span{
            display: inline-block;
            width: 0;
            height: 100%;
        }
        img,span{
            vertical-align: middle
        }



        <div>
        <img src="" alt=""><span></span>
        </div>