tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Modelo de Caixa

❮ Anterior Próximo capítulo ❯

O modelo CSS Box

Todos os elementos de HTML pode ser considerado como caixas. Em CSS, o termo "modelo de caixa" é usado quando se fala de design e layout.

O modelo de caixa CSS é essencialmente uma caixa que envolve todos os elementos HTML. É constituída por: margens, bordas, preenchimento e conteúdo real.

A imagem abaixo ilustra o modelo de caixa:

Explicação das diferentes partes:

  • Conteúdo - O conteúdo da caixa, onde texto e imagens aparecem
  • Padding - Limpa uma área em torno do conteúdo.O preenchimento é transparente
  • Border - A fronteira que gira em torno do preenchimento e conteúdo
  • Margin - Limpa uma área fora da fronteira.A margem é transparente

O modelo de caixa nos permite adicionar uma borda em torno de elementos, e para definir o espaço entre os elementos.

Exemplo

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}
Tente você mesmo "

Largura e altura de um elemento

A fim de definir a largura e altura de um elemento corretamente em todos os navegadores, você precisa saber como o modelo de caixa funciona.

NotaImportante: Quando você define as propriedades largura e altura de um elemento com CSS, você apenas definir a largura e altura da áreadeconteúdo.Para calcular o tamanho total de um elemento, você também deve adicionar espaçamentos, bordas e margens.

Vamos assumir que queremos estilo de um <div> elemento a ter uma largura total de 350px:

Exemplo

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}
Tente você mesmo "

Aqui está a matemática:

320px (largura)
+ 20px (esquerda + direita estofamento)
+ 10px (borda esquerda + direita)
+ 0px (esquerda + margem direita)
= 350px

A largura total de um elemento deve ser calculado da seguinte forma:

elemento de largura Total = largura + padding-left + preenchimento direito + borda esquerda + borda direita + margem esquerda + margem direita

A altura total de um elemento deve ser calculado da seguinte forma:

Total de elementos height = altura + preenchimento top + preenchimento de fundo + borda superior + limite inferior + margem superior + margem inferior

Nota Nota para o velho IE: Internet Explorer 8 e versões anteriores, incluem preenchimento e borda na width propriedade. Para corrigir esse problema, adicione um <!DOCTYPE html> para a página HTML.

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»


❮ Anterior Próximo capítulo ❯