Unidades Absolutas

• px (Pixels): Esta unidade absoluta é uma unidade de medida de tamanho fixo em CSS. É a unidade absoluta mais comum e oferece controle preciso sobre as dimensões. 1px é sempre igual a 1/96 de polegada.
• in (Inch): Esta unidade absoluta é igual a 96px.
• cm (Centímetros): Esta unidade absoluta é igual a 25.2/64 de uma polegada.
• mm (Milímetros): Esta unidade absoluta é igual a 1/10 de um centímetro.
• q (Quarter-Millimeters): Esta unidade absoluta é igual a 1/40 de um centímetro.
• pc (Picas): Esta unidade absoluta é igual a 1/6 de polegada.
• pt (Points): Esta unidade absoluta é igual a 1/72 de polegada.

<link rel="stylesheet" href="styles.css">
<div class="units">
  <div class="unit px">px</div>
  <div class="unit inch">in</div>
  <div class="unit cm">cm</div>
  <div class="unit mm">mm</div>
  <div class="unit q">q</div>
  <div class="unit pc">pc</div>
  <div class="unit pt">pt</div>
</div>

.units {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.unit {
  background: steelblue;
  color: white;
  text-align: center;
  padding: 4px;
}

.px {
  width: 40px;
  height: 40px;
}

.inch {
  width: 0.5in;
  height: 0.5in;
}

.cm {
  width: 1cm;
  height: 1cm;
}

.mm {
  width: 10mm;
  height: 10mm;
}

.q {
  width: 40q;
  height: 40q;
}

.pc {
  width: 6pc;
  height: 6pc;
}

.pt {
  width: 36pt;
  height: 36pt;
}

Unidades Relativas

• Porcentagens: Essas unidades relativas permitem que você defina tamanhos, dimensões e outras propriedades como uma proporção do elemento pai. Por exemplo, se você definir width: 50%; em um elemento, ele ocupará metade da largura do seu contêiner pai.
• Unidade em: Essas unidades são relativas ao tamanho da fonte do elemento. Se você estiver usando ems para a propriedade font-size, o tamanho do texto será relativo ao tamanho da fonte do elemento pai.
• Unidade rem: Essas unidades são relativas ao tamanho da fonte do elemento raiz, que é o elemento html.
• Unidade vh: vh significa "viewport height" e 1vh é igual a 1% da altura da viewport.
• Unidade vw: vw significa "viewport width" e 1vw é igual a 1% da largura da viewport.

<link rel="stylesheet" href="styles.css">
<div class="parent">
  <div class="box percent">50%</div>
  <div class="box em">2em</div>
  <div class="box rem">2rem</div>
  <div class="box vh">10vh</div>
  <div class="box vw">10vw</div>
</div>

html {
  font-size: 16px;
}

.parent {
  width: 200px;
  font-size: 20px;
  border: 2px dashed #555;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.box {
  background: seagreen;
  color: white;
  text-align: center;
  padding: 6px;
}

.percent {
  width: 50%;
}

.em {
  font-size: 2em;
}

.rem {
  font-size: 2rem;
}

.vh {
  height: 10vh;
}

.vw {
  width: 10vw;
}

Função calc

• Função calc(): Com a função calc(), você pode realizar cálculos diretamente dentro das suas folhas de estilo para determinar valores de propriedades de forma dinâmica. Isso significa que você pode criar interfaces de usuário flexíveis e responsivas calculando dimensões com base no tamanho da viewport ou em outros elementos.

<link rel="stylesheet" href="styles.css">
<div class="calc-box">calc()</div>

.calc-box {
  width: calc(100% - 40px);
  padding: 10px;
  background: steelblue;
  color: white;
  text-align: center;
  border: 2px solid black;
}