深入学习CSS属性中的百分比

面试题：css中的单位都有哪些？可以取百分数的单位有哪些？这些百分比是如何计算的？

css中的单位

• 绝对单位
  in-英寸；cm；mm；pt-磅；pc-pica
• 相对单位
  em-与元素字号挂钩；ex-与元素字体的“x高度”挂钩；rem-与根元素字号挂钩；px-与CSS像素挂钩；%-另一属性值的百分比

css中可以取百分比的属性

• 定位：top,right,bottom,left;
• 盒模型：width,height,margin,padding;
• 背景：backgroud-position,background-size;
• 文本：text-indent;
• 字体：font-size;

百分比是如何计算的

百分比的计算是相对一个基数的，这个基数与当前元素的包含块有关。具体如下：

• 基于包含块的宽度来计算的属性：margin，padding，width，max-width，min-width，left，right，text-indent.
• 基于包含块的高度来计算的属性：top，bottom，height，max-height，min-height
• 基于当前字体大小来计算的属性：line-height
• 基于line-height来计算的属性：vertical-align
• 基于元素本身的宽高：background-position：背景图像的位置，分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom
• 基于元素本身的宽度：background-size但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算