tecnologias-web.github.io

Layouts com CSS3

• Layouts com CSS3
  • Introdução
  • Trabalhando com dimensões
    • Modelo Caixa (Box-Model)
  • Display
  • Media Query
  • Flexbox
  • Pontos principais

Introdução

Com a disseminação de todo o tipo e tamanho de tela que são usados para navegar na web, foi-se necessário estender o CSS para que ele seja capaz de se adequar a tantas telas diferentes.

Técnicas mais modernas surgiram: flexbox, media query e uso de medidas relativas, com o objetivo de tornar essa tarefa mais fácil. Vamos aprender a todas.

Trabalhando com dimensões

Estas propriedades definem o tamanho dos elementos renderizados. Elas são height e width. Recebe valores em tamanho e porcentagem (mesmas unidades vistas anteriormente).

Modelo Caixa (Box-Model)

Além da altura (height) e largura (width), temos algumas outras medidas que influenciam no tamanho total que um elemento HTML ocupa na página:

• Border: Já mostramos a borda, ela possui uma espessura, o que altera também o espaço ocupado pela tag HTML.
• Padding: Espaço entre o conteúdo da tag e a borda dela. Pode ser colocado para as quatro direções ou apenas as que forem interessantes (top, bottom, left, right).
• Margin: Espaço entre a borda do elemento até a borda do próximo elemento (ou de algum limite do documento). Também pode ser utilizada em todas as quatro direções ou apenas nas que forem interessantes.

Essas distâncias configuram o que chamamos de Box-Model (modelo caixa). Desta maneira, quando definimos os atributos height e width do elemento em si, esses valores não levam em consideração o padding e o border, fazendo com que os elementos sejam maiores do que deveriam.

Para corrigir o problema de espaçamento e tamanho, basta utilizar a propriedade box-sizing. Os valores possíveis são

• content-box: Modelo Caixa Indica que as medidas de altura e largura não devem incluir padding e border.
• border-box: Indica que as medidas de altura e largura

Uma atitude comum entre os desenvolvedores é utilizar o border-box para todos os objetos como padrão. Para facilitar, podemos utilizar a seguinte regra para colocar esse atributo para todos os elementos da página usando o wildcard:

 * {
    box-sizing: border-box
}

Display

Define a maneira como os diversos elementos de uma página são exibidos. Temos quatro valores básicos:

• block: define uma região em bloco, que possui altura definida pelo conteúdo (ou CSS) e se expande da esquerda para a direita até onde for possível (ex: div’s).
• inline: define uma região em linha, com a largura definida pelo conteúdo e altura pelo tamanho da linha (ex: span).
• inline-block: define uma região com tamanho controlada pelo conteúdo ou CSS, nenhuma tag funciona assim por padrão.
• none: define uma região invisível, ela existe no HTML mas não aparece para o usuário e não altera o layout.

Media Query

O conceito principal de uma Media Query é verificar algumas informações do dispositivo visualizando o site, assim podendo definir um conjunto de regras que funcione melhor para este dispositivo. É possível verificar principalmente:

• Largura e altura do viewport (área visível da página).
• Largura e altura do aparelho em si (tela completa).
• Orientação (retrato ou paisagem).
• Resolução

Técnica de Media Query é muito popular no desenvolvimento mobile.

Flexbox

No CSS3 foi definida mais uma propriedade display, a Flex(box). A ideia do Flexbox é garantir que o conteúdo interno da página consiga se reorganizar de uma maneira previsível caso a janela mude de tamanho. Ajuda a fazer layouts de maneira mais simplificada e fluída.

Propriedades que fazem parte do modelo flexbox são divididas em propriedades para o container (que possui o display flex, chamado de flex-container) e para os seus filhos (chamados de flex-items).

Para auxiliar em deixar previsível o comportamento dos elementos de um flexbox-container (em vermelho), temos uma série de propriedades envolvidas:

• flex-direction: direção que os itens devem seguir - (coluna-linha).
• justify-content: como os itens se dispersam horizontalmente.
• align-items: como os itens se dispersam verticalmente.
• flex-wrap: se os itens devem passar a próxima linha caso falte espaço.
• align-content: como as linhas se dispersam.

Para os flex-items (em amarelo), precisamos das seguintes propriedades:

• order: identifica a ordem que o item deve aparecer.
• align-self: sobrecarrega o conteúdo da propriedade align-items.
• flex: identifica o tamanho deste elemento, em relação aos demais.

Pontos principais

Atente para os tópicos a seguir. Eles devem ser estudados com muita atenção, pois representam os pontos mais importantes do capítulo.

• Apesar das três maneiras, a única recomendada é a utilização de arquivos CSS externos ao documento HTML.

• Seletores CSS são basicamente de três tipos: por tags, por classe de tags e por id de tags (além da combinação destes);

• Existem diversas propriedades do CSS, apenas a experiência e utilização lhe fará entender todas elas. Treine muito.