一日一练-CSS CSS中percentage百分值的使用

子曰:学好百分值,考试考百分

首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计。

定位(Positioning)

  1. top
    用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。
  2. right
    用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。
  3. bottom
    用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。
  4. left
    用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。

尺寸与补白(Dimension)

  1. width
    用百分比来定义宽度。百分比参照包含块宽度。不允许负值。
  2. min-width
    用百分比来定义最小宽度。不允许负值。
  3. max-width
    用百分比来定义最大宽度。不允许负值。
  4. height
    用百分比来定义高度。百分比参照包含块高度。不允许负值。
  5. min-height
    用百分比来定义最小高度。不允许负值。
  6. max-height
    用百分比来定义最大高度。不允许负值
  7. margin
    用百分比来定义外补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,可以为负值。
  8. padding
    用百分比来定义内补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,不允许负值。

背景与边框(Backgrounds and Borders)

  1. border-radius
    用百分比定义圆形半径或椭圆的半长轴,半短轴。水平方向百分比参照元素宽度(非内容宽度),垂直方向参照元素高度。不允许负值。
  2. border-image-width
    用百分比指定图像边框的厚度。参照图像边框区域的大小(包含border和padding)进行换算。不允许负值。
  3. background-position
    用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
  4. background-size
    当属性值为百分比时,参照背景图像的background-origin区域大小进行换算(而不是包含块大小)。

字体(Font)

  1. font-size
    用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

文本(Text)

  1. word-spacing
    用百分比指定单词间隔。可以为负值。(CSS3)。
  2. text-indent
    用百分比指定文本的缩进。可以为负值。
  3. vertical-align
    把当前盒提升(正值)或者降低(负值)这个距离,百分比相对line-height计算。当值为0%时等同于baseline。
  4. line-height
    用百分比指定行高,其百分比基于文本的font-size进行换算。不允许负值。
  5. text-size-adjust
    用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

伸缩盒(Flexible Box)(新)

  1. flex-basis
    用百分比来定义宽度。不允许负值。

变换(Transform)

  1. transform-origin
    用百分比指定坐标值。可以为负值。
  2. perspective-origin
    用百分比指定透视点坐标值,相对于元素宽度。可以为负值。

总结

  1. 定位中的toprightbottomleft 值为百分比时,都是参考包含块同方向的widthheight 进行计算值
  2. 尺寸与补白中的height*-heightwidth*-width 值为百分比时,也是参考包含块同方向的widthheight 进行计算值
  3. 而尺寸与补白中的paddingmargin,则是水平(默认)书写模式下,参照其包含块的width进行计算,也就是说同书写的方向相同。(大概是由于padding 是同内容相关的,同时没有 继承性,在同一书写方向上便于计算值)
  4. 字体中的font-size则是基于父对象中字体的尺寸(大该是由于font-size 有继承性)
  5. 文本中的text-indent 也是基于包含块的width 进行计算的,(推测是同书写方向相同,经验证确实是,当设置writing-modevertical-lr 时,是基于包含块的height 进行计算的)
  6. 文本中的line-height 基于font-size 进行计算,而vertical-align 则是基于line-height 进行计算的。
  7. 背景与边框中的background-position 则是基于容器尺寸减去背景图尺寸进行换算(是这么理解的,因为值为50% 时,使得图像居中,也就是)
`background-position` = (容器尺寸-背景尺寸)/2
  1. 背景与边框中的background-size 则是基于background-origin区域大小(很容易将一个图进行放大或缩小,下面两个图,分别是设置为50% 和33.3333% 的效果)

  2. 变换中的transform-origin 值为百分比时,横坐标参考元素的宽度,纵坐标参考元素的高度
作者:JobbyM 出处:http://www.cnblogs.com/JobbyM/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。如有问题,可以邮件:songzhipengmune(at)126(dot)com 微博:JobbyM 联系我,非常感谢。
原文地址:https://www.cnblogs.com/JobbyM/p/8872520.html