在HTML中使用百分比

百分比(Procent) 是一种经常在HTML中使用的值。使用百分比可以使设计更容易而不牺牲可访问性。

使用百分比的情况

• 容器大小的设定
• 尺寸的设置
• 边距和内边距
• 相对定位
• 视窗大小

容器大小的设定

容器大小可以使用百分比来设置，这样容器可以随着浏览器窗口大小的变化而变化。

<style>
  .container {
    width: 80%;
  }
</style>

<div class="container">
  <!-- content here -->
</div>

该容器的宽度将是其父项宽度的80％，并会自动缩放。

尺寸的设置

可以使用百分比设置宽度和高度。

<style>
  .inner {
    width: 50%;
    height: 50%;
  }
</style>

<div class="outer">
  <div class="inner">
    <!-- content here -->
  </div>
</div>

该元素的宽度和高度均为其父项的50％。

边距和内边距

可以使用百分比设置边距和内边距。

<style>
  .box {
    margin: 10% 0;
    padding: 5% 0;
  }
</style>

<div class="box">
  <!-- content here -->
</div>

上边和下边的边距设置为盒子高度的10％，左边和右边的边距设置为0。内边距设置为盒子高度的5％。

相对定位

相对定位可以使用百分比定位。

<style>
  .outer {
    position: relative;
  }
  .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="outer">
  <div class="inner">
    <!-- content here -->
  </div>
</div>

inner元素在outer元素的中心。可以通过不同的top和left值调整该元素的位置。

视口大小

可以使用百分比相对于视口大小设置元素大小。

<style>
  .full {
    width: 100vw;
    height: 100vh;
  }
</style>

<div class="full">
  <!-- content here -->
</div>

该元素的宽度和高度均为视口的100％。

以上就是HTML中使用百分比的主要情况。