Wyróżnianie bloków
Layout strony jest tworzony z wybranych znaczników HTML. Warto jednak poznać domyślne ustawienie znaczników, aby rozróżnić dany element HTML czy jest blokowy lub liniowy.
Element blokowy
zawartość elementów są wyświetlane zawsze na całą możliwą szerokość. Jeżeli wstawisz element “body” to domyślnie będzie on zajmował całą szerokość strony.
Element liniowy
zawartość elementów wyświetlają tylko tyle ile potrzebują miejsca i nie tworzą “dodatkowego miejsca”. Wyłącznie poszerzają swoją przestrzeń przez swoją zawartość, która determinuje ich wielkość (przede wszystkim szerokość).
Poniżej spójrz na przykład, który powinien zobrazować suchą teorię🧐
W fioletowych ramkach umieściłem elementy blokowe dzięki znacznikom div, p, oraz nagłówka h1.
Elementy liniowe utworzyłem znacznikami a oraz span, które wyróżniłem zielonymi ramkami.
lingering-dust-2f3tu
lingering-dust-2f3tu by danielminschinski
Elementy inline
Domyślnie dane znaczniki HTML są liniowe albo blokowe.
Liniowe a więc nie rozpychające się na pełną szerokość strony, to między innymi: <b>, <a>, <i>, <span>. Poniżej stworzyłem podobny przykład do poprzedniego, ale nadałem im właściwość CSS o nazwie display. Właściwość ta może przyjmować następujące wartości:
- block – wartość oznaczająca, że dany element ma być lub jest domyślnie blokowy,
blazing-sun-k5z4y
blazing-sun-k5z4y by danielminschinski
- inline – wartość oznaczająca, że dany element ma być lub jest domyślnie liniowy.
musing-taussig-q6o1o
musing-taussig-q6o1o by danielminschinski
Alternatywa – inline-block
Jak to w życiu bywa, nic nie jest idealne. Tak jest również w programowaniu. Dla znaczników inline nie działają niektóre właściwości CSS, przykładowo – nadawanie wysokości elementom. Z drugiej strony, elementom blokowym można zmieniać rozmiary.
Tak więc, jeśli chcemy aby elementy wyświetlały się w jednej linii (możliwość inline), oraz dodatkowo chcemy nadać im wysokość (możliwość block), to aby osiągnąć możemy użyć w CSS dla display właściwość inline-block.
W skrócie, dla elementów liniowych nie działają wszystkie własności box-model (wysokości, paddingi, marginesy), więc czasem pomaga wspomniany inline-block. Spójrz na poniższy przykład:
focused-lovelace-oqjdg
focused-lovelace-oqjdg by danielminschinski
Chowanie elementów
Podczas tworzenia projektu pojawi się potrzeba ukrycia danego elementu, przykładowo aby był widoczny dopiero po wykonaniu jakiejś akcji. Takie rozwiązanie można osiągnąć w czystym CSS.
Elementy można ukryć na dwa sposoby za pomocą właściwości CSS:
- display: none; – właściwość która sprawia, że element nie jest wyświetlany i nie zajmuję miejsca w układzie strony,
- visibility: hidden; – właściwość która sprawia, że element jest niewidoczny ale ustawiony jest tak jakby cały czas tam był w danym miejscu. Domyślna wartość dla każdego znacznika HTML to visibility: visible;
Teraz poćwiczmy zachowywanie się elementów korygując ich właściwości CSS:
Ćwiczenie
- Utwórz nowy projekt w codesandbox.
- Wygeneruj podstawowy szkielet strony wraz z plikiem css.
- W ciele strony dodaj diva z klasą “container”. W nim dodaj nagłówek h2 z tekstem “Układ normalny”. Pod nim umieść cztery divy z klasami “one”, “two”, “three”, “four”.
- Następnie skopiuj całego diva container z zawartością. Zmień zawartość nagłówka na “Układ z wyłaczeniem (display: none;)”. Dodatkowo rozszerz zawartość drugiego diva z klasą “two” na “two dont-show”.
- Powtórz powyższy punkt. A do precyzując – zmień treść nagłówka na “Układ z ukryciem (display: hidden;)” oraz skoryguj zawartość drugiego diva z klasą “two dont-show” na “two hide”.
- W arkuszu stylów dodaj selektor klasy “.container div”. Ustaw w nim wysokość elementu na 100px, minimalną szerokość na 20% oraz wyświetlanie na inline-block.
- Dla każdej klasy “one”, “two”, “three”, “four” ustaw inny kolor elementu.
- Dla klasy “dont-show” dodaj deklarację “display: none !important;”.
- Ostatnią klasę “hide” wyposaż o następującą deklarację: “visibility: hidden;”.
Myślę, że podstawowe informację przekazałem o elementach blokowych i liniowych😉 Polecam poczytać więcej w internetach dla utrwalenia👍
W kolejnym poście tak naprawdę rozszerzenie tematu – ustawianie elementów w poziomie.
Tak więc do kolejnego postu ❕😉👍
Wszystkie nowości na moim blogu znajdziesz dzięki – ▶Newsletterze◀ oraz śledzenia profilu na ▶fb◀
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA