Display

Właściwość display w CSS jest jedną z najważniejszych właściwości, służącą do kontrolowania układu elementów na stronie internetowej. Pozwala określić, czy element ma być wyświetlany, oraz jak ma być wyświetlany w kontekście układu strony. Istnieje wiele wartości, które można przypisać właściwości display, każda z nich ma unikalny wpływ na sposób, w jaki element jest traktowany przez przeglądarkę.

Przykłady wartości display

  1. block – Elementy blokowe zajmują całą dostępną szerokość i są wyświetlane jeden pod drugim.
  2. inline – Elementy te nie rozpoczynają nowej linii i wyświetlane są jeden obok drugiego.
  3. inline-block – Kombinacja zachowań block i inline; elementy mogą być ułożone w linii, ale nadal zachowują blokowe właściwości, takie jak szerokość i wysokość.
  4. none – Element jest całkowicie usunięty z układu strony, jakby nigdy nie istniał.
  5. flex – Umożliwia elastyczne układanie elementów w kontenerze.
  6. grid – Umożliwia tworzenie zaawansowanych układów siatkowych.

Kompletny przykład kodu

Poniższy przykład demonstruje użycie różnych wartości właściwości display:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady właściwości display w CSS3</title>
    <style>
        .block {
            display: block; /* Tworzy blok, który zajmuje całą dostępną szerokość */
            background-color: lightcoral;
            margin: 10px 0;
            text-align: center;
        }
        .inline {
            display: inline; /* Elementy są wyświetlane w linii */
            background-color: lightgreen;
            margin: 10px;
        }
        .inline-block {
            display: inline-block; /* Kombinuje zachowania blokowe i liniowe */
            background-color: lightblue;
            margin: 10px;
            width: 100px; /* Umożliwia ustawienie szerokości i wysokości */
            text-align: center;
        }
        .none {
            display: none; /* Element nie jest wyświetlany na stronie */
        }
        .flex-container {
            display: flex; /* Umożliwia elastyczne układanie elementów */
            justify-content: space-around; /* Rozkłada elementy równomiernie */
            align-items: center; /* Centruje elementy pionowo */
            background-color: lightgrey;
            padding: 20px;
        }
        .grid-container {
            display: grid; /* Umożliwia tworzenie układów siatkowych */
            grid-template-columns: repeat(3, 1fr); /* Tworzy trzy kolumny o równej szerokości */
            gap: 10px; /* Ustawia odstępy między elementami siatki */
            background-color: lightyellow;
            padding: 20px;
        }
        .grid-item {
            text-align: center;
            padding: 20px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="block">Element blokowy</div>
    <span class="inline">Element</span><span class="inline">inline</span>
    <div class="inline-block">Inline-block</div>
    <div class="none">Ten element jest niewidoczny</div>

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

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

</body>
</html>

Opis przykładu

  • Element blokowy: display: block; sprawia, że element zajmuje całą dostępną szerokość, tworząc “blok” na stronie. Elementy blokowe zawsze zaczynają się od nowej linii.
  • Elementy inline: display: inline; powoduje, że elementy są wyświetlane jeden za drugim w linii, bez rozpoczynania nowej linii. Szerokość i wysokość nie mogą być przypisane do elementów inline.
  • Elementy inline-block: display: inline-block; łączy właściwości block i inline, pozwalając na ustawienie szerokości i wysokości elementu, jednocześnie wyświetlając go w linii z innymi elementami.
  • Elementy niewidoczne: display: none; całkowicie usuwa element z układu strony, sprawiając, że nie zajmuje on miejsca i nie jest widoczny.
  • Kontenery Flex: display: flex; pozwala na elastyczne układanie elementów wewnątrz kontenera, z możliwością łatwego centrowania i ustalania odstępów między elementami.
  • Kontenery Grid: display: grid; umożliwia tworzenie zaawansowanych układów siatkowych z określeniem liczby kolumn, wierszy i odstępów między elementami siatki.

Podsumowanie

Właściwość display w CSS3 jest niezwykle potężnym narzędziem, które pozwala deweloperom na kontrolowanie układu elementów na stronach internetowych. Poznając różne wartości display, możemy tworzyć złożone układy strony, zarówno dla prostych stron internetowych, jak i zaawansowanych interfejsów użytkownika. Kluczowe jest eksperymentowanie z różnymi wartościami display, aby zrozumieć, jak każda z nich wpływa na elementy strony i jak najlepiej wykorzystać te właściwości do realizacji zamierzonych efektów układu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top