Propriedades de Display CSS: Guia Completo para Layout e Visibilidade

Introdução

Neste laboratório, os alunos explorarão as propriedades fundamentais de exibição (display) do CSS que controlam o layout e a visibilidade dos elementos web. Através de uma série de exercícios práticos, os participantes aprenderão a manipular as propriedades de exibição block, inline, inline-block e none, adquirindo habilidades práticas na estruturação e gerenciamento de layouts de páginas web. O laboratório cobre conceitos-chave, como a compreensão de como diferentes propriedades de exibição afetam o posicionamento dos elementos, a criação de menus de navegação e o controle da visibilidade dos elementos, fornecendo uma introdução abrangente às técnicas de layout CSS.

Ao trabalhar com exemplos práticos e demonstrações de código, os alunos desenvolverão uma sólida compreensão de como as propriedades de exibição impactam o design web, permitindo-lhes criar layouts de páginas web mais flexíveis e responsivos. A abordagem passo a passo permite que os alunos construam progressivamente seu conhecimento, começando pelas características básicas dos elementos de nível de bloco (block-level) até implementações mais avançadas das propriedades de exibição.

Entenda a Propriedade de Display Block

Nesta etapa, você aprenderá sobre a propriedade de exibição block em CSS, que é um conceito fundamental para controlar o layout dos elementos web. Por padrão, muitos elementos HTML têm a propriedade de exibição de nível de bloco (block-level).

Primeiro, vamos criar um arquivo HTML para demonstrar as propriedades de exibição block. Abra o WebIDE e crie um novo arquivo chamado block-display.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

Características-chave dos elementos de nível de bloco:

Eles sempre começam em uma nova linha
Eles ocupam toda a largura disponível por padrão
Eles podem ter propriedades de largura (width), altura (height), margens (margins) e preenchimento (padding) aplicadas
Elementos block são empilhados verticalmente um após o outro

Vamos verificar o conteúdo do arquivo:

cat ~/project/block-display.html

Exemplo de saída:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
        .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

Elementos comuns de nível de bloco incluem:

<div>
<p>
<h1> a <h6>
<section>
<article>
<ul> e <ol>

Aplique a Propriedade de Display Inline

Nesta etapa, você aprenderá sobre a propriedade de exibição inline em CSS, que permite que os elementos fluam horizontalmente e ocupem apenas a largura necessária.

Vamos criar um arquivo HTML para demonstrar as propriedades de exibição inline. Abra o WebIDE e crie um novo arquivo chamado inline-display.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

Características-chave dos elementos inline:

Eles fluem horizontalmente na mesma linha
Eles ocupam apenas a largura necessária
As propriedades de largura (width) e altura (height) não funcionam
Preenchimento (padding) e margens (margins) verticais têm efeito limitado
Não é possível definir largura e altura diretamente

Vamos verificar o conteúdo do arquivo:

cat ~/project/inline-display.html

Exemplo de saída:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

Elementos inline comuns incluem:

<span>
<a>
<strong>
<em>
<img>

Implemente a Propriedade de Display Inline-Block

Nesta etapa, você aprenderá sobre a propriedade de exibição inline-block em CSS, que combina as melhores características dos elementos inline e de nível de bloco.

Vamos criar um arquivo HTML para demonstrar as propriedades de exibição inline-block. Abra o WebIDE e crie um novo arquivo chamado inline-block-display.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

Características-chave dos elementos inline-block:

Fluem horizontalmente como elementos inline
Podem ter largura (width), altura (height), preenchimento (padding) e margens (margins) como elementos de bloco
Permite controle preciso sobre o dimensionamento e espaçamento dos elementos
Útil para criar layouts horizontais, como menus de navegação ou galerias de imagens

Vamos verificar o conteúdo do arquivo:

cat ~/project/inline-block-display.html

Exemplo de saída:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
        .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

Casos de uso comuns para inline-block:

Criando menus de navegação horizontais
Projetando galerias de imagens
Alinhando elementos lado a lado com controle preciso

Use a Propriedade de Display None para Ocultar Elementos

Nesta etapa, você aprenderá sobre a propriedade display: none em CSS, que remove completamente um elemento do layout da página, tornando-o invisível e não ocupando espaço.

Vamos criar um arquivo HTML para demonstrar a propriedade de exibição none. Abra o WebIDE e crie um novo arquivo chamado none-display.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Características-chave de display: none:

Remove completamente o elemento do layout da página
O elemento não ocupa espaço
Diferente de visibility: hidden (que mantém o espaço, mas torna o elemento invisível)
Útil para ocultar conteúdo dinâmico e design responsivo

Vamos verificar o conteúdo do arquivo:

cat ~/project/none-display.html

Exemplo de saída:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
        .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

        .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

        .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Casos de uso comuns para display: none:

Ocultando elementos condicionalmente
Criando menus responsivos
Gerenciando a visibilidade de conteúdo dinâmico
Implementando interfaces de dropdown e alternância (toggle)

Nesta etapa, você criará um menu de navegação horizontal usando as propriedades de exibição aprendidas nas etapas anteriores. Este exemplo prático demonstrará como usar o display inline-block para criar um layout de navegação responsivo e limpo.

Vamos criar um arquivo HTML com um menu de navegação. Abra o WebIDE e crie um novo arquivo chamado navigation-menu.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Técnicas-chave usadas neste menu de navegação:

display: inline-block para itens do menu
Removendo a estilização padrão da lista
Adicionando efeitos de hover
Criando um layout horizontal

Vamos verificar o conteúdo do arquivo:

cat ~/project/navigation-menu.html

Exemplo de saída:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
        .nav-menu {
            background-color: #333;
            padding: 10px;
        }

        .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

        .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Melhores práticas para menus de navegação:

Use tags HTML5 semânticas como <nav>
Mantenha a estrutura do menu simples
Garanta boa legibilidade e acessibilidade
Adicione estados de hover e ativo para melhor interação do usuário

Resumo

Neste laboratório, os participantes exploraram as propriedades de exibição (display) do CSS, focando na compreensão de como diferentes valores de display afetam o layout da página web e o comportamento dos elementos. O laboratório começou examinando a propriedade de exibição block, demonstrando como elementos de nível de bloco ocupam a largura total, começam em novas linhas e podem ser estilizados com margens, preenchimentos (padding) e bordas. Os participantes aprenderam sobre elementos comuns de nível de bloco como <div>, <p> e tags de cabeçalho, e como eles naturalmente se empilham verticalmente em um documento.

As etapas subsequentes guiaram os alunos através da aplicação das propriedades de exibição inline, inline-block e none, fornecendo insights práticos sobre como controlar a renderização e a visibilidade dos elementos. Ao criar exemplos práticos e experimentar com estilos CSS, os participantes ganharam experiência prática na manipulação das características de exibição dos elementos, compreendendo, em última análise, como criar layouts de página web mais flexíveis e responsivos usando as propriedades de exibição do CSS.

Explore Propriedades de Display em CSS

Introdução

Entenda a Propriedade de Display Block

Aplique a Propriedade de Display Inline

Implemente a Propriedade de Display Inline-Block

Use a Propriedade de Display None para Ocultar Elementos

Crie um Menu de Navegação com Propriedades de Display

Resumo