border对于其余元素的影响

上图中加减按钮所在的容器有向右下方倾斜的趋势，我将减按钮的border取消，容器的倾斜就消失了，见下图。

如果我将border加粗，则倾斜的角度增大，如下图所示。

然而减按钮设置了boxsizing属性为border-box，宽高始终为20px，border为何会对与之同级的元素有这样的影响？

当我将父元素设置display：flex时，又能够修复这种影响，这是为什么？

江舟 2021-09-18

源自：项目联调与打包发布 1-1 如何进行真机调试

收起

1回答

好帮手慕慕子 2021-09-18 17:49:11

同学你好，猜测是与行内或行内块元素默认以基线对齐有关，由于元素设置了box-sizing:border-box;属性，宽高不变的情况下，那么改变边框大小时，会影响元素内容的高度，从而影响了元素基线，导致同级元素之间的对齐方式发生变化。

对于同学说的设置了display:flex;后效果就正常了，只有截图无法定位问题，可以将写的完整代码全部粘贴过来，老师测试下，便于帮助同学准确的定位与解决问题。

祝学习愉快~

收起回答

提问者江舟 #1

<template>
  <div class="product-buy">
    <template v-if="getProductNum(getProductId(item))!==0">
    <span class="product-minus" @click="()=>decProduct(item)" >-</span>
    <span class="product-num">{{getProductNum(getProductId(item))}}</span>
    </template>
    <span class="product-add" @click="()=>addProduct(item)">+</span>
  </div>
</template>
<style lang="scss" scoped>
@import '../../style/varieties.scss';
.product{
  &-buy{
    font-size: .35rem;
    line-height: .5rem;
    // display: flex;
  }
  &-minus,&-add{
    display: inline-block;
    box-sizing: border-box;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    font-size: .45rem;
    font-weight: bold;
    text-align: center;
  }
  &-num{
    display: inline-block;
    margin: 0 .25rem;
    width: .35rem;
    text-align: center;
  }
  &-minus{
    border: #666 .025rem solid;
  }
  &-add{
    background-color: $btn-bgColor;
    color: #fff;
  }
}
</style>

谢谢老师，上面是相应的scss和模板代码。

2021-09-18 18:57:12

好帮手慕慕子回复提问者江舟 #2

同学你好，对于你的问题解答如下：
1、因为按钮等后代元素会继承product-buy元素设置了line-height属性，而按钮等元素设置了box-sizing:border-box;属性，那么在宽高不变的情况下，改变按钮的边框大小时，会影响元素内容占据的高度，导致元素的基线位置跟随发生变化，而行内块（display属性为inline-block）元素默认以基线对齐，所以会影响其他元素的位置。
2、给pruduct-buy元素添加display:flex;属性后，根据align-items属性定义项目在交叉轴上如何对齐，没有设置该属性时，默认值为stretch，占满整个弹性盒子的高度，所以调整按钮的边框宽度时，并不影响按钮实际占据页面的高度，所以项目之间的对齐方式不会发生任何改变。
同学了解下即可，代码实现是很灵活的，具体情况具体分析，灵活应用所学知识去实现效果就可以啦~
祝学习愉快~

2021-09-22 14:35:10