CSS 自动计算高度时, 怎样查看具体为什么得到当前结果?

Question

已有的手段:

• CSS inspector 的 computed 部分, 可以看是哪一行 CSS 起作用的
• 还可以逐个看子元素的高度

还是有一些情况, 高度是 auto 的, 子元素高度也逐个看过了, 还是有疑惑,
比如说, 有个奇怪的 1px 的差值, 不知道是从哪儿算出来的... 这种情况下怎样调试呢?

Answer 1

为了尽量不触发tl;dr事件，我从CSS中的四个值来讲起吧¹（咦

1. 指定值Specified values：在样式表中指定的值
   
   
   • 将确定一个属性使用的是声明值、继承值还是初始值
2. 计算值Computed values：格式化文档之前，根据样式表计算出的值
   
   
   • 相对的URI将转化为绝对URI
   • float: left将导致计算值为display:block也发生在这一步
   • 相对单位em将转化为px或类似单位（当然，如果font-size中用到了em，则需要到下一步才能算出）
3. 使用值Used values：格式化文档之后，根据样式表及层叠关系计算出的值
   
   
   • 百分比值转化为px或类似单位
   • line-height的相应计算
4. 真实值Actual values：使用值在一些UA中可能不允许被使用，因此还可能发生针对UA的转化
   
   
   • 比如在chrome里面，px不允许有小数，因此就算使用值是33.333px，真实值将是33px。这可能导致一些subpixel bug
   • 比如在kindle的浏览器里面，UA本身不支持灰度以外的颜色，因此所有的颜色将会转化会灰色

对应的值的查看，以Developer Tools截图为例：

我们可以注意到，实际项目中对计算值和使用值的区分并不重要，浏览器一般也未展现出计算值和使用值的区分。
CSSOM中定义了getComputedStyle，这个功能根据MDN²的描述，也返回Used values或Computed values中的一个。

回到题目，这个时候应当先比较SV、UV、AV（都是上面值的简写，请不要想歪），然后看一下height差1像素会是怎样的可能：

• 如果我们在css中指定了height（SV），但使用值（UV）却多出一个像素：多半出现了显式设置了height，但还是被默认撑高的模型，比如display:table-cell
• 如果我们尚未指定height，但使用值比所有子元素都多出一个像素：可能出现了被默认创建的块框³，或者子孙元素的margin没能突破BFC的大牢
• 如果使用值（UV）比实际值（AV）多或者少1像素：多半是遇到了sub-pixel bug⁴了

当然，做出判断的前提是你了解高度计算的流程⁵。