HTML+CSS+JavaScript 学习中遇到问题汇总

最新推荐文章于 2024-07-19 12:58:53 发布

小小张进阶

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量124

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_49169688/article/details/129912304

版权

1.在display:inline-block;的a中添加文字导致下移

查阅相关资料可知，在将元素display设置为inline-block的时候，元素即同时具有行内元素和块级元素的属性，既排列在同一行又可以设置宽高。

对于行内元素，都具有vertical-align属性，那这里就牵涉到vertical-align的默认对齐方式。它的默认方式是baseline，基线对齐。

css规范中写道：

baseline：Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.（将方框的基线与父方框的基线对齐。如果方框没有基线，请将底边距与父元素的基线对齐。）

举例：代码如下：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 无文字 */
        .a1 {
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: #efafaf;
        }

        /* 有文字，大小0px */
        .a2 {
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: #efafaf;
            /* 给文字设置大小 */
            font-size: 0px;
        }

        /* 有文字，大小10px */
        .a3 {
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: #efafaf;
            /* 给文字设置大小 */
            font-size: 10px;
        }
        /* 有文字，大小20px */
        .a4 {
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: #efafaf;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <a href="#" class="a1"></a>
    <a href="#" class="a2">文字pjv</a>
    <a href="#" class="a3">文字pjv</a>
    <a href="#" class="a4">文字pjv</a>

</body>

</html>

代码对应结果：