Struktura Witryny: Metoda Display: Inline-block - Tworzenie Stron
Có thể bạn quan tâm
Atrybut CSS display:inline-block wstawiamy do każdego bloku, który ma być wyświetlony w linii – oto cała filozofia tego rozwiązania. Nie zachodzi tutaj w ogóle potrzeba stosowania zapisu clear:both, gdyż nie "wyrywamy" bloków z domyślnego flow witryny:
Niestety w metodzie tej występują problemy z występowaniem znaków białych (odstępów poziomych) pomiędzy blokami ustawionymi w linii. Niewielkie pionowe odstępy (choć występują) nie stanowią tak wielkiego problemu jak "spacje" poziome.
Zalety podejścia display:inline-block
- Nie występuje potrzeba czyszczenia float:left z użyciem clear:both w dodatkowym elemencie blokowym.
- Bloki z ustawionym inline-blockiem "słuchają" ustawienia text-align:center kontenera, w którym się znajdują.
- Metoda nowsza, pomyślana jako alternatywa do "wyrywającego" bloki z flow witryny opływania float.
Wady podejścia display:inline-block
- Metoda nie działa poprawnie w IE 6/7 (słabsza kompatybilność wsteczna).
- Problemy z występowaniem znaków białych (odstępów pomiędzy blokami) – w zależności od zastosowanej metody poradzenia sobie z tym problemem, wystąpią odmienne "skutki uboczne".
Metody rozwiązania problemu znaków białych
- Usunięcie znaków białych w kodzie HTML (tracimy "wcięcia" = gorsza czytelność kodu);
- Ustawienie negatywnych marginesów -4px.
- Ustawienie font-size:0 kontenera oraz dodatniego font-size blokom wewnątrz (rodzi problemy z ustawianiem wielkości czcionek z użyciem em oraz %).
- Zmniejszenie szerokości bloków, tak aby uwzględnić istniejące odstępy.
- Pominięcie zamykających tagów (wygląda ohydnie w kodzie).
- stosowanie komentarzy w HTML <!-- --> tak, aby "symulowały" one znaki końca linii.
Zestawienie metod można jeszcze samodzielnie poszerzyć googlując np. frazę: display inline block remove space between divs. W mojej osobistej opinii, najlepszą metodą rozwiązania problemu znaków białych jest zwyczajne usunięcie ich z kodu HTML (spomiędzy divów ustawionych w linii), albo takie zaplanowanie layoutu, aby tego typu odstępy mogły wystąpić.
Aby zobaczyć układanie bloków metodą display:inline-block w tutorialu video, wystarczy przepracować następujący fragment w tym filmie.
Flexbox
To nowy, alternatywny sposób tworzenia struktury witryny, który być może stanie się w przyszłości pełnoprawnym standardem W3C. Aktualnie problemem (jak w przypadku wielu nowych rozwiązań) jest słaba kompatybilność wsteczna takiej struktury. Jednak stosowanie kontenerów zawierających zapisy display:flex oraz display:inline-flex wydaje się być na tyle ciekawym rozwiązaniem problemu tworzenia siatki bloków, iż warto już teraz przyjrzeć mu się bliżej. Zachęcam do wykonania samodzielnego researchu w sieci, zaś na sam początek warto zajrzeć tutaj.
Poprzedni wpis
Następny wpis
Từ khóa » Html Block Tekstu
-
HTML Text Formatting - W3Schools
-
Blok Grupujący - Formatowanie Treści - Kurs HTML - WebRef
-
Blok
- Tekst - Kurs HTML Dla ZielonychBlok Tekstu Szablon HTML - Nicepage
Blok HTML
Kurs Języka HTML - Poradnik Webmastera: Formatowanie Bloków
CSS: środkowanie - W3C
Kurs Języka HTML: Elementy Blokowe
Markdown Text 101 (Chat Formatting: Bold, Italic, Underline) – Discord
Formatowanie Tekstu - Pomoc
Zmiana Postaci Tekstu , , | HTML - Pasja Informatyki
Formatting Code In Notepad++ - Html - Stack Overflow
Blok Treści CMS - Dowolny Tekst Z HTML
Text-transform - CSS: Kaskadowe Arkusze Stylów - MDN Web Docs
Copyright © 2022 | Thiết Kế Truyền Hình Cáp Sông Thu