Demonstração de Propriedades CSS Display apostila de CSS pág. 91

Este projeto foi criado para demonstrar o comportamento de diferentes valores da propriedade CSS display. Ele contém exemplos visuais para cada valor de display, como inline, block, flex, grid, entre outros. O objetivo é fornecer uma compreensão clara de como os elementos se organizam na página com base no valor display aplicado.

Estrutura do Projeto

O projeto consiste em um arquivo HTML e um arquivo CSS:

• index.html: Contém a estrutura da página e os exemplos de diferentes tipos de display.
• style.css: Define os estilos visuais e o comportamento de layout de cada exemplo.

Valores de Display Demonstrados

O projeto cobre os seguintes valores de display:

• inline: Os elementos aparecem um ao lado do outro, na mesma linha.
• block: Cada elemento ocupa toda a linha e começa uma nova linha.
• inline-block: Elementos ocupam uma linha, mas respeitam a largura e altura definidas.
• flex: Elementos são organizados em uma linha ou coluna flexível.
• inline-flex: Um contêiner flexível que se comporta como inline.
• grid: Organiza elementos em uma grade de linhas e colunas.
• inline-grid: Um contêiner de grid que se comporta como inline.

Como Executar o Projeto

1. Clone o repositório:

   git clone https://github.com/seu-usuario/seu-repositorio.git

2. Abra o arquivo index.html em um navegador (Live Server recomendado):

   Navegue até o diretório do projeto e abra o arquivo index.html no navegador de sua escolha para visualizar os exemplos. Caso deseje alterar o documento para entender melhor, recomendo usar a extensão Live Server para ver as alterações em tempo real.

Estrutura de Pastas

├── index.html    # Arquivo HTML principal com exemplos
├── style.css     # Arquivo CSS com os estilos e displays
└── README.md     # Instruções do projeto