CSS百分比单位总结

CSS中的很多地方都是可以使用百分比单位的,之前一直理所当然的认为百分比就是相对于容器的宽高设定的,后来在自己实现垂直居中的多种写法时,才意识到这个问题,遂收集资料进行整理。

  1. 相对于容器的宽度的
    相对于content-box宽度
    width | max-width | min-width | margin | padding | grid-template-columns | grid-auto-columns | column-gap
    相对于border-box宽度
    left | right
    也就是说设置的box-sizing属性会直接影响到百分比的计算值
    (已经在chrome下进行测试)
  2. 相对于容器content-box的高度的
    相对于content-box高度
    height | max-height | min-height | grid-template-rows | grid-auto-rows | row-gap
    相对于border-box高度
    bottom | top
    (已经在chrome下进行测试)
  3. 相对于自身宽高的
    background-size | broder-radius | transform: translate() | border-image-width | transform-origin
  4. 相对于父元素的font-size的
    font-size
    (已经在chrome下进行测试)
  5. 相对于自身字号的
    line-height
    (已经在chrome下进行测试)
  6. 相对于行高的
    vertical-align
    (已经在chrome下进行测试)
  7. 其他特殊

文中的大部分属性的百分比单位自己都在chrome下进行了测试,其中相对于自身宽高一项未测试。文中描述如有错误,欢迎大家指出来一起交流。

本文参考如下文章
1. 知乎问答:css样式的百分比都相对于谁
2. 深入理解line-height与vertical-align

这个line-height为vertical-algin的讲解比较深入细致,有时间自己要研究一下,进行一下总结。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值