PROSAGA码农传奇-模型可视化-为什么我将翻译设置为-50％并将边距设置为50％会得到不同的结果？

为什么我将翻译设置为-50％并将边距设置为50％会得到不同的结果？

作者: 绵绵
发布时间: 2024-01-31 03:30:15 (3月前)
转自：

<div class =“post-text”itemprop =“text”>
  
    你的方法没有问题。两者都会尝试根据您提供的值进行居中。
  
  
    保证金方法失败，因为您没有使用
    <a href="https://developer.mozilla.org/en/docs/Web/CSS/box-sizing" rel="nofollow noreferrer">
      盒子尺寸方法
    </A>
     像这样。
  
   <pre>
 <code>
 box-sizing: border-box

</code>
 </pre>
  
    这导致了
    的
      你所有的元素
    </强>
     大于指定的高度和宽度。如果没有这个，你告诉浏览器在宽度和宽度上添加任何填充或边框。高度。
  
  
    所以你的
    的
      更大的元素
    </强>
     使用保证金方法时转移。
  
  
    你设置了一个
     <code>
 2%
 </code>
     填充
     <code>
 style-x
 </code>
    ，宽度
     <code>
 38vw
 </code>
     上
     <code>
 #main
 </code>
    。使用边距来居中时，您需要考虑这些因素
    的
      不同的价值观
    </强>
    。
  
  <BLOCKQUOTE>
    
      当你设置一个
      的
        百分比
      </强>
       填充，
      <a href="https://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width">
        它的计算基于
        的
          宽度
        </强>
         包含块
      </A>
      。
    
  </BLOCKQUOTE>
  
    另一方面，变换方法使用包含块的边界框并且没有问题居中
    的
      更大的元素
    </强>
    。
  
  
    我建议你加入这个
     <code>
 box-sizing
 </code>
     上
     <code>
 main
 </code>
     和
     <code>
 style-x
 </code>
     如果使用保证金方法。你可以使用
  
   <pre>
 <code>
 *, after, before {
 box-sizing: border-box;
}

</code>
 </pre>
  
    这样可以更好地控制所有元素的尺寸。
  
</DIV>