Recapitulação – O que é CSS?

• CSS, ou Folhas de Estilo de Cascata, é uma linguagem de estilo utilizada para controlar a apresentação visual de documentos HTML.
• Permite ajustar cores, fontes, espaçamentos e layouts para criar páginas web atraentes e responsivas

A Propriedade Display em CSS

• A propriedade display define como um elemento HTML é exibido.
• Afeta o modelo de formatação do elemento, determinando o tipo de caixa que ele gera.

Sintaxe:

display: value;

Valores Comuns da Propriedade Display:

• Block: Renderiza elementos na tela um abaixo do outro. Muito utilizado quando se quer criar um bloco full-width.
• Inline: Renderiza elementos um ao lado do outro(linha). Pouco utilizado, visto que para os elementos que utilizamos essa renderização já são setados por default através do navegador.
• Inline-block: Renderiza elementos que podem se apresentar tanto como em linha quanto em bloco. Tudo dependerá da largura disponível que este elemento será apresentado. Muito utilizado para conteúdos de lista e links de menu, visto sua facilidade de adaptação.
• None: Remove completamente o elemento da renderização, tornando-o invisível.
• flex: Renderiza todos os elementos filhos a este como um elemento flex-item. Este tipo de posicionamento é importantíssimo para quando precisamos posicionar elementos dentro de um bloco pai, garantido flexibilidade de posicionamento desses elementos verticalmente e horizontalmente

Position

• Para esta propriedade devemos pensar na nossa tela como um plano cartesiano, no qual os pontos X e Y são o lado esquerdo ao topo de cada elemento da página.

O Propósito de Position em CSS

• A propriedade position é essencial para controlar o posicionamento dos elementos na página.
• Determina como um elemento é posicionado em relação ao seu container pai ou à própria página.

Valores da Propriedade Position

• Static: É o valo padrão. Os elementos são exibidos na ordem normal do documento.
• Relative: Posiciona o elemento em relação à sua posição original
• Absolute: Remove o elemento do fluxo normal e o posiciona em relação ao container pai.
• Fixed: Posiciona o elemento em relação à janela de visualização. Mantém-se fixo mesmo quando a página é rolada.
• Sticky: Um elemento com posição sticky é posicionado com base na posição do usuário na página. É tratado como relative até que atinja um determinado ponto de rolagem, momento em que se torna fixed

Diferença entre Display e Position

• display – define como um elemento HTML deve ser exibido.
• position – determina o método de posicionamento de um elemento em relação ao seu container pai ou à própria página.

Fecho de módulo