使用百分比

建立響應式應用程式時的一個有用單元。

它的大小取決於其父容器。

方程：

（父容器的寬度）*（百分比（％））=輸出

例如：

父級有 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