Modelo de Caixas no HTML5 - Guia Interativo

Os elementos HTML são organizados em caixas, que são retângulos com altura, largura, margens, bordas e preenchimento. O modelo de caixas é a forma como o navegador organiza e exibe os elementos na tela.

As caixas são compostas por cinco partes principais: conteúdo, padding, border, outline e margin. Cada uma dessas partes pode ser estilizada com CSS para criar diferentes efeitos visuais.

As propriedades de estilo que afetam as caixas são:

width

Width é a largura da caixa, ou melhor a largura interna da caixa, ou seja, a largura do local que abrigará todo o conteúdo. existem algumas forma de definirmos o width:

auto: A largura da caixa é determinada pelo seu conteúdo.

width: auto;

valor fixo: Define a largura da caixa em pixels, centímetros, porcentagem ou outra unidade de medida.

width: 100px;

porcentagem: Define a largura da caixa em relação à largura do contêiner pai.

width: 80%;

height

Height é a altura da caixa, ou melhor a altura interna da caixa, ou seja, a altura do local que abrigará todo o conteúdo. existem algumas forma de definirmos o height:

auto: A altura da caixa é determinada pelo seu conteúdo.

height: auto;

valor fixo: Define a altura da caixa em pixels, centímetros, porcentagem ou outra unidade de medida.

height: 100px;

porcentagem: Define a altura da caixa em relação à altura do contêiner pai.

height: 80%;

padding

Padding é o espaço entre o conteúdo da caixa e a borda. Ele é usado para adicionar espaço interno à caixa. O padding pode ser definido para cada lado da caixa (top, right, bottom, left) ou para todos os lados ao mesmo tempo.

Exemplo de código:

padding: 10px;

Isso significa que todos os lados da caixa terão 10px de padding. Se quisermos que cada lado tenha um valor diferente, podemos fazer o seguinte:

padding-top: 10px; (modifica o padding superior)

padding-right: 20px; (modifica o padding direito)

padding-bottom: 30px; (modifica o padding inferior)

padding-left: 40px; (modifica o padding esquerdo)

border

Border é a borda da caixa. Ela é usada para adicionar uma borda ao redor da caixa. A borda pode ser definida para cada lado da caixa (top, right, bottom, left) ou para todos os lados ao mesmo tempo.

Exemplo de código:

border-width: 1px; border-style: solid; border-color: black;

Isso significa que todos os lados da caixa terão uma borda de 1px de largura, sólida e preta. Se quisermos que cada lado tenha um valor diferente, podemos fazer o seguinte:

border-top-width: 1px; border-top-style: solid; border-top-color: black; (modifica a borda superior)

border-right-width: 2px; border-right-style: solid; border-right-color: black; (modifica a borda direita)

border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: black; (modifica a borda inferior)

border-left-width: 4px; border-left-style: solid; border-left-color: black; (modifica a borda esquerda)

Tipos de Bordas

Além da borda sólida, existem outros tipos de bordas que podem ser aplicadas às caixas. Aqui estão alguns exemplos:

Dashed: Uma borda tracejada.

border-style: dashed;

Dotted: Uma borda pontilhada.

border-style: dotted;

Double: Uma borda dupla.

border-style: double;

Groove: Uma borda com efeito de sulco.

border-style: groove;

Ridge: Uma borda com efeito de crista.

border-style: ridge;

Inset: Uma borda com efeito de inserção.

border-style: inset;

Outset: Uma borda com efeito de projeção.

border-style: outset;

Você pode experimentar esses diferentes tipos de bordas para ver como eles afetam a aparência das caixas.

Exemplo Interativo

Experimente alterar o tipo de borda abaixo para ver como ele afeta a caixa:

outline

Outline é uma linha que é desenhada ao redor de um elemento, fora da borda. Ela é usada para destacar um elemento sem afetar o layout da página. Diferente da borda, o outline não ocupa espaço e não afeta o tamanho ou a posição do elemento.

Exemplo de código:

outline: 2px solid red;

Isso significa que todos os lados do elemento terão um outline de 2px de largura, sólido e vermelho. Se quisermos que cada lado tenha um valor diferente, podemos fazer o seguinte:

outline-width: 2px; (modifica a largura do outline)

outline-style: dashed; (modifica o estilo do outline)

outline-color: blue; (modifica a cor do outline)

Tipos de Outline

Assim como a borda, o outline também pode ter diferentes estilos. Aqui estão alguns exemplos:

Dashed: Um outline tracejado.

outline: 2px dashed blue;

Dotted: Um outline pontilhado.

outline: 2px dotted green;

Double: Um outline duplo.

outline: 4px double purple;

Groove: Um outline com efeito de sulco.

