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
block
– Elementy blokowe zajmują całą dostępną szerokość i są wyświetlane jeden pod drugim.inline
– Elementy te nie rozpoczynają nowej linii i wyświetlane są jeden obok drugiego.inline-block
– Kombinacja zachowańblock
iinline
; elementy mogą być ułożone w linii, ale nadal zachowują blokowe właściwości, takie jak szerokość i wysokość.none
– Element jest całkowicie usunięty z układu strony, jakby nigdy nie istniał.flex
– Umożliwia elastyczne układanie elementów w kontenerze.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ówinline
. - Elementy inline-block:
display: inline-block;
łączy właściwościblock
iinline
, 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.