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

题叶
  • 17.3k

已有的手段:

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

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

回复
阅读 3.4k
1 个回答

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

  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,这个功能根据MDN2的描述,也返回Used values或Computed values中的一个。

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

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

当然,做出判断的前提是你了解高度计算的流程5

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
宣传栏