浏览器如何计算“自动”值？答案

【问题标题】：How does browsers compute 'auto' value?浏览器如何计算“自动”值？
【发布时间】：2013-12-27 18:13:33
【问题描述】：

我有两种相似的风格。当我在 chrome 检查器中查看它们时，尽管应用的样式相似，但它们具有不同的值。

元素的边距具有'auto'值，但当由浏览器计算时，尽管宽度相同，但它们之间存在很大差异。

对于那些要求我将其指向单个样式表的人，我实际上不能，因为第一个样式用于 wordpress 主题，而另一个样式用于 whmcs 模板。

更新：

添加了这两个屏幕截图。两个窗口都最大化

【问题讨论】：

【解决方案1】：

我发现了问题所在。 Chrome 以不同的方式呈现它。其他浏览器正确显示。只有我 PC 中的 Chrome 浏览器显示不同。我手机上的 Chrome 浏览器显示正确，所以我猜是浏览器问题。

【讨论】：

【解决方案2】：

auto 不是一个具体的值，在块元素上基本上意味着让浏览器决定。（如，占用剩余空间）。我希望您的浏览器窗口宽度，或父元素在您看到较大边距的情况下会更宽正在呈现。（查看“样式”选项卡而不是“计算”以查看应用的样式）

当您为左右边距设置auto 时，它将使元素居中。如果您只为左边距设置auto，则元素将向右对齐。

【讨论】：

是的，这就是为什么我要问为什么它有不同的价值。宽度都是1170。所以它应该占据两边的剩余空间。这是样式选项卡的屏幕截图。 prntscr.com/2a2fmp
@kapitanluffy 我看到左右边距的值都是auto，来自bootstrap.css。我真的看不出那个截图有什么问题？页面看起来怎么样，是不是元素没有居中？
如果您查看计算出的边距，它们之间的巨大差异接近 60 像素。此外，如果字体大小明确声明为 14px，它应该显示 14px 对吗？看看这个截图。 prntscr.com/2a2jss
@kapitanluffy 您是遇到实际问题还是只是想知道计算值的奇怪之处？
我同时遇到了一个实际问题并想知道。