outline: 4px groove orange;

Ridge: Um outline com efeito de crista.

outline: 4px ridge pink;

Inset: Um outline com efeito de inserção.

outline: 4px inset brown;

Outset: Um outline com efeito de projeção.

outline: 4px outset black;

Você pode experimentar esses diferentes tipos de outline para ver como eles afetam a aparência dos elementos.

Exemplo Interativo

Experimente alterar o tipo de outline abaixo para ver como ele afeta a caixa:

margin

Margin é o espaço entre a caixa e os elementos vizinhos. Ela é usada para adicionar espaço externo à caixa. A margem pode ser definida para cada lado da caixa (top, right, bottom, left) ou para todos os lados ao mesmo tempo.

Exemplo de código:

margin: 10px;

Isso significa que todos os lados da caixa terão 10px de margem. Se quisermos que cada lado tenha um valor diferente, podemos fazer o seguinte:

margin-top: 10px; (modifica a margem superior)

margin-right: 20px; (modifica a margem direita)

margin-bottom: 30px; (modifica a margem inferior)

margin-left: 40px; (modifica a margem esquerda)

Tipos de Margem

Assim como padding, a margem também pode ter diferentes estilos. Aqui estão alguns exemplos:

Valor fixo: Define a margem usando as unidades de medidas vista em tipografia Unidades de Medida no CSS3.

margin: 10px;

Porcentagem: Define a margem em relação à largura do contêiner pai.

margin: 10%;

margin: auto;

A propriedade margin: auto; é usada para centralizar um elemento horizontalmente dentro do seu contêiner. Para que isso funcione, o elemento deve ter uma largura definida. Quando aplicamos margin: auto;, o navegador calcula automaticamente as margens esquerda e direita para que o elemento fique centralizado.

Exemplo de código:

        <style>
            .centered-box {
                width: 50%;
                margin: auto;
                background-color: lightblue;
            }
        </style>

        <div class="centered-box">
            Este é um exemplo de uma caixa centralizada.
        </div>

No exemplo acima, a div com a classe centered-box terá uma largura de 50% do contêiner pai e será centralizada horizontalmente devido ao uso de margin: auto;.

Exemplo Interativo

Experimente alterar os valores abaixo para ver como eles afetam a caixa:

Experimente usar valores negativos na margem para ver como a caixa se comporta em relação aos elementos vizinhos.

Conteúdo

Na imagem acima, temos uma caixa com as seguintes partes:

Vermelho Representa o padding. OBS.: padding não possui cor nem efeito visual, o que vocês estão vendo é apenas o background.
Verde: Representa a borda da caixa.
Rosa: Representa o outline.

Ferramenta de desenvolvedor

Uma boa forma de visualizar a organização das caixas e testar os melhores formatos é utilizando o Dev Tools do Chrome. Para acessar, clique com o botão direito do mouse sobre o elemento que deseja inspecionar e selecione a opção "Inspecionar".

Na aba "Elementos", você pode ver a estrutura de caixas do elemento selecionado. Cada caixa é representada por um retângulo, onde a borda externa é a margem, a borda intermediária é a borda e a borda interna é o padding. O conteúdo é o espaço interno da caixa.

recomanedo que assitam esse vídeo: Modelo de Caixas na prática (parte 1) min 03:50.

Shorthand

Shorthand é uma forma de escrever códigos CSS de forma mais compacta, facilitando a leitura e a manutenção do código.

As propriedades margin, padding, border e outline podem ser escritas de forma abreviada. Vamos ver como isso funciona para cada uma delas:

Margin

A propriedade margin pode ser escrita de forma abreviada para definir as margens de todos os lados de um elemento.

Exemplo de código:

margin: 10px;

Isso significa que todos os lados da margem terão 10px de distância.

Podemos definir margens diferentes para cada lado usando quatro valores:

margin: 10px 20px 30px 40px;

Isso significa que o lado superior terá 10px, o direito 20px, o inferior 30px e o esquerdo 40px. A ordem é sempre a mesma: superior, direito, inferior e esquerdo (sentido horário).

Também podemos usar apenas dois valores:

margin: 10px 20px;

Isso significa que o lado superior e inferior terão 10px, enquanto os lados direito e esquerdo terão 20px.

Padding

A propriedade padding funciona de forma semelhante à margin.

Exemplo de código:

padding: 10px;

Isso significa que todos os lados do padding terão 10px de distância.

Podemos definir padding diferentes para cada lado usando quatro valores:

padding: 10px 20px 30px 40px;

Isso significa que o lado superior terá 10px, o direito 20px, o inferior 30px e o esquerdo 40px.

Também podemos usar apenas dois valores:

padding: 10px 20px;

