Overflow CSS: afișarea conținutului unui element

Tabelele de stiluri de cascadă sunt ușor de folosit dacă nu intri în junglă de moștenire, prioritizare, structură de clasă, momente teoretice și experiență practică.

Scopul principal al fiecărei proprietăți CSS este de a afișa, dar acest lucru nu înseamnă doar "vizibil": designul "CSS Overflow hidden" este la fel de important.

Elemente de pagină

Pagina conține nu numai elemente, elemente de elemente pot fi plasate pe ea, fie cadre (și acest lucru poate fi nu numai un set de componente, ci un alt site ca întreg) sau sistemul de obiecte care sunt făcute de mână.

Desigur, marea majoritate a site-urilor dezvoltatori care practică aspect de cauciuc, forțat să ia în calcul volumele tot mai mare de informații, precum și faptul că bariera de 800 x 600 pixeli - nu este o barieră la 640 KB, care de câteva decenii a depăși mentalitatea de creatori MS DOS decât să complice viața programatori și utilizatori primul personalk.

În construirea de site-uri, totul este mai simplu: pagina nu se potrivește pe ecran, browserul face defilarea. Deși dezvoltatorul poate furniza rezultate ale conținutului paginii în fereastră fără bare de defilare și fără alte proprietăți: conținutul paginii nu va ieși niciodată din fereastra selectată pentru aceasta. Acest lucru este natural, în afara ferestrei sunt alte aplicații, și fereastra browser - nu mai bine decât alte ferestre: sistemul de operare este întotdeauna în spatele egalității de aplicații.

Cu toate acestea, indiferent de modul în care acestea o prioritate în selectarea opțiunilor de aspect, indiferent de modul distribuit de vizitatori interesați în rezoluția optimă a ecranului pentru vizualizarea site-uri, în prezent există diferite ecrane care nu au întotdeauna oportunități dreptunghiulare de dimensiune fixă.

O lume dinamică prin CSS Overflow

Se acceptă faptul că pagina site-ului este conținutul descompus de etichetele hipertext care indică modul de afișare a acestuia în această situație sau în acea situație în anumite condiții.

Totul se schimbă în mod constant. Chiar dacă site-ul este de așa natură încât conținutul său nu poate fi schimbat de-a lungul anilor, nu există nici o garanție că un vizitator neașteptat nu-l va deschide pe un dispozitiv nou, pe care dezvoltatorul acestui site nici măcar nu știu.

Opțiuni de proprietate pentru regulaOverflow CSS oferă doar patru: este posibil să ascundeți ceva care depășește domeniul de aplicare al elementului, să afișați, să furnizați derularea întotdeauna sau numai atunci când este necesar sau să moșteniți valoarea de la strămoș.

În primul caz (overflow: hidden), tot conținutul care depășește elementul va fi ascuns și ceea ce a fost ascuns nu va fi disponibil. Această poziție este eficientă, dar nu mai puțin interesantă este opțiunea de a arăta tot ceea ce depășește (depășire: vizibil). Deci dezvoltatorul oferă vizitatorului posibilitatea de a avea întotdeauna o idee despre conținutul integral al elementului și de a-și gestiona volumul. Posibilități mai mici sunt date prin derulare (depășire: defilare - există întotdeauna bare de defilare - sau depășire: barele de derulare automată apar după cum este necesar).

Cum se utilizează regula Overflow

Elemente care se află în interiorul unei etichete care are sensCSS "", prezintă un interes deosebit numai atunci când reprezintă text. Plasarea altor componente, de regulă, este fixată de coordonate sau poziții relative.

Elementele de text nu conțin întotdeauna un număr fix de caractere și dacă este necesară utilizarea unei regulioverflow, CSS este instruit să controleze opțiunile pentru o schimbare neașteptată a conținutului.

În special, în etapa de depanare, puteți aplica valoarea proprietăților sau auto scroll, și apoi blocați afișarea de tot ceea ce merge dincolo de câmp, oferind vizitatorului un set de chei, care se va muta conținutul invizibil în regiunea vizibilă. Aceasta este o practică obișnuită. Nu toată lumea este impresionat cu bara de defilare, unii il prefera patru butoane: un top, înainte, înapoi, până la sfârșit.

În plus, regula de suprasarcină CSS în valoarea automată / defilare aduce la pagina un element de incertitudine neplăcută: browserul are prioritate în derularea de la pagină la elementul său atunci când indicatorul mouse-ului este peste el.

În cazul în care elementul este un bloc de text, nu este prea evident si inconfortabil, dar în cazul în care întreaga lățime a ferestrei pentru a plasa cursorul (bloc elemente-imagini), apoi pentru a depăși o astfel de structură nu este întotdeauna posibil cu mouse-ul este adesea necesar să se folosească „la început“ sau „butonul de la sfârșitul pagina ".

Priorități pentru derulare

Dialogul paginii site-ului cu vizitatorul are o importanță deosebită, precum și designul, dezvoltarea, conținutul acestuia. Deoarece site-ul deschide browser-ul și o face în fereastra proprie sau într-o filă separată, atunci cel mai probabil dreptul de a defila ar trebui să aibă o pagină, nu elementul său. Acestea din urmă pot fi nu numai multe, dar fiecare poate avea o funcție proprie.

Site-ul are întotdeauna un sens specific, chiar dacă se referă la domeniul filozofiei, al misticismului sau al altui conținut neprevăzut. De aceea, puteți oricând să vă asumați o încărcare de dialog specifică elementelor cu CSS de suprapunere a regulilor.

În special, dacă elementul este selectorul pentru selecția anului (data), selectorul clasic va fi incomod și bara de defilare va provoca inconveniente evidente. Aplicând overflow în acest caz, CSS poate fi folosit în mod eficient: câmpurile interne ale elementului, alocarea perioadelor, oferă vizitatorului posibilitatea de a seta rapid și convenabil numărul dorit, lună, an.