css尺寸之百分比%

CSS 中可以取百分比的属性

• 定位：top, right, bottom, left
• 盒模型：width,height, margin,padding
• 背景：background-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:100% 100%; 但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度和高度的百分比来计算
  • 顺便说一说 background-size 的另外两个自适应属性：「cover」 会在保持背景图宽高比的状态下填满块的宽和高，「contain」 会在保持背景图的宽高比的状态下尽量填满块的宽或高

<div
  style={{
    height: 200,
    width: 100,
    backgroundColor: "red",
    position: "relative",
  }}
>
  <div
    style={{
	  backgroundColor: "blue",
	  position: "absolute",

      height: "10%", // 20
      width: "10%", // 10
      top: "50%", // 100
      left: "50%", // 50
      margin: "10%", // 10
      padding: "10%", // 10,
	  backgroundSize:100% 100%; //10 20
      transform: "translate(-50%,-50%)", // -15,-20
    }}
  />
</div>

translate 的值并不是仅仅根据 width 和 height 来进行计算的，还要取决于 border 和 padding 的值。比如这里的 transform:translate(-50%,-50%)，则是基于 padding+width+border 的 50%和高度的 (原理同上)50%进行平移。原因是需要基于元素的左上角进行平移。