Dominando o Box-Sizing Reset em CSS

Introdução

Neste laboratório, exploraremos o conceito de Box-Sizing Reset na programação CSS. O laboratório abordará como resetar o modelo de caixa (box-model) e evitar que a width (largura) e a height (altura) de um elemento sejam afetadas por border (borda) ou padding (preenchimento). Ao final do laboratório, você terá uma compreensão completa da propriedade box-sizing e como ela pode ser usada para aprimorar o design de suas páginas web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Box-Sizing Reset

index.html e style.css já foram fornecidos na VM.

Para garantir que a width (largura) e a height (altura) de um elemento não sejam afetadas por border (borda) ou padding (preenchimento), use a propriedade CSS box-sizing: border-box. Isso inclui o padding e a border no cálculo da width e height do elemento. Se você deseja herdar a propriedade box-sizing de um elemento pai, use box-sizing: inherit.

Aqui está um exemplo de como usar a propriedade box-sizing com dois elementos div:

<div class="box">border-box</div>
<div class="box content-box">content-box</div>

*,
*::before,
*::after {
  box-sizing: inherit;
}

.box {
  display: inline-block;
  width: 120px;
  height: 120px;
  padding: 8px;
  margin: 8px;
  background: #f24333;
  color: white;
  border: 1px solid #ba1b1d;
  border-radius: 4px;
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

Neste exemplo, o primeiro elemento div tem box-sizing: border-box, e o segundo elemento div tem box-sizing: content-box.

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Box-Sizing Reset. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.