使用百分比

创建响应式应用程序时的一个有用单元。

它的大小取决于其父容器。

方程：

（父容器的宽度）*（百分比（％））=输出

例如：

父级有 100px 宽度，而 Child 有 50％ 。

在输出中， Child 的宽度将是 Parent 的宽度的一半（50％） ，即 50px 。

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

OUTPUT