Відсотки у CSS — від чого насправді рахується значення у %

HTML

<div class="half">width: 50% — половина ширини батька</div>
<div class="full">width: 100% — вся ширина</div>

CSS

div {
    background: #0172ad;
    color: #fff;
    padding: 6px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.half { width: 50%; }
.full { width: 100%; }

HTML

<p class="note">Синій контур усюди нижче — та сама коробка-батько: ширина 400px,
    висота 200px, шрифт 20px.</p>

<div class="ruler">1. <code>padding-top: 50%</code></div>
<div class="box">
    <div class="cell pad"></div>
</div>
<p class="note">Синій прямокутник усередині — це порожній блок, у якому є лише
    верхній відступ. Він вийшов 200 пікселів заввишки: половина ШИРИНИ коробки,
    а не її висоти.</p>

<div class="ruler">2. <code>height: 50%</code> — у батька висота задана</div>
<div class="box">
    <div class="cell h"><b>100px, як і чекали</b></div>
</div>

<div class="ruler">3. те саме <code>height: 50%</code>, але у батька <code>height: auto</code></div>
<div class="box auto">
    <div class="cell h"><b>правило проігноровано: висота дорівнює висоті вмісту</b></div>
</div>

<div class="ruler">4. <code>font-size: 50%</code> і <code>line-height: 150%</code></div>
<div class="box">
    <div class="cell fs">
        <b>шрифт 10px — половина батьківських 20px, а міжрядковий інтервал
            15px — півтора від ВЛАСНИХ десяти</b>
    </div>
</div>

<div class="ruler">5. відсоток у <code>transform</code> — від розмірів самого елемента</div>
<div class="box tr">
    <div class="ghost">де блок був</div>
    <div class="moved">translateX(50%) translateY(100%)</div>
</div>

CSS

.ruler {
    max-width: 400px;
    margin: 22px 0 6px;
    color: #5a6472;
    font-size: .9rem;
}

/* межу малюємо контуром, а не рамкою: контур не входить у розкладку,
   тому вміст коробки лишається рівно 400 на 200 пікселів */
.box {
    width: 400px;
    height: 200px;
    margin-bottom: 4px;
    background: #f6f9ff;
    outline: 2px solid #2f6fd0;
    font-size: 20px;
}

.box.auto {
    height: auto;
    min-height: 40px;
}

.box.tr {
    position: relative;
    height: 140px;
}

.cell {
    margin: 0 0 6px;
    background: #dbe6f5;
    font-size: .85rem;
}

.cell b {
    display: block;
    padding: 2px 6px;
    color: #29713a;
    font-weight: 400;
}

.pad {
    padding-top: 50%;
}

.h {
    height: 50%;
}

.fs {
    font-size: 50%;
    line-height: 150%;
}

.ghost,
.moved {
    box-sizing: border-box;
    width: 100px;
    height: 40px;
    padding: 4px;
    font-size: .75rem;
}

.ghost {
    border: 2px dashed #b9c6d8;
    color: #8a93a2;
}

.moved {
    margin-top: -40px;
    border: 2px solid #d64545;
    background: #fdeeee;
    transform: translateX(50%) translateY(100%);
}

HTML

<table>
  <tr>
    <td>Вміст таблиці</td>
  </tr>
</table>

CSS

table {
    font-size: 20px;
    width: 100%; 
    height: 70px;
    background: #f085f0; 
   }

HTML

<div class="box">

<p>У цьому прикладі, Ви можете змінювати величину значення <strong>percent</strong>.</p>

<p><strong>percent</strong> встановлює ширину для елемента на сторінці. Результат дії властивості можна побачити за поведінкою другого блоку.</p>

<strong>width: </strong>
<input type="range" class="input" id="percent" value="100" min="0"> %<strong>;</strong>
  
</div>

<div class="block">
  Моя ширина: <span>100%</span>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
  margin-bottom: 24px;
  transition: all .15s ease-in;
}

.block {
  background-color: fuchsia;
  width: 100%;
  height: 100px;
  padding: 4px;
  text-align: center;
  font-weight: 700;
  transition: height .15s ease-in;
  font-size: 18px;
}

.input {
  width: 75px;
  position: relative;
  bottom: -4px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

JS

document.querySelectorAll('#percent').forEach((el) => el.addEventListener('change', function () {
  var num = this.value;
  document.querySelectorAll('.block').forEach((n) => n.style.setProperty('width', num + '%'));
  document.querySelectorAll('.block > span').forEach((n) => n.innerHTML = num + '%');
}));