Nie zawsze jest zawsze konieczne, aby element strony był widoczny. Często wystarczy tylko pokazać jego zawartość, zwykle obrazy, tekst, tabele. Reguła CSS z przepełnieniem ustawia tryb wyświetlania zawartości.
Umieszczając elementy blokowe w sobie nawzajem, możesz skutecznie regulować wyświetlanie treści w pożądanym zakresie, zarządzać paskami przewijania i tworzyć własne opcje zarządzania treścią.
Ogólne zasady stosowania
W regule przepełnienia CSS dozwolone są pięć wartości:
widoczne; ukryty; przewijaj; samochód; dziedziczą.Gdy jest to wskazane, treść może wykraczać poza przedmiot. W przypadku ukrytego, strona zewnętrzna zostanie odcięta. Korzystanie z przewijania i automatycznego pozwala dodawać paski przewijania, aby wyświetlać treści wykraczające poza element. Rozmiar elementu określa reguły szerokości i wysokości. Gdy reguła przepełnienia CSS umożliwia przewijanie (wartości przewijania i automatyczne), jego paski są umieszczane wewnątrz elementu. Nie zawsze jest to wygodne i w większości przypadków nie pasuje do projektu strony, gdy programista jest zainteresowany zarządzaniem treścią i nie planuje używać klasycznych "suwaków".
Praktyka, w której przedmiot z treścią rozpatrywany jest w izolacji, daje niewielkie możliwości osiągnięcia pożądanego rezultatu. Jeśli element jest postrzegany jako zbiór wielu znaczników bloków, zagnieżdżonych lub połączonych ze sobą, otwiera się wiele możliwości. Kiedy CSS z przelewem nie jest standardową wersją reguły, odpowiedzialność zaPrawidłowe dane wyjściowe treści są oparte na kodzie javascript.
Przykład: javascript + przepełnienie bez CSS
Jedyną "wadą" zasad CSS jest wypełnianie misji zgodnie z ich składnią i celem. W większości przypadków jest to więcej niż wystarczające. Idealny do używania przepełnienia css (wartości auto lub scroll). Podczas testowania zawsze możesz zobaczyć, że jest on wyprowadzany w jednym lub innym bloku. Tymczasem projekt strony, chęć dewelopera do zaoferowania własnej opcji nawigacji treści i, co najważniejsze, zakresu strony może wymagać zdecydowanie innego rozwiązania niż to, co może zaoferować CSS.
W tym przykładzie bloki mogą zawierać nie tylko treści indeksowane z zagranicy. Istnieje potrzeba przeniesienia go do siebie. Jednym z przedmiotów jest emulacja tabeli wymiany walut elektronicznych (w rzeczywistości to dziewice - "div"), ale dwie kopie treści. W jednym egzemplarzu, jeden kierunek wymiany, w innym - inny. Każdy blok może być rozciągnięty (skompresowany) w wysokości i szerokości, umieszczony nad innym blokiem. Wdrożenie tych funkcji nie jest możliwe w standardowej wersji CSS z przepełnieniem. Zmieniając rozmiar głównej jednostki, wszystkie wewnętrzne dziewice muszą zostać odbudowane. Jednocześnie rozmiar czcionki powinien zmieniać się proporcjonalnie, ponieważ opcja cięcia informacji w programach finansowych wydaje się mało odpowiednia.
Czyste przepełnienie CSS, ale bez suwaków
Zwój zaproponowany przez HTML /CSS jest niewątpliwie praktyczny, ale dla etapu debugowania jest to po prostu konieczne, ale jest jedna istotna kwestia. Kiedy mysz znajduje się powyżej bloku, w którymjest zwoju, zawartość tego bloku się porusza, a nie cała strona. Ten moment nie jest zbyt praktyczny w praktyce: musisz kontrolować miejsce na stronie, na którym możesz obracać kółkiem myszy. Niektórzy użytkownicy tego nie lubią, niektórzy po prostu nie zwracają uwagi.
Tymczasem nic nie stoi na przeszkodzie, by twórca oprogramowania mógł połączyć to, co możliwe z pożądanym. Jeśli zawartość bloku przekracza jego granice, można wywnioskować tylko jego istotę, zabraniając przewijania. Ale gdy użytkownik zwrócił na to uwagę, przytrzymując wskaźnik myszy przez chwilę, musisz rozwinąć blok do żądanego rozmiaru i wyświetlić zawartość. W tej wersji strona będzie reprezentować skoncentrowaną treść, którą użytkownik może ujawnić, jeśli będzie to konieczne. W ogólnym sensie, podczas tworzenia elementów blokowych, należy postępować od idei, że jeden element to jeden div, span lub td. Pomyśl o znacznikach HTML - niezbyt wdzięczna lekcja. O wiele praktyczniej jest myśleć o semantycznych elementach strony i o tym, ile będą one wymagały do implementacji tagów HTML - to inna kwestia.
Ruch z powodu treści
Jeśli weźmiemy za podstawę pojęcia „jest rozmiar bloku, który określa jego zawartość przelewowy reguł, które ma innej opcji CSS. Nie ma potrzeby polegania na standardowym przewijaniu lub pisaniu własnego kodu javascript.
Gdy strona projektu jako zestaw części, wielkość i położenie określają zawartości w zależności od działania, które ujawniają pewne bloki. Jest możliwe, że zostaną one ujawnione całej stronie lub znacznej jej części. Idealne dlarelacją ruchu gościa jest jego zainteresowanie informacjami. Kiedy przychodzi na stronę, obserwuje swój początkowy stan i wybiera to, co jest dla niego interesujące. Przemieszczenie myszy na ekranie lub palec na automacie smartphone ujawnia aktualny aktualny blok, którego wyjście prowadzi do jego zamknięcia i otwarcia następnego. Obecnie, gdy tworzenie nowoczesnej strony nie jest tak trudne, stało się to kwestią zaskoczenia i zainteresowania odwiedzających. Przejście od myślenia tagów HTML do manipulowania elementami informacyjnymi, które są istotne dla odwiedzającego, jest dobrym pomysłem.
