[CSS] Comparação entre largura 100% e 50% | Como usar w-100
Este guia compara width: 100%; e width: 50%;, e explica quando cada uma é útil.
🔹 Código parcial
<div class="w-100">
Elemento com largura definida como 100%.
</div>
<style>
.w-100 {
width: 100%;
}
</style>
💻 Código funcional completo (basta colar no HTML)
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Comparação de largura 100% vs 50%</title>
<style>
.w-100 {
width: 100%;
background-color: #90EE90;
padding: 1rem;
}
.w-50 {
width: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="w-100">Elemento com largura 100%</div>
<div class="w-50">Elemento com largura 50%</div>
</body>
</html>
🧩 Aplicações e usos
width: 100%; é uma forma básica de fazer com que o elemento se ajuste à largura do seu elemento pai, sendo ideal para design responsivo.
Já o width: 50%; é útil para layouts com duas colunas.
📚 Como usar a propriedade width na prática
A propriedade width do CSS controla a largura do elemento. Os valores % e px se comportam de forma diferente. % é relativo ao pai, enquanto px é absoluto.
🔍 Vantagens do uso de % no design responsivo
width: 100%; é especialmente útil para design responsivo, pois adapta-se ao contêiner pai (geralmente o viewport). O padrão é usar 100% e ajustar com media queries.
📊 Layouts com múltiplas colunas
width: 50%; é bom para criar dois elementos lado a lado. Mas sem display: inline-block, float ou Flexbox/Grid, os elementos empilham. Use display: flex; flex-wrap: wrap; no pai para alinhamento horizontal.
Nota: por padrão, o % não inclui padding nem borda. Use box-sizing: border-box para incluir tudo no cálculo da largura e facilitar o controle.