一种新的布局方式_一种新的网页布局模式-CSDN博客

本文链接：https://blog.csdn.net/besttoby01/article/details/75330823

通过王老师的讲解，让我认识到了自己的不足，也学到了一种新的布局方式（主要是宋老师“恐吓”我们，说如果我们去面试，面试官如果要我们使用这种方式，我们怎么办，怎么解决，我才想深入了解下的），王老师提出了两个问题，她自己也为我们解答了，现在需要我们自己去总结，化为自己的知识。
第一个问题：为什么会两个内联标签之间会出现空格

<style>
        .maxBox {
            width: 500px;
            height: 500px;
            background-color: red;
        }


        .left, .right {
            display: inline-block;
        }


        .left {
            width: 200px;
            height: 200px;
            background-color: green;
            margin-right: -5px;
        }


        .right {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="maxBox">
    <div class="left">
        <p>我是谁</p>
    </div>
    <div class="right">
        <p>我来自什么</p>
    </div>
</div>
</body>

上面这段代码，先定义了一个大div（maxBox），然后在定义了两个左右的div，分别是left、right，再把块集标签div转换为内联标签。这样两个div就会出现在一行里面了。

上面代码运行结果：

很明显，我们能看出来中间有一条空隙，这条空隙出现的原因是我们换行了，就会产生空格。那么我们怎么把这个空隙消掉呢？下面提供了三种方法。

1.以为那条空隙是换行出现的，那么我们就不换行。把right的div放在left的div后面让他们连接起来。这样就不会产生空隙了。

2.把font-size设置为0.因为换行也是一个字符，而这个空隙又是因为换行产生的，所以就把字符大小设置为0.这样也不会产生空隙。

3.对left添加一个margin-right属性的值，令margin-right:-5px;。这样我们也能实现两个div无缝连接。

这样我们就完成了第一个问题。
第二个问题：当right有多个p时，他们两个会对不齐

会出现这种效果。那么他是怎么出现的，我们该怎么解决。
出现的原因是x基线的问题，基线对齐方式是他进行内容的底端对齐，就是“我是谁“”和第三个“我来自什么”的底端对齐，所以会出现这种情况。解决的方案呢？既然是x基线的对齐方式有问题，那么我们可以更改对齐方式。首先找到vertical-align，把他的值设置为top，这样他就会上边框对齐。我们把这个属性值写在共同的里面，以为两个的对齐方式要一样。
最后的结果：