作者:shzq110_113 | 来源:互联网 | 2023-07-14 11:09
通过王老师的讲解,让我认识到了自己的不足,也学到了一种新的布局方式(主要是宋老师“恐吓”我们,说如果我们去面试,面试官如果要我们使用这种方式,我们怎么办,怎么解决,我才想深入了解下的),王老师提出了两
通过王老师的讲解,让我认识到了自己的不足,也学到了一种新的布局方式(主要是宋老师“恐吓”我们,说如果我们去面试,面试官如果要我们使用这种方式,我们怎么办,怎么解决,我才想深入了解下的),王老师提出了两个问题,她自己也为我们解答了,现在需要我们自己去总结,化为自己的知识。
第一个问题:为什么会两个内联标签之间会出现空格
上面这段代码,先定义了一个大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,这样他就会上边框对齐。我们把这个属性值写在共同的里面,以为两个的对齐方式要一样。
最后的结果: