CSS 自动计算高度时, 怎样查看具体为什么得到当前结果?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

a123456678 2016-05-26 17:40:16 1302

已有的手段:

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

前端开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:16:40

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

    指定值Specified values:在样式表中指定的值

    将确定一个属性使用的是声明值、继承值还是初始值
    计算值Computed values:格式化文档之前,根据样式表计算出的值

    相对的URI将转化为绝对URI
    float: left将导致计算值为display:block也发生在这一步
    相对单位em将转化为px或类似单位(当然,如果font-size中用到了em,则需要到下一步才能算出)
    使用值Used values:格式化文档之后,根据样式表及层叠关系计算出的值

    百分比值转化为px或类似单位
    line-height的相应计算
    真实值Actual values:使用值在一些UA中可能不允许被使用,因此还可能发生针对UA的转化

    比如在chrome里面,px不允许有小数,因此就算使用值是33.333px,真实值将是33px。这可能导致一些subpixel bug
    比如在kindle的浏览器里面,UA本身不支持灰度以外的颜色,因此所有的颜色将会转化会灰色
    对应的值的查看,以Developer Tools截图为例:
    screenshot

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程