Isso significa que o lado superior e inferior terão 10px, enquanto os lados direito e esquerdo terão 20px.

Border

A propriedade border pode ser escrita de forma abreviada para definir a largura, estilo e cor da borda.

Exemplo de código:

border: 1px solid black;

Isso significa que a borda terá 1px de largura, estilo sólido e cor preta.

Outline

A propriedade outline funciona de forma semelhante à border.

Exemplo de código:

outline: 2px dashed red;

Isso significa que o outline terá 2px de largura, estilo tracejado e cor vermelha.

Sombras

Existem dois efeitos de sombra: externa e interna, mas a interna é pouco usada.

Sombra externa:

O 1º px: Refere-se ao deslocamento lateral. Valores positivos deslocam a sombra para a direita e valores negativos para a esquerda.

O 2º px: Refere-se ao deslocamento vertical. Valores positivos deslocam a sombra para baixo e valores negativos para cima.

O 3º px: Refere-se ao tamanho da dissipação da sombra ou raio de desfoque, que é a parte esfumaçada da sombra.

O 4º px: Refere-se ao tamanho da parte central da sombra, que é a parte mais opaca.

Por último, a cor da sombra, onde é mais comum usar a cor preta com transparência um pouco maior que 50%.

Exemplo Interativo

Experimente alterar os valores abaixo para ver como eles afetam a sombra da caixa:

box-shadow:     ;

Sombra Interna

Para criar sombras internas, usamos a propriedade box-shadow com o valor inset. A sombra interna é desenhada dentro da caixa, criando um efeito de profundidade.

Exemplo de código:

box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);

Isso significa que a sombra será desenhada dentro da caixa, com um deslocamento lateral de 5px, um deslocamento vertical de 5px, um raio de desfoque de 10px e uma cor preta com 50% de opacidade.

Exemplo Interativo

Experimente alterar os valores abaixo para ver como eles afetam a sombra interna da caixa:

box-shadow: inset    ;

Bordas Decoradas

Além dos tipos de bordas que vimos anteriormente, é possível criar bordas decoradas com CSS. Aqui estão alguns exemplos:

Borda Arredondada

Para criar bordas arredondadas, usamos a propriedade border-radius. Podemos definir um valor para cada canto da caixa ou um valor único para todos os cantos.

Exemplo de código:

border-radius: 10px;

Isso significa que todos os cantos da caixa terão um raio de 10px. Se quisermos que cada canto tenha um valor diferente, podemos fazer o seguinte:

border-top-left-radius: 10px; (modifica o canto superior esquerdo)

border-top-right-radius: 20px; (modifica o canto superior direito)

border-bottom-left-radius: 30px; (modifica o canto inferior esquerdo)

border-bottom-right-radius: 40px; (modifica o canto inferior direito)

Exemplo Interativo

Experimente alterar os valores abaixo para ver como eles afetam a borda arredondada da caixa:

<div style="
border-radius:    
width: 200px; 
height: 200px; 
background-color: aquamarine; 
margin-top: 20px;">

Note que se por 100px para todos formará um círculo. Uma forma mais simples de fazer um circulo é usar border-radius: 50%;.

Borda Gradiente

Para criar bordas com gradientes, usamos a propriedade border-image. Podemos definir um gradiente linear ou radial para a borda da caixa.

Exemplo de código:

border-image: linear-gradient(to right, red, blue) 1;

Sintaxe

A propriedade border-image permite aplicar uma imagem ou um gradiente às bordas de um elemento. A sintaxe básica para usar border-image com gradientes é a seguinte:

border-image: tipo-de-gradiente(direção, cor1, cor2) tamanho;

Vamos detalhar cada parte dessa sintaxe:

tipo-de-gradiente: Pode ser linear-gradient para gradientes lineares ou radial-gradient para gradientes radiais.
direção: No caso de gradientes lineares, define a direção do gradiente (por exemplo, to right para da esquerda para a direita). Para gradientes radiais, define a forma (por exemplo, circle para circular).
cor1, cor2: As cores que compõem o gradiente. Pode haver mais de duas cores.
tamanho: Define a área da borda que será preenchida pelo gradiente. Um valor maior que 1 geralmente é necessário para preencher a borda adequadamente.

linear

border-image: linear-gradient(to right, red, blue) 1;

Este exemplo cria uma borda com um gradiente linear de vermelho para azul na horizontal, com um tamanho de 1.

radial

border-image: radial-gradient(circle, red, blue) 119;

Este exemplo cria uma borda com um gradiente radial de vermelho para azul em forma de círculo, com um tamanho de 119.

Materiais de apoio

Modelo de Caixas.pdf

Primeiro mini-projeto.pdf