Model blokowy (ang. box model) definiuje rozmieszczenie elementów na stronie i ich wzajemną interakcję. Niezależnie od tego, jak element wizualnie wygląda na stronie, jest on przede wszystkim prostokątnym kontenerem. Ten kontener ma 4 obszary: zawartość lub treść elementu (wewnątrz), margines wewnętrzny (padding), obramowanie (border) i margines zewnętrzny (margin).
Obszar treści (content) — to treść elementu, taka jak tekst, obrazy, filmy lub elementy zagnieżdżone. Domyślnie wysokość (height) obszaru zawartości jest określana przez treść (content), a szerokość (width) jest określana przez typ elementu (blokowy lub liniowy)
Margines wewnętrzny (padding) — to odległość między treścią elementu a jego obramowaniem (border). Jest on używany do efektów dekoracyjnych. Nie można określić wartości ujemnych.
Obramowanie (border) — to krawędź elementu. Domyślnie jego szerokość wynosi zero. Jeśli kolor obramowania nie jest ustawiony, przyjmuje ono kolor głównej zawartości, np. tekstu.
Margines zewnętrzny (margin) — dodaje odstęp z zewnątrz elementu, od zewnętrznej krawędzi (obramowania) do sąsiednich elementów, oddzielając je w ten sposób na stronie. Dla marginesu zewnętrznego można określić wartość ujemną. Element tła nie ma zastosowania do marginesu zewnętrznego.
1.2 Właściwości obszarów kontenera w modelu blokowym
Przyjrzyjmy się, jak ustawić marginesy i obramowania.
Właściwość border dodaje obramowanie;
Właściwość padding ustawia wewnętrzne marginesy;
Właściwość margin ustawia zewnętrzne marginesy.
Geometria elementu ma 4 boki: górny (top), prawy (right), dolny (bottom) i lewy (left). Dlatego marginesy wewnętrzne, obramowania i marginesy zewnętrzne mogą być różne i ustawione dla każdej strony osobno lub mieć te same wartości dla każdej strony.
<p class="text_1-2">
This is the content of an element, such as text, image, video, or nested elements. By default, the
height of the content area is determined by the content, and the width is determined by the element type.
</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
W narzędziach deweloperskich zakładka Elements > Computed pokazuje geometrię wybranego elementu.
1.3 Właściwość box-sizing
Właściwość box-sizing definiuje typ modelu blokowego elementu — wzór (algorytm) obliczania jego wymiarów.
box-sizing: content-box | border-box | inherit
content-box — właściwości width i height ustawiają szerokość i wysokość obszaru zawartości i nie obejmują wymiarów marginesów wewnętrznych (padding), obramowań (border) i marginesów zewnętrznych (margin). Są to wartości domyślne.
border-box — właściwości width i height ustawiają ostateczny rozmiar elementu i obejmują wartości marginesów wewnętrznych (padding), obramowań (border), ale nie marginesów zewnętrznych (margin).
inherit — dziedziczy wartość modelu blokowego elementu nadrzędnego.
Marginesy zewnętrzne (margin) nie są brane pod uwagę przy obliczaniu szerokości lub wysokości elementu.
1.4 Wartość border-box
W tym modelu blokowym właściwości width i height określają ostateczne wymiary elementu, a nie jego obszarowi zawartości. Treść jest automatycznie "kompresowana", dzięki czemu padding i border nadal mieszczą się w kontenerze.
Wzory do obliczania ostatecznej szerokości i wysokości bloku z wartością border-box.
Szerokość = width
Wysokość = height
Jeśli ustawisz właściwość box-sizing na border-box, zmieni się typ modelu blokowego bieżącego elementu.
W narzędziach deweloperskich zakładka Elements > Computed pokazuje geometrię tego elementu.
W nowoczesnych projektach wartość border-box jest uważana za standard dla modelu blokowego. Aby nie ustawiać właściwości box-sizing dla każdego elementu osobno, na początku arkusza stylów używany jest następujący kod CSS:
Używając uniwersalnego selektora * (wybiera wszystkie elementy), wartość border-box jest ustawiana dla wszystkich elementów oraz pseudoelementów ::before i ::after dokumentu (dowiesz się o nich później).
Normalizator modern-normalize ma domyślnie ustawione globalne border-box, więc jeśli jest połączony z projektem, można pominąć box-sizing w swoich stylach.
2.1 Geometria elementu
2.2 Właściwość padding
Właściwość padding — to właściwość, która kontroluje wewnętrzne marginesy między treścią a obramowaniem dla wszystkich boków elementu: górnego (top), prawego (right), dolnego (bottom) i lewego (left). Wartości komponentów tej właściwości są ustawiane w tej właśnie kolejności w kierunku zgodnym z ruchem wskazówek zegara, zaczynając od góry.
Wynik zależy od liczby wartości właściwości.
/* Jednakowe marginesy 20px ze wszystkich stron */
padding: 20px;
/* Górny i dolny margines 10px, lewy i prawy margines 20px */
padding: 10px 20px;
/* Górny margines 10px, lewy i prawy margines 20px, dolny margines 5px */
padding: 10px 20px 5px;
/* Górny margines 10px, prawy margines 15px, dolny margines 20px, lewy margines 25px */
padding: 10px 15px 20px 25px;
Marginesy wewnętrzne są używane do efektów dekoracyjnych. Na przykład, aby utworzyć wolną przestrzeń między obramowaniem elementu a jego treścią, jak w poniższym przykładzie. Jeśli nie ustawisz marginesu, tekst będzie dotykał obramowania akapitu.
Nawet jeśli właściwości obramowania nie są jawnie określone, ono nadal istnieje. Domyślnie jego szerokość wynosi 0 i służy do budowania geometrii elementu, więc zawsze możesz ustawić margines wewnętrzny między obramowaniem a zawartością.
2.3 Właściwość margin
Właściwość komponentu margin kontroluje zewnętrzne marginesy od obramowania do sąsiednich elementów dla wszystkich stron elementu. Wynik zależy od tego, ile wartości właściwości zostało określonych.
/* Jednakowe marginesy 20px ze wszystkich stron */
margin: 20px;
/* Odstępy u góry i u dołu 10px, od lewej i prawej 20px */
margin: 10px 20px;
/* Odstępy u góry 10px, po lewej i prawej 20px, u dołu 5px */
margin: 10px 20px 5px;
/* Odstępy u góry 10px, po prawej 15px, u dołu 20px, po lewej 25px */
margin: 10px 15px 20px 25px;
Marginesy zewnętrzne służą do tworzenia przestrzeni między dwoma sąsiadującymi elementami.
<div class="post_2-3">
<div class="post-thumb_2-3">
<img class="post-image_2-3" src="https://cdn.pixabay.com/photo/2017/11/09/21/41/cat-2934720_1280.jpg"
alt="Tabby cat in a funny sitting position">
</div>
<h1 class="post-heading_2-3">All about cats</h1>
<p class="post-text_2-3">
Lorem ipsum dolor sit, amet consectetur elit omnis adipisicing. Omnis voluptatibus sit
reprehenderit iure est eveniet saepe fugit debitis laborum odio voluptatem repellat eaque voluptatum quos neque
optio, perspiciatis aperiam error odit praesentium consequatur totam maiores. Minus similique molestias,
eveniet delectus eaque dignissimos! Id deserunt magni doloremque, corrupti consectetur vero veniam!
</p>
</div>
Lorem ipsum dolor sit, amet consectetur elit omnis adipisicing. Omnis voluptatibus sit reprehenderit iure est eveniet saepe fugit debitis laborum odio voluptatem repellat eaque voluptatum quos neque optio, perspiciatis aperiam error odit praesentium consequatur totam maiores. Minus similique molestias, eveniet delectus eaque dignissimos! Id deserunt magni doloremque, corrupti consectetur vero veniam!
2.4 Padding czy margin?
Jeżeli do tworzenia odstępów użyjesz padding, elementy będą ściśle przylegać do siebie ramkami bez odstępów. Jeśli element nie ma obramowania lub koloru tła, nie można wizualnie określić, czy odstępy są prawidłowe i trzeba otworzyć narzędzia deweloperskie.
Bardzo ważne jest, aby nie mylić padding i margin. Różnica polega na tym, że właściwość padding oddziela zawartość od obramowania elementu, właściwość margin tworzy odstępy pomiędzy sąsiadującymi elementami.
WSKAZÓWKA Jeśli masz trudności z zapamiętaniem, gdzie użyć padding, a gdzie margin, podczas procesu tworzenia układu ustaw kolor tła dla wszystkich elementów, gdyż ma on zastosowanie tylko do marginesów wewnętrznych (padding) i obramowania (border), ale nie do marginesów zewnętrznych (margin). Będzie to wizualnie bardziej zrozumiałe. Po zakończeniu tworzenia układu usuń właściwości pomocnicze koloru tła z reguł CSS.
2.5 Globalny reset stylów
Często wartości margin i padding z arkusza stylów przeglądarki nie pasują do projektu, a niektóre z nich są w ogóle niepotrzebne. Na przykład, nagłówki i akapity zazwyczaj potrzebują tylko dolnego lub górnego marginesu zewnętrznego, a domyślnie są ustawione oba.
W listach standardowe padding i margin zazwyczaj nie są potrzebne. Tak, jeśli usuniesz standardowy padding, znaczniki listy znikną, ale w większości przypadków nie są one potrzebne z założenia i resetujemy je za pomocą właściwości list-style-type.
Podczas pisania stylów trzeba będzie dodać dla tych elementów wartości resetujące lub nadpisujące w każdej regule CSS.
Jak rozwiązać ten problem? Możesz wynieść zerowanie wartości domyślnych arkusza stylów przeglądarki do stylów globalnych za pomocą selektora znaczników. Zmniejszy to liczbę powtórzeń kodu z zerowaniem wartości. Następnie musisz tylko określić w regułach wartości z projektu, bez kodu resetującego niepotrzebne wartości.
Po zmianie wartości w regułach wszystko będzie działać dzięki mechanizmowi kaskadowania stylów.
Domyślnie, w arkuszu stylów przeglądarki margin elementu body jest ustawiony na 8px ze wszystkich stron. Jest to zrobione po to, aby zawartość stron internetowych bez dodatkowego projektu nie przylegała ściśle do granic karty przeglądarki i ułatwiała czytanie tekstu.
W projektowaniu nowoczesnych stron internetowych margines ten nie jest używany, więc jest zawsze resetowany w regule z selektorem body.
Zerowanie marginesu body jest już pewnego rodzaju standardem w nowoczesnym rozwoju, więc normalizator modern-normalize zawiera ten krok. Dlatego też, jeśli używasz normalizatora na swojej stronie internetowej, nie musisz resetować marginesu zewnętrznego body w kodzie.
3.1 Właściwość border
Właściwość border kontroluje szerokość, styl i kolor obramowania elementu.
border: szerokość styl kolor;
border: 2px dashed #2196F3;
Szerokość obramowania jest określana w pikselach.
Styl jest pojedynczą wartością z zestawu możliwych wartości, najczęściej są to wartości solid, dashed i dotted
Kolor jest określany w dowolnym formacie, zwykle HEX
Istnieją również właściwości, które ustawiają wartość obramowania oddzielnie. Mogą one być używane jako alternatywa dla właściwości border lub w celu uniknięcia powielania innych właściwości podczas zmiany tylko jednej wartości obramowania.
Obramowaniu można nadać indywidualne style po każdej stronie elementu. Oczywiście element z wielokolorowym obramowaniem i wieloma stylami nie jest standardową praktyką. Zazwyczaj nie robi się tego w ten sposób.
Z kolei ustawienie obramowania tylko po jednej stronie elementu jest dokładnie tym przypadkiem, w którym te właściwości mogą się przydać.
border-top: szerokość styl kolor;
border-right: szerokość styl kolor;
border-bottom: szerokość styl kolor;
border-left: szerokość styl kolor;
Ustawmy różne style obramowania dla każdej strony elementu:
Do zaokrąglenia wszystkich rogów obramowania służy właściwość border-radius. Wartości mogą być bezwzględne (px) lub względne (%). Jeśli ustawisz promień kwadratowego elementu na 50%, zmieni się on w okrąg.
Istnieją również właściwości, które pozwalają zaokrąglić każdy róg ramki osobno.
Jeśli obraz jest większy niż blok, będzie on wizualnie wykraczać poza granice bloku — ta cecha występuje, gdy zaokrąglisz granice obrazu. Obraz jest zawijany w thumb, który definiuje styl obramowania i promień zaokrąglenia.
<div class="thumb">
<img src="" alt="" />
</div>
Jako że obraz zawsze przepełnia blok, wizualnie wykraczając poza jego granice, nie otrzymujemy dokładnie tego, czego potrzebujemy.
Pomoże Ci w tym właściwość overflow i jej wartość hidden, która jest ustawiana dla thumb i kontroluje widoczność treści, która wykracza poza ramkę. Kolor i rozmiar ramki w przykładzie są ustawione dla wizualizacji, ustawianie innych wartości niż promień nie jest wymagane.
4.1 Właściwość overflow
Wymiary elementu są określane przez jego treść lub ustawiane jawnie. Co się stanie, gdy zawartość wewnątrz elementu ulegnie zmianie?
W pierwszym przypadku, gdy wysokość elementu nie jest jawnie ustawiona, wysokość będzie się zwiększać, aż cała zawartość zmieści się w elemencie. W drugim przypadku szerokość i wysokość są jawnie określone, więc blok nie może rosnąć, co spowoduje jego przepełnienie, czyli wyjście zawartości poza jego granice. Właściwość overflow kontroluje zachowanie zawartości elementu, jeśli jego rozmiar przekracza dozwoloną długość lub szerokość.
overflow: visible | hidden | scroll | auto
visible — domyślna wartość. Zawartość, która wykracza poza element, jest widoczna.
hidden — zawartość, która wykracza poza element, jest ukryta. xxxxxxx xxxxxxx xxxxxx xxxxxxx
scroll — zawartość, która wykracza poza element, jest przewijana.
auto — zawartość, która wykracza poza element, jest przewijana tylko wtedy, gdy jest potrzebna.
Istnieją również właściwości overflow-x i overflow-y, które kontrolują przepełnienie tylko w odpowiedniej płaszczyźnie.
Jeśli nie określisz właściwości overflow, zostanie ustawiona domyślna wartość visible, więc gdy blok zostanie przepełniony, zawartość zostanie wyświetlona poza blokiem.
Tak więc widoczna treść, która przepełnia blok, nie wpływa na geometrię sąsiednich elementów.
4.3 Właściwość overflow: hidden
Przeciwną wartością jest hidden. W tym przypadku jakakolwiek zawartość, która wykracza poza element, nie jest wyświetlana. Zachowanie to jest przydatne przy korzystaniu z efektów dekoracyjnych, które omówimy później.
Pamiętaj, że w tym przypadku nadmiarowa treść jest niedostępna i ukryta przed użytkownikiem. Dlatego nigdy nie ustawiamy stałej wysokości dla bloków tekstowych.
4.4 Właściwość overflow: scroll
Jeśli ustawiona jest opcja scroll, zawartość wypełniająca blok zostanie ukryta. Do przeglądania ukrytej zawartości pojawią się paski przewijania.
Zwróć uwagę, że wyświetlane są oba paski przewijania (poziomy i pionowy), mimo że potrzebny jest tylko jeden.
4.5 Właściwość overflow: auto
Wartość auto jest podobna do wartości scroll.
Jest jednak różnica — z wartością auto wyświetlane są tylko te scrollbary, które są naprawdę potrzebne.
5.1 Typy elementów
W arkuszu stylów przeglądarki dla każdego elementu ustawiony jest jego typ, który określa jego zachowanie.
Najpopularniejsze są elementy blokowe (block) i liniowe (inline). Ponadto istnieje również ich hybryda — liniowo-blokowe (inline-block).
Elementy liniowe - służą do wyróżniania i formatowania treści tekstowych. Na przykład przycisków z linkami, obrazów itp.
Elementy blokowe służą do oznaczania kontenerów tekstowych (nagłówki, listy, akapity) i dużych sekcji (sekcje, nagłówki, stopki).
Informacje na temat typu elementu znajdziesz w podręczniku.
Czasami potrzeba, aby element liniowy zachowywał się jak element blokowy i odwrotnie. W takim przypadku wartość właściwości display może zostać zmieniona na dowolną inną wartość.
Elementy blokowe mogą być wizualnie reprezentowane jako prostokątne obszary, które następują po sobie od góry do dołu.
Mają one właściwość display: block
Zajmują całą dostępną szerokość linii wewnątrz elementu nadrzędnego.
Ich wysokość jest określona przez zawartość, jeśli nie została wyraźnie określona we właściwości height.
Zawsze zaczynają się w nowej linii, więc kilka sąsiadujących elementów blokowych jest ułożonych pionowo jeden pod drugim.
Można ustawić dla nich dowolną właściwość geometrii elementu: szerokość, wysokość, marginesy wewnętrzne, obramowanie i marginesy zewnętrzne.
Zdecydowana większość elementów to elementy blokowe. Na przykład <h1>, <p>, <section>, <ul>, <li>, <div>, <header> itp.
Nawet jeśli szerokość elementów blokowych jest określona jawnie, elementy nadal będą pozycjonowane pionowo jeden pod drugim. Cała wolna przestrzeń w linii jest domyślnie zajmowana przez automatyczny prawy margines elementu (margin-right).
Margines zewnętrzny elementu należy przeglądać za pomocą narzędzi deweloperskich, ponieważ nie wyróżniają się one wizualnie na stronie.
5.2 Zwijanie marginesów pionowych
Pionowe marginesy zewnętrzne sąsiadujących elementów blokowych nie sumują się. Jeśli istnieją dwa elementy z różnymi wartościami właściwości margin, wybierany jest największy margin z tych dwóch. Marginesy zwijają się tylko w przypadku elementów blokowych.
Ustawmy dla górnego bloku dolny margin równy 20px, a dla dolnego bloku górny margin równy 40px.
Z powodu zwijania, odległość między nimi będzie wynosić 40px, ponieważ wybierany jest większy margines.
5.3 Wypadanie marginesów zewnętrznych pionowych
Istnieje pewien niuans, który powoduje, że wielu początkujących popełnia błędy. Polega on na tym, że ustawiają w elementach zagnieżdżonych górny margines zewnętrzny dla elementu podrzędnego i oczekują, że będzie to odstęp od obramowania elementu nadrzędnego. Tak się jednak nie dzieje.
Pionowy margines zewnętrzny zagnieżdżonego bloku wypada z bloku nadrzędnego i odsuwa oba bloki (nadrzędny i zagnieżdżony) od ich sąsiadów lub górnej części strony.
Jeśli element nadrzędny ma również górny margines zewnętrzny, stosowana jest wyższa wartość marginesu.
W przykładzie ustawiliśmy górny margines zewnętrzny 40px dla elementu div inner-box, ale w rezultacie nie spowoduje to przesunięcia samego elementu div od góry elementu outer-box, ale całego elementu div outer-box od krawędzi ekranu lub sąsiedniego elementu.
Górne i dolne marginesy zewnętrzne na styku z blokiem nadrzędnym wydają się go przebijać i wypadać. Jest to jeden z najczęstszych błędów w układzie. Twórz marginesy zewnętrzne tylko między dwoma sąsiadującymi elementami.
5.4 Element blokowy
Element blokowy może być wyśrodkowany poziomo w elemencie nadrzędnym, jeśli jego szerokość jest większa niż szerokość elementu nadrzędnego. Oznacza to, że element blokowy ma stałą szerokość. Można to zrobić za pomocą funkcji automatycznych poziomych marginesów zewnętrznych.
Domyślnie element blokowy ma automatyczny prawy margines, który zajmuje całe wolne miejsce w linii.
.box {
margin-right: auto;
}
Jeśli określisz automatyczne marginesy lewy i prawy, wolna przestrzeń zostanie między nimi rozdzielona, a element blokowy zostanie wyśrodkowany.
Obszar wyświetlania (ang. viewport) — to widoczna część strony, która jest wyświetlana na ekranie. Oczywiście obszary te różnią się na komputerze i urządzeniu mobilnym. Użytkownik może również użyć przewijania, aby zmienić widoczną część.
Niemal niemożliwe jest stworzenie projektu, który wyglądałby równie dobrze na ekranach o różnych rozmiarach, dlatego zawartość strony internetowej jest zawsze ograniczona szerokością.
Co więcej, jeśli zawartość strony internetowej jest mniejsza niż szerokość obszaru wyświetlania, wówczas cała treść będzie przylegać do jego krawędzi, a cała symetria zostanie utracona.
Kontener, wrapper, owijka
Kontener, wrapper, owijka — to nazwy standardowego elementu blokowego — kontenera, który ogranicza szerokość i wyśrodkowuje zawartość strony.
Element kontener. Znacznik div
Znacznik div jest uniwersalnym kontenerem bez znaczenia semantycznego. Jest używany jako blok owijający do grupowania i dalszego stylizowania treści.
Użyj znacznika div jeśli:
potrzebujesz tylko ogólnego kontenera do projektowania;
nie możesz nadać grupie znaczników oddzielnej nazwy, która w pełni opisuje zawartość.
<div class="container"></div>
W CSS tworzona jest klasa, zazwyczaj container, która może być przypisana do dowolnego elementu, ale w praktyce najczęściej będzie to znacznik <div>.
Kontener musi mieć następujące ustawienia:
szerokość zgodnie z layoutem;
automatyczne poziome marginesy zewnętrzne;
opcjonalne poziome marginesy wewnętrzne, również zgodnie z layoutem.
W prostszych projektach może być tylko jeden ogólny kontener, który owija całą treść strony.
Może być również kilka kontenerów, jeśli każda sekcja strony potrzebuje własnego kontenera. Dzięki takiemu podejściu możesz wygodnie ustawić różne pełnowymiarowe tła i inne style projektowania dla poszczególnych sekcji strony.
5.6 Elementy liniowe
Elementy liniowe są wizualnie rozmieszczane jeden po drugim na całej długości linii. Gdy brakuje miejsca, elementy te są przenoszone do następnej linii i wypełniają ją.
Dla elementów inline, ustawiana jest właściwość display: inline.
Ich szerokość i wysokość zależą tylko od zawartości, nie można ich ustawić jawnie. Oznacza to, że właściwości width i height nie mają żadnego wpływu.
Są one umieszczane w linii dopóki jest w niej wystarczająco dużo miejsca, po czym nowe elementy są przenoszone do następnej linii.
Można dla nich ustawić tylko geometrię poziomą: lewy i prawy marginesy zewnętrzne, marginesy wewnętrzne i obramowania. Oznacza to, że ignorują one wartości górnego i dolnego margin, padding i border.
<a class="link" href="">Link</a>
Link jest elementem liniowym. Nadajmy mu inną geometrię i zobaczmy rezultat.
Elementy inline mogą zawierać tylko tekst, zawartość multimedialną i inne elementy inline. Wyjątkiem jest element <a>, który zgodnie ze specyfikacją może zawijać akapity, listy, tabele, nagłówki i całe sekcje, pod warunkiem, że nie zawierają one innych interaktywnych elementów, takich jak linki i przyciski.
Górne i dolne marginesy wewnętrzne, a także obramowanie elementu liniowego, działają w dziwny sposób — nie zwiększają rozmiaru bloku, ale są wyświetlane wizualnie.
Element p 1
Element span 1Element span 2
Element p 2
Tak więc, w powyższym przykładzie, dwa elementy liniowe <span> znajdują się pomiędzy dwoma akapitami. Wizualnie tło wypełniło pionowe marginesy wewnętrzne i obramowanie, które nakładają się na sąsiednie wiersze akapitu i zachowują się bardzo dziwnie.
Jest to osobliwość wyświetlania przeglądarki, nie wpływają one na geometrię sąsiednich elementów i dlatego nie są wykorzystywane 🤷♂️.
5.7 Elementy liniowo-blokowe
Elementy liniowo-blokowe (inline-block) są hybrydą elementów blokowych i liniowych, która łączy w sobie najlepsze cechy obu.
Mają one właściwość display: inline-block.
Ich szerokość i wysokość zależą od zawartości, ale można jawnie ustawić właściwości width i height.
Są one umieszczane w linii dopóki jest w niej wystarczająco dużo miejsca, po czym nowe elementy są przenoszone do następnej linii.
Jest możliwość ustawienia dowolnej właściwości geometrii elementu: szerokość, wysokość, marginesy, obramowanie i odstępy.
Elementy inline-block są używane, gdy chcesz dodać efekty dekoracyjne do elementów liniowych.
Zmieniamy typ elementu za pomocą właściwości display. Teraz można ustawić pionowe marginesy wewnętrzne i inną geometrię dla linku (który domyślnie jest elementem liniowym).
Elementy liniowe i liniowo-blokowe mają przestrzeń po prawej stronie. Nie jest to margin ani padding, ale dosłownie pusta przestrzeń. Jest to osobliwość sposobu, w jaki przeglądarka układa treść liniową w wierszu.
Rozmiar tej przestrzeni jest określany przez rozmiar tekstu najbliższego elementu nadrzędnego z jawnie zdefiniowaną wartością lub jeśli nie ma takiego elementu nadrzędnego, używany jest domyślny rozmiar czcionki z przeglądarki — 16px.
Dlatego przyciski, linki, obrazy, spany i inne elementy liniowe będą miały domyślnie odstęp 4px — 1/4 rozmiaru czcionki najbliższego elementu nadrzędnego.
5.7 Elementy ukryte
Wartość display: none pozwala na całkowite ukrycie elementu, zwalniając jego miejsce dla innych. Taki element jest usuwany z przepływu dokumentu, ukrywany wizualnie i nie jest obecny w układzie strony.
Wadą tego podejścia jest to, że zmiana wartości właściwości display nie może być animowana, ale istnieją inne podejścia, z którymi zapoznamy się później.
5.8 Właściwość visibility
Wartość visibility: hidden pozwala na ukrycie elementu, ale nie zwalnia jego miejsca w przepływie dokumentu. Element jest ukryty wizualnie, ale nadal zajmuje miejsce w układzie strony.
W przeciwieństwie do display: none, visibility: hidden może być animowana.
6.1 Obraz
Jak tworzyć wizualnie atrakcyjne strony? Po pierwsze, tworzyć elastyczne obrazy, które automatycznie dostosowują się do szerokości kontenera i nie tracą na jakości. 📐🖼️ Rzecz jasna, klienci uwielbiają te obrazy.
Po drugie, bardzo ważne jest użycie właściwości, która pozwala na umieszczenie obrazu w kontenerze na różne sposoby, zachowując oryginalne proporcje lub rozciągając go. Ta funkcja jest bardzo pomocna podczas tworzenia stron z dużą liczbą obrazów, takich jak strony sklepów internetowych
6.2 Dolny odstęp elementu liniowego
Obraz jest elementem liniowym. Tak więc między dwoma obrazami lub obrazem a innym elementem liniowym będzie istniała odległość pozioma. Wiemy już o tym i wkrótce dowiemy się, jak to obejść.
Obraz jest elementem specjalnym, ponieważ oprócz prawego odstępu ma dolny odstęp elementu liniowego, który ma taki sam rozmiar jak odstęp poziomy.
W praktyce odstęp ten nigdy nie jest potrzebny i tylko przeszkadza. Usunięcie go jest bardzo proste. Po prostu uczyń obraz elementem blokowym!
Usunięcie dolnego odstępu dla całego projektu
Aby uniknąć powielania procesu zmiany typu elementu dla każdego obrazu i raz na zawsze usunąć dolny odstęp, ustawimy globalne style dla znacznika img, czyniąc go znacznikiem blokowym. To rozwiązuje problem. W praktyce, podczas pracy z obrazami, są one zawsze ustawiane jako blokowe.
img {
display: block;
}
6.3 Właściwość max-width
Przyjrzyjmy się, co robi właściwość max-width: 100%.
Domyślnie, obraz jest wyświetlany w oryginalnym rozmiarze. Tak więc, jeśli nie określisz żadnych atrybutów rozmiaru dla znacznika img, obraz będzie rozciągał się poza element nadrzędny ze stałą szerokością (patrz schemat poniżej). Dzieje się tak, gdy szerokość obrazu nie jest wyraźnie określona i zależy od szerokości elementu nadrzędnego.
Aby obraz, który nie ma wyraźnie określonej szerokości, automatycznie dostosowywał się do szerokości elementu nadrzędnego, dodaj do niego właściwość maksymalnej szerokości max-width i ustaw tę właściwość na 100%.
Wszystkie te ustawienia są wprowadzane w stylach globalnych za pomocą selektora znacznika img, aby zastosować je do wszystkich obrazów na stronie.
img {
display: block;
max-width: 100%;
}
Dzięki temu obrazy będą elastyczne, co oznacza, że dostosują się do szerokości elementu nadrzędnego, zmniejszą się lub zwiększą, ale nigdy nie będą szersze niż ich oryginalny rozmiar, dzięki czemu uda się uniknąć utraty jakości.
6.4 Właściwość object-fit
Zdarzają się sytuacje, w których obraz ma inne wymiary lub proporcje niż kontener, w którym ma zostać umieszczony.
Rozważmy typowe zadanie dla dewelopera — karty produktów. Są to zazwyczaj kontenery o stałej szerokości i wysokości, do których trzeba pięknie dopasować zdjęcia towarów o dowolnym rozmiarze, tj. dopasować obraz do kontenera.
Właściwość object-fit określa sposób, w jaki zawartość elementu img zostanie dopasowana do kontenera, gdy wymiary lub proporcje obrazu i kontenera nie pasują do siebie. Obrazy mogą być przycinane, rozciągane lub skalowane.
object-fit: fill | contain | cover | scale-down | none
fill — obraz jest skalowany bez zachowania proporcji, aby całkowicie wypełnić kontener. Wartość domyślna.
contain — obraz jest skalowany z zachowaniem proporcji, aby jak najbardziej wypełnić kontener.
cover — obraz jest skalowany z zachowaniem proporcji, aby całkowicie wypełnić kontener.
scale-down — zostanie wybrana wartość none lub contain, aby obraz miał najmniejszy możliwy rozmiar. Celem jest zmieszczenie całego obrazu bez zmiany proporcji.
none — zostaną zachowane oryginalne wymiary obrazu, określona wysokość i szerokość nie mają żadnego wpływu.
Original image
object-fit: fill
object-fit: contain
object-fit: cover
object-fit: scale-down
object-fit: none
W praktyce najbardziej użyteczną wartością jest cover, ponieważ obraz całkowicie wypełnia kontener na wysokość i szerokość, zachowując jego proporcje. W przeciwnym razie obraz jest zniekształcony lub nie wypełnia kontenera.
Umieszczanie obrazu w kontenerze o stałym rozmiarze
Aby ta technika zadziałała, musisz wykonać dwa obowiązkowe kroki.
<div class="thumb">
<img src="" alt="" />
</div>
Po pierwsze, kontenerowi należy wyraźnie nadać stałą wysokość. Szerokość może być równa szerokości elementu nadrzędnego, jak w przykładzie na żywo.
.thumb {
height: 400px;
width: 300px;
}
Po drugie, obraz musi zostać "dopasowany" do kontenera poprzez ustawienie wysokości i szerokości img na 100% i określenie object-fit.
Możesz uniknąć używania kontenera, ustawiając stałe wymiary dla samego elementu img, ale jest to najczęściej spotykany układ. Element kontenera służy do tworzenia animacji i innych efektów dekoracyjnych związanych z obszarem obrazu.
