H5面试——display：inline-block问题总结

最新推荐文章于 2024-08-23 14:45:51 发布

原创最新推荐文章于 2024-08-23 14:45:51 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

H5面试专栏收录该内容

11 篇文章

订阅专栏

本文总结了在将块元素转换为内联块元素时遇到的两个主要问题：内联块间的空隙及内容高度不一致导致的错位。针对空隙问题，提出了五种解决策略，包括调整父容器的font-size、letter-spacing和word-spacing，使用负margin，以及将元素放在同一行。对于内容错位，解释了原因在于vertical-align默认为baseline，并给出了通过调整vertical-align属性值来解决的方法。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .container{
            width: 500px;
            height: 500px;
            background-color: red;
            font-size: 0;
        }
        .left ,.right{
            display: inline-block;
            vertical-align: bottom;
            font-size: 23px;
            /*因为基线的问题，两个div出现不齐，解决的方法是设置垂直方向的方式（可以是top、bottom、middle）*/
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: green;
            /*margin-right:-5px ;*/
            /*div块级元素用display变成了内联元素，然后两个div没有写在一行，意味着两div之间有空格，解决的方法有：
            一、两个div写一行；二、通过设置div的外边框来解决；
            三、对最外面的div的字体大小（font-size）设置为0，然后对里面div的字体大小重新设置*/
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <p>我是谁</p>
        </div>
        <div class="right">
            <p>我从哪来</p>
            <p>我从哪来</p>
            <p>我从哪来</p>
        </div>
    </div>
</body>

将块元素转化为内联元素时，会出现问题

1、内联块之间有空隙。

解决方法：

（1）给父容器加font-size:0，子元素另行设置

（2）父元素Letter-spacing：-3px，子元素letter-spacing:0

（3）父元素Word-spacing:-6px，子元素letter-spacing:0

（4）设置左边的margin为负值

（5）两个块元素写在一行

2当两个块的内容高度不相同时，两个块就会错位。

原因：所有的内联块都有一个默认的属性，vertical-align：baseline。

baseline是块中内容的底线，而内容高度不同，因此它们会错位。

解决方式：设置vertical-align的属性值为top、middle和bottom中的一个。