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

标签：技术分享   背景图   情况   出现   img   大小   origin   pad   position   

子曰：学好百分值，考试考百分

首先是确定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. 定位中的top、right、bottom、left 值为百分比时，都是参考包含块同方向的width 或height 进行计算值
2. 尺寸与补白中的height、*-height、width、*-width 值为百分比时，也是参考包含块同方向的width 或height 进行计算值
3. 而尺寸与补白中的padding、margin，则是水平（默认）书写模式下，参照其包含块的width进行计算，也就是说同书写的方向相同。（大概是由于padding 是同内容相关的，同时没有 继承性，在同一书写方向上便于计算值）
4. 字体中的font-size则是基于父对象中字体的尺寸（大该是由于font-size 有继承性）
5. 文本中的text-indent 也是基于包含块的width 进行计算的，（推测是同书写方向相同，经验证确实是，当设置writing-mode 为vertical-lr 时，是基于包含块的height 进行计算的）
6. 文本中的line-height 基于font-size 进行计算，而vertical-align 则是基于line-height 进行计算的。

7. 背景与边框中的background-position 则是基于容器尺寸减去背景图尺寸进行换算（是这么理解的，因为值为50% 时，使得图像居中，也就是）

   `background-position` = （容器尺寸-背景尺寸）/2

8. 背景与边框中的background-size 则是基于background-origin区域大小（很容易将一个图进行放大或缩小，下面两个图，分别是设置为50% 和33.3333% 的效果）
   
   

9. 变换中的transform-origin 值为百分比时，横坐标参考元素的宽度，纵坐标参考元素的高度

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

标签：技术分享   背景图   情况   出现   img   大小   origin   pad   position   

原文地址：https://www.cnblogs.com/JobbyM/p/8872520.html