Właściwość Display w CSS3

By /

Html CSS

Właściwość display w CSS3 jest jedną z najważniejszych właściwości używanych do kontrolowania układu strony internetowej. Określa, w jaki sposób element jest wyświetlany na stronie, wpływając zarówno na sam element, jak i na sposób, w jaki są rozmieszczone inne elementy wokół niego.

Podstawowe wartości właściwości display:

  • block: Element wyświetla się jako blok, zajmując całą dostępną szerokość kontenera, z nową linią przed i po elemencie.
  • inline: Element wyświetla się w linii z innymi elementami, nie zaczynając nowej linii.
  • inline-block: Kombinuje cechy block i inline, pozwalając elementom na bycie w linii, ale z zachowaniem właściwości elementu blokowego (np. ustawienie szerokości i wysokości).
  • none: Element nie jest wyświetlany i nie zajmuje miejsca w układzie strony.
  • flex: Element zachowuje się jako kontener flex, umożliwiając zaawansowane zarządzanie układem dzieci.
  • grid: Element zachowuje się jako kontener siatki, umożliwiając zaawansowane zarządzanie układem dzieci w dwuwymiarowym układzie.

Przykład użycia właściwości display

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Właściwość Display w CSS3</title>
    <style>
        .block {
            display: block;
            background-color: lightblue;
            margin: 10px 0;
            text-align: center;
        }
        
        .inline {
            display: inline;
            background-color: lightgreen;
            margin: 10px;
        }
        
        .inline-block {
            display: inline-block;
            background-color: lightcoral;
            margin: 10px;
            width: 100px;
        }
        
        .none {
            display: none;
        }
        
        .flex-container {
            display: flex;
            justify-content: space-around;
        }
        
        .flex-item {
            background-color: lavender;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="block">Block Element</div>
    <span class="inline">Inline Element 1</span>
    <span class="inline">Inline Element 2</span>
    <div class="inline-block">Inline-Block Element</div>
    <div class="none">Element z Display None</div>
    
    <div class="flex-container">
        <div class="flex-item">Flex Item 1</div>
        <div class="flex-item">Flex Item 2</div>
    </div>
</body>
</html>

Podsumowanie

Właściwość display w CSS3 jest niezwykle potężnym narzędziem w rękach deweloperów i projektantów stron internetowych, umożliwiającym precyzyjne sterowanie układem strony. Zrozumienie różnych wartości display i ich zastosowań pozwala na tworzenie responsywnych i atrakcyjnych layoutów, dostosowanych do potrzeb użytkowników. Szczególnie wartości flex i grid otwierają nowe możliwości w projektowaniu zaawansowanych, dynamicznych układów strony.

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

Powiązane artykuły

Scroll to Top