Правилото за препълване на CSS

Далеч не винаги е необходимо да се направи видим елементът на страницата. Често трябва само да направите видимо неговото съдържание, обикновено изображения, текст, таблици. Правилото за преливане на CSS задава режима на показване на съдържанието.

Чрез поставяне на блокови елементи един в друг, можете ефективно да регулирате показването на съдържанието в рамките на желания диапазон, да управлявате лентите за превъртане и да направите своя собствена опция за управление на съдържанието.

Общи правила за прилагане

В правилото за препълване на CSS са разрешени пет стойности:
  • видими;
  • скрити;
  • превъртане;
  • автомобил;
  • наследява.
  • Когато е посочено, съдържанието може да излезе извън рамките на елемента. В случай на скрит, външното ще бъде отрязано. Използването на превъртане и автоматично ви позволява да добавяте ленти за превъртане, за да видите съдържанието, което надхвърля елемента. Размерът на елемента определя правилата за ширина и височина. Когато правилото за преливане на CSS позволява превъртане (превъртане и авто стойности), неговите ленти се поставят вътре в елемента. Не винаги е удобно и в повечето случаи не отговаря на дизайна на страницата, когато разработчикът се интересува от управление на съдържанието и не планира да използва класическите "плъзгачи".

    Практиката, при която даден артикул със съдържание се разглежда изолирано, дава малка възможност за постигане на желания резултат. Ако даден елемент се разглежда като колекция от множество блокови тагове, вложени или свързани помежду си, се отварят много възможности. Когато препълването CSS не е стандартна версия на правилото, отговорността заПравилният изход на съдържанието се основава на javascript кода.

    Пример: javascript + overflow без CSS

    Единственият "недостатък" на CSS правилата е да изпълни своята мисия, както е предложено от синтаксиса и целта им. В повечето случаи това е повече от достатъчно. Идеален за използване на преливане css (автоматично или превъртане стойности). Когато тествате, винаги можете да видите, че той се извежда в един или друг блок. Междувременно, дизайнът на сайта, желанието на разработчика да предложи своя собствена опция за навигация на съдържанието и най-важното, обхватът на сайта може да изисква определено различно решение от това, което CSS може да предложи.

    В този пример блоковете не могат да съдържат само съдържание, което обхожда от чужбина. Необходимо е да я преместите един към друг. Един обект е емулация на таблица на обмен на електронни валути (всъщност това са девственици - "div"), но две копия на съдържанието. В едно копие, една посока на обмен, в друга - друга. Всеки блок може да бъде разтегнат (компресиран) по височина и ширина, разположен върху друг блок. Реализирането на тези функции не е възможно със стандартната версия на CSS за преливане. При промяна на размера на основното устройство всички вътрешни девици трябва да бъдат възстановени. В същото време размерът на шрифта трябва да се променя пропорционално, тъй като възможността за намаляване на информацията във финансовите програми изглежда неподходяща.

    Преливане на чист CSS, но без плъзгачи

    Превъртането, предложено от HTML /CSS, несъмнено е практично, но за етапа на отстраняване на грешки е необходимо, но има една значима точка. Когато мишката е над блока, в койтое превъртане, съдържанието на този блок се движи, а не цялата страница. Този момент не е много практичен на практика: трябва да контролирате мястото на страницата, където можете да завъртите колелото на мишката. Някои посетители не го харесват, някои просто не обръщат внимание.
    Междувременно нищо не пречи на разработчика да комбинира възможното с желаното. Ако съдържанието на даден блок излезе извън неговите граници, то е възможно да се извлече само неговата същност, забранявайки я да се превърта. Но когато потребителят привлече вниманието към него, задържайки курсора на мишката за известно време, трябва да разширите блока до желания размер и да покажете съдържанието. В тази версия страницата ще представлява концентрираното съдържание, което посетителят може да разкрие, ако е необходимо. В общия смисъл, когато се създават блокови елементи, трябва да се изхожда от идеята, че един елемент е един div, span или td. Помислете за HTML тагове - не е много благодарен урок. Много по-практично е да се мисли за семантичните елементи на страницата и колко ще им е необходима за реализирането на HTML тагове - различен въпрос.

    Движение, движено от съдържание

    Ако вземем за основа идеята за "има блок, чийто размер определя съдържанието му, правилата за препълване на CSS е съвсем различна опция." Няма нужда да разчитате на стандартно превъртане или да напишете свой собствен JavaScript код.

    Ако проектирате сайт като набор от елементи, чийто размер и местоположение се определят от тяхното съдържание, то в зависимост от действията на посетителя, те ще разкрият определени блокове. Възможно е те да бъдат разкрити на цялата страница или на значителна част от нея. Чудесно заразказът за движението на посетителя е негов интерес към информацията. Когато дойде на мястото, той наблюдава първоначалното си състояние и избира какво му е интересно. Движението на мишката върху екрана или пръста върху смартфона показва текущия действителен блок, изходът на който води до неговото затваряне и отварянето на следващия. В момента, когато създаването на модерен сайт не е толкова трудно, става въпрос за изненада и интерес към посетителя. Преминаването от мислене на HTML тагове към манипулиране на информационни елементи, които са от значение за посетителя, е добра идея.

    Свързани публикации