CSS中常用属性设置百分号是如何计算的

• 百分号的作用

  • 我们使用百分号作为一些CSS属性的值可以实现自适应的效果。
  • 但是为了正确的使用百分号，我们需要明确不同CSS属性的百分号是相对于哪个值计算的。

• 不能使用百分号作为属性值的属性

  • border-width属性不能使用百分号作为属性值。

• 可以使用百分号的属性

  • line-height

    • line-height的百分号值是相对于当前元素的font-size值计算的，如当前元素font-size: 12px;，那么line-height: 100%;表示line-height的值是12px。
    • line-height属性常用来使文本垂直居中。

  • vertical-align

    • vertical-align的百分号是相对于当前元素的line-height值计算的。

    • 当vertical-align的值是数值时，表示相对于基线上下位移，正值向上，负值向下。

    • vertical-align常用于使设置了这个属性的元素相对于父元素的对齐方式。

    • vertical-align属性只能设置于inline、inline-block元素才能起作用。

    • vertical-align的默认值是baseline。

      <div class="wrapper">
        <span>aaa</span>
      </div>
      <style>
        .wrapper{
          width: 200px;
          height: 200px;
        }
        span{
          vertical-align: middle;
        }
      </style>
      

  • font-size

    • font-size的百分号是相对于父元素的font-size计算的。

  • text-indent

    • text-indent是相对于当前元素的包含块计算的。