css position:fixed 用padding为什么整体朝右侧靠?

Question

  <div class="footer">
  
    <div class="button"> 测试</div>
    <div class="text">￥20.00</div>
  
  </div>

.footer{
    width:100%;
    position:fixed;
    height:200px;
    background-color:red;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:0 10px; //此处设置padding希望内部俩元素朝中间靠近点
    }

.button{
    border:1px solid blue;
    text-align:center;
    line-height:40px;
    width:80px;
    height:40px;
    }

当在 padding:0 10px; 为什么 右侧的 20.00超出右侧浏览器编辑？

Answer 1

设置box-sizing:border-box可以解决,
和position:fixed;没关系,主要是display: flex;会使当前dom的盒模型变成标准模型,计算宽度不会带上padding

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

Answer 2

box-sizing:border-box;

Answer 3

你需要了解一下CSS盒模型先，然后再回来看这个问题你就懂了