HTML - Criando layouts com CSS

Modelo de Caixa CSS

Para criar layouts usando CSS, você precisa entender o modelo de caixa CSS. Cada elemento HTML é tratado como uma caixa pelo navegador, e o modelo de caixa descreve como essas caixas são dimensionadas e espaçadas.

O modelo de caixa tem quatro partes principais: conteúdo, preenchimento, borda e margem. A área de conteúdo é onde o conteúdo real do elemento, como texto ou imagens, é exibido. Ao redor da área de conteúdo está o preenchimento, que adiciona espaço entre o conteúdo e a borda. A borda é uma linha que envolve o preenchimento e o conteúdo, e pode ter espessura, estilo e cor. A margem é o espaço fora da borda que separa o elemento de outros elementos na página.

Por padrão, o tamanho de um elemento é calculado com base na caixa de conteúdo, o que significa que a largura e altura especificadas de um elemento se aplicam apenas à área de conteúdo. No entanto, você pode mudar esse comportamento usando a propriedade box-sizing. Definir box-sizing: border-box; inclui o preenchimento e a borda na largura e altura especificadas, facilitando o controle do tamanho geral de um elemento.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

O elemento .box tem uma área de conteúdo de 200 pixels de largura e 100 pixels de altura. Também tem 20 pixels de preenchimento em todos os lados, uma borda preta sólida de 1 pixel e uma margem de 10 pixels em todos os lados. A largura total do elemento seria de 242 pixels (200px de conteúdo + 20px de preenchimento à esquerda + 20px de preenchimento à direita + 1px de borda à esquerda + 1px de borda à direita), e a altura total seria de 142 pixels (100px de conteúdo + 20px de preenchimento superior + 20px de preenchimento inferior + 1px de borda superior + 1px de borda inferior).

Alterando os valores do conteúdo, preenchimento, borda e margem, você pode controlar o espaçamento e o layout dos elementos em sua página web. O modelo de caixa CSS é um conceito básico no design web e entendê-lo é necessário para criar layouts usando CSS.

Propriedade Display

A propriedade display no CSS controla como um elemento é mostrado na página web. Ela determina o tipo de caixa que um elemento cria, como é organizado em relação a outros elementos e como seu conteúdo é exibido. Os valores mais comumente usados para a propriedade display são block, inline, inline-block, flex e grid.

Elementos de nível de bloco, como <div>, <p>, <h1> a <h6> e <ul>, geram uma caixa de nível de bloco. Esses elementos começam em uma nova linha, ocupam toda a largura disponível por padrão e se empilham verticalmente um após o outro. Você pode definir as propriedades de largura, altura, preenchimento, margem e borda para elementos de nível de bloco.

Elementos inline, como <span>, <a>, <strong> e <em>, geram uma caixa de nível inline. Esses elementos não começam em uma nova linha e ocupam apenas a largura necessária para exibir seu conteúdo. Elementos inline fluem dentro do texto e não interferem no layout do conteúdo ao redor. Você não pode definir largura, altura, margens superior ou inferior, ou preenchimento vertical para elementos inline.

Elementos inline-block têm características de elementos tanto inline quanto de nível de bloco. Eles fluem inline como elementos inline, mas podem ter largura, altura, margens e preenchimento especificados como elementos de nível de bloco. Elementos inline-block são úteis quando você deseja colocar elementos lado a lado, mas ainda poder controlar suas dimensões.

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

Flexbox e Grid são dois sistemas de layout poderosos no CSS que oferecem maneiras mais avançadas de criar designs flexíveis e responsivos.

Flexbox, ou Layout de Caixa Flexível, é um sistema de layout unidimensional que permite criar layouts onde os elementos podem crescer, encolher e reordenar com base no espaço disponível. É bem adequado para criar menus de navegação, layouts de cartões e outros componentes flexíveis.

CSS Grid é um sistema de layout bidimensional que permite criar layouts complexos baseados em grade com linhas e colunas. Ele fornece uma maneira de definir o tamanho e a posição dos elementos dentro de um contêiner de grade, facilitando a criação de layouts responsivos sem depender de flutuações ou posicionamento.

Tanto Flexbox quanto Grid serão abordados com mais detalhes posteriormente neste tutorial.

Ao usar a propriedade display e seus vários valores, você pode controlar como os elementos são exibidos e dispostos em sua página web. Entender as diferenças entre elementos de bloco, inline e inline-block, bem como os fundamentos do Flexbox e Grid, ajudará você a criar layouts mais flexíveis e responsivos usando CSS.

Posicionamento

O posicionamento CSS permite controlar a colocação de elementos em uma página web. Existem cinco tipos principais de posicionamento: estático, relativo, absoluto, fixo e aderente.

O posicionamento estático é o posicionamento padrão para todos os elementos. Um elemento com position: static; não é posicionado de maneira especial e segue o fluxo normal do documento. Elementos estáticos não são afetados pelas propriedades top, right, bottom ou left.

O posicionamento relativo permite mover um elemento em relação à sua posição normal no fluxo do documento. Quando você define position: relative; em um elemento, pode usar as propriedades top, right, bottom e left para mover o elemento para longe de sua posição normal. O espaço originalmente usado pelo elemento permanece no fluxo do documento, e outros elementos não são afetados pelo reposicionamento.

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

O posicionamento absoluto remove um elemento do fluxo normal do documento e o posiciona em relação ao seu ancestral posicionado mais próximo ou ao bloco de conteúdo inicial, se não existir um ancestral posicionado. Um elemento com position: absolute; pode ser posicionado usando as propriedades top, right, bottom e left. Outros elementos agirão como se o elemento posicionado de forma absoluta não existisse no fluxo do documento.

.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

O posicionamento fixo é semelhante ao posicionamento absoluto, mas o elemento é posicionado em relação à janela do navegador, em vez de qualquer elemento contêiner. Um elemento com position: fixed; permanecerá na mesma posição mesmo se a página for rolada. Isso é frequentemente usado para criar cabeçalhos, rodapés ou menus de navegação fixos.

.fixed {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

O posicionamento aderente é uma combinação de posicionamento relativo e fixo. Um elemento com position: sticky; age como um elemento posicionado relativamente até atingir um deslocamento específico em relação à viewport, momento em que ele "gruda" no lugar como um elemento fixo. Isso é útil para criar elementos que ficam no topo da tela quando o usuário rola além de um certo ponto.

.sticky {
  position: sticky;
  top: 20px;
}

Ao usar as diferentes técnicas de posicionamento, você pode criar layouts complexos e posicionar elementos com precisão em sua página web. É importante entender como cada tipo de posicionamento funciona e como afeta o fluxo do documento para escolher o método mais apropriado para seu caso de uso específico.

Floats

Floats eram um dos principais métodos para criar layouts em CSS antes da introdução do Flexbox e Grid. A propriedade float permite posicionar elementos à esquerda ou direita do seu elemento contêiner, enquanto o conteúdo ao redor se ajusta em torno deles.

Para flutuar um elemento, você pode usar a propriedade float com um valor de left ou right. Quando um elemento é flutuado, ele é removido do fluxo normal do documento, e o conteúdo ao redor flui ao seu redor.

.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

No exemplo acima, o elemento .float-left será posicionado à esquerda de seu contêiner, e o elemento .float-right será posicionado à direita. As propriedades margin-right e margin-left adicionam algum espaço entre os elementos flutuantes e o conteúdo ao redor.

Ao usar floats, é importante limpá-los corretamente para evitar problemas de layout. Se um elemento contêiner tiver apenas filhos flutuantes, sua altura será reduzida a zero, já que os elementos flutuantes são removidos do fluxo normal do documento. Para corrigir isso, você pode usar a propriedade clear em um elemento após os elementos flutuantes para redefinir o fluxo.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

A classe .clearfix é aplicada ao elemento contêiner. O pseudo-elemento ::after é usado para adicionar um espaço vazio após o conteúdo do contêiner, e a propriedade clear: both; é aplicada para redefinir o fluxo e fazer com que a altura do contêiner se expanda para envolver os elementos flutuantes.

Embora os floats tenham sido amplamente usados no passado, eles apresentam alguns desafios e limitações:

Devido a esses desafios, técnicas modernas de layout como Flexbox e Grid se tornaram mais populares nos últimos anos. Elas oferecem mais flexibilidade, melhores capacidades de alinhamento e responsividade mais fácil em comparação com layouts baseados em float.

No entanto, entender como os floats funcionam ainda é importante para manter sites mais antigos e trabalhar com código legado que depende de layouts baseados em float.

Flexbox

Flexbox, abreviação de Flexible Box Layout, é um poderoso sistema de layout CSS que permite criar designs flexíveis e responsivos. Ele oferece uma maneira de organizar, alinhar e distribuir espaço entre elementos dentro de um contêiner, mesmo quando seu tamanho é desconhecido ou dinâmico.

A ideia principal por trás do Flexbox é o conceito de contêiner flex e itens flex. Um contêiner flex é um elemento que tem display: flex; aplicado a ele, e seus filhos diretos automaticamente se tornam itens flex. Ao definir display: flex;, você cria um novo contexto de formatação flex para o contêiner e seus itens.

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex;
}

O Flexbox introduz o conceito de eixo principal e eixo transversal. O eixo principal é o eixo primário ao longo do qual os itens flex são dispostos, e pode ser horizontal (padrão) ou vertical. O eixo transversal é perpendicular ao eixo principal. Você pode controlar a direção do eixo principal usando a propriedade flex-direction, que pode ter valores como row (padrão), row-reverse, column ou column-reverse.

Uma das características principais do Flexbox é a capacidade de justificar e alinhar o conteúdo dentro do contêiner flex. A propriedade justify-content controla o alinhamento e a distribuição dos itens flex ao longo do eixo principal, enquanto a propriedade align-items controla o alinhamento ao longo do eixo transversal.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

No exemplo acima, justify-content: space-between; distribui os itens flex uniformemente ao longo do eixo principal, com o primeiro item no início e o último item no final. A propriedade align-items: center; centraliza os itens flex verticalmente ao longo do eixo transversal.

O Flexbox também fornece propriedades para controlar a ordenação e o dimensionamento dos itens flex. A propriedade order permite alterar a ordem visual dos itens flex sem mudar a estrutura HTML. As propriedades flex-grow, flex-shrink e flex-basis permitem controlar como os itens flex crescem, encolhem e definem seu tamanho inicial dentro do contêiner flex.

.flex-item:first-child {
  order: 2;
}

.flex-item:nth-child(2) {
  flex-grow: 2;
}

Neste exemplo, o primeiro item flex é visualmente movido para o final usando order: 2;, e o segundo item flex é configurado para crescer duas vezes mais que os outros itens usando flex-grow: 2;.

O Flexbox é uma ferramenta versátil para criar layouts flexíveis e responsivos. Ele simplifica muitas tarefas comuns de layout, como centralização vertical e horizontal, colunas de altura igual e redimensionamento dinâmico de elementos. Ao usar o Flexbox, você pode criar layouts mais adaptáveis e fáceis de manter que funcionam bem em diferentes tamanhos de tela e dispositivos.

Grade CSS

O Grade CSS é um sistema de layout bidimensional que permite criar designs complexos e responsivos baseados em grade. Ele oferece uma maneira de definir linhas e colunas dentro de um contêiner de grade e controlar o posicionamento e o dimensionamento dos itens da grade.

Para criar um layout de grade, você define a propriedade display de um elemento contêiner como grid ou inline-grid. O contêiner se torna um contêiner de grade, e seus filhos diretos automaticamente se tornam itens da grade.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
}

Depois de ter um contêiner de grade, você pode definir as linhas e colunas usando as propriedades grid-template-rows e grid-template-columns. Essas propriedades aceitam uma lista de valores separados por espaço que representam o tamanho de cada linha ou coluna. Você pode usar tamanhos fixos (por exemplo, pixels), tamanhos flexíveis (por exemplo, porcentagens ou unidades fr), ou uma combinação de ambos.

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr 1fr;
}

Este código define um contêiner de grade com duas linhas com alturas de 100 pixels e 200 pixels. Ele também tem três colunas, onde a primeira e a terceira colunas ocupam uma unidade de fração do espaço disponível, e a segunda coluna ocupa duas unidades de fração.

Para posicionar itens da grade dentro das linhas e colunas definidas, você pode usar as propriedades grid-row e grid-column. Essas propriedades permitem especificar as linhas inicial e final de um item da grade usando números de linha ou linhas nomeadas.

.grid-item:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.grid-item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

O primeiro item da grade se estende da linha 1 à linha 3 e da coluna 1 à coluna 2. O segundo item da grade se estende da linha 1 à linha 2 e da coluna 2 à coluna 4.

O Grade CSS também introduz o conceito de áreas de template de grade, que permite definir áreas nomeadas dentro da grade e atribuir itens da grade a essas áreas usando a propriedade grid-area. Isso pode tornar seu código mais legível e fácil de manter.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

O contêiner de grade define áreas nomeadas usando a propriedade grid-template-areas. Cada string representa uma linha, e cada palavra dentro da string representa uma área nomeada. Os itens da grade são então atribuídos a essas áreas usando a propriedade grid-area.

Uma das principais vantagens do Grade CSS é sua capacidade de criar layouts responsivos facilmente. Usando media queries e ajustando as linhas, colunas e áreas do template de grade, você pode adaptar seu layout de grade a diferentes tamanhos de tela e dispositivos.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

A função repeat() é usada com a palavra-chave auto-fit para criar um layout de grade responsivo. A função minmax() especifica um tamanho mínimo e máximo para as colunas, permitindo que elas se ajustem automaticamente ao espaço disponível. A propriedade gap adiciona espaçamento entre os itens da grade.

Design Responsivo

O design responsivo é uma abordagem de design web que visa criar sites que oferecem uma experiência de visualização e interação ideal em uma ampla variedade de dispositivos, desde computadores desktop até celulares. Com o uso crescente de smartphones e tablets para acessar a web, é importante garantir que seu site se adapte e pareça ótimo em qualquer tamanho de tela. O design responsivo se baseia em várias técnicas principais, incluindo media queries, layouts fluidos, imagens responsivas e tipografia responsiva.

As media queries são uma ferramenta fundamental no design responsivo. Elas permitem que você aplique diferentes estilos ao seu site com base nas características do dispositivo, como largura da tela, altura, orientação ou resolução. Ao usar media queries, você pode criar pontos de quebra que definem diferentes layouts para diferentes tamanhos de tela.

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Quando a largura da tela for 768 pixels ou menos, o elemento .container terá uma largura de 100% e um preenchimento de 10 pixels. Isso permite que você ajuste o layout e o estilo do seu site para telas menores, como tablets ou celulares.

Os layouts fluidos são outro aspecto fundamental do design responsivo. Em vez de usar valores fixos em pixels para larguras e alturas, os layouts fluidos usam unidades relativas como porcentagens ou unidades em. Isso permite que o layout se adapte e redimensione proporcionalmente com base no tamanho da tela.

.container {
  width: 80%;
  margin: 0 auto;
}

O elemento .container tem uma largura de 80% do seu elemento pai, e margin: 0 auto; o centraliza horizontalmente. À medida que o tamanho da tela muda, o contêiner será redimensionado proporcionalmente, mantendo sua largura relativa.

As imagens responsivas são importantes para otimizar o desempenho e a experiência do usuário do seu site em diferentes dispositivos. Usando técnicas como o atributo srcset ou o elemento <picture>, você pode fornecer diferentes tamanhos e resoluções de imagem com base nas capacidades do dispositivo.

<img src="image.jpg" srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w" alt="Imagem Responsiva">

O atributo srcset especifica várias fontes de imagem e suas larguras correspondentes. O navegador escolherá a imagem mais apropriada com base no tamanho e na resolução da tela do dispositivo, reduzindo a quantidade de dados transferidos e melhorando os tempos de carregamento.

A tipografia responsiva garante que seu texto permaneça legível e bem proporcionado em diferentes tamanhos de tela. Ao usar unidades relativas como em ou rem para tamanhos de fonte e alturas de linha, você pode criar uma tipografia que escala proporcionalmente com o tamanho da tela.

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

O tamanho base da fonte é definido como 16 pixels para telas maiores, mas é reduzido para 14 pixels quando a largura da tela é de 768 pixels ou menos. Isso ajuda a manter a legibilidade em telas menores, mantendo as proporções gerais da tipografia consistentes.

Combinando media queries, layouts fluidos, imagens responsivas e tipografia responsiva, você pode criar sites que se adaptam perfeitamente a diferentes dispositivos e tamanhos de tela. O design responsivo não apenas melhora a experiência do usuário, mas também torna seu site mais acessível e preparado para o futuro, à medida que novos dispositivos e tamanhos de tela surgem.