在进行移动375*667页面设计的时候,发现给父级div没有添加如上属性,会导致适配显示不全,具体代码如下:
<div class="pay">
<div class="left">
合计: <span>¥<i>266.00</i></span>
</div>
<div class="right1">
<a href="#">去支付</a>
</div>
.pay{
position: fixed;
left: 0;
bottom: 0;
background-color: #fff;
display: flex;
width: 375px;
height: 80px;
padding: 0 11px;
border: 1px solid green;
justify-content: space-between;
align-items: center;
}
.pay .left{
font-size: 12px;
}
.pay .left span i{
font-size: 20px;
color: red;
}
.pay .right1 a{
display: block;
border-radius: 5px;
background-color: green;
color: white;
width: 80px;
height: 30px;
line-height: 30px;
color: white;
text-align: center;
}
当父级没有设置box-sizing:border-box;时候浏览器默认设置为content-box属性,border-box属性会自动计算padding然后加载盒子宽高,content-box为默认属性,不会调整盒子宽高,可能导致子盒子不在显示区域内,如上代码显示效果如下
右侧实际上有padding-right效果,但是不在可视区域内
加上border-box属性显示如下