Uneori este necesar să plasați o bucată mare de text într-o fereastră mică care nu se potrivește complet acolo, pentru a rezolva această problemă este ușor să creați un strat de defilare - defilare div.
Va dura
Strat de dimensiune fixă și stil CSS.
CSS
Clasa CSS .scroll este setată la 600px în lungime și 300px în înălțime, căptușeală interioară, culoarea cadrului și a fundalului. DAR! Cel mai important, parametrul overflow: auto setează bara de derulare să apară atunci când cantitatea de text este mai mare decât dimensiunea stratului.
Defilare (lățime: 500 px; înălțime: 300 px; / * este necesară dimensiunea fixă * / depășire: automată; / * defilarea apare după cum este necesar * / umplutură: 10 px 20 px; chenar: # 999 1 px solid; culoare de fundal: #FAFAFA;)
HTML
Rezultat
Pe ecran, veți vedea un cadru mic cu text și un chenar gri.
Cele mai răspândite sunt lichidele de răcire cu etilenglicol pe bază de etilenglicol și apă (distilată) cu un complex de aditivi.
Antigelurile se obțin ca soluții apoase ale concentratelor corespunzătoare. În timpul funcționării, calitatea antigelului poate fi controlată prin densitate. În timpul funcționării, apa se evaporă mai întâi din lichidul de răcire, care trebuie reumplut (distilat) periodic. Este necesar să vă asigurați că nicio benzină și uleiuri nu pătrund în antigel, deoarece provoacă spumare și eliberarea de lichid din sistem.
Durata de viață a lichidelor de răcire precum „Tosol” și „Lena” este limitată de durata de viață a aditivilor și este de obicei de 2 ani; kilometrajul mediu pentru diverse mașini este de 50.000 km.
La prima întreținere a unui vehicul uzat, lichidul de răcire trebuie înlocuit. După scurgerea lichidului vechi, umpleți sistemul cu apă curată, porniți motorul și lăsați-l la ralanti timp de 15-20 de minute; apoi scurgeți apa și reumpleți sistemul cu lichid de răcire nou.
Proprietatea overflow controlează afișarea conținutului element bloc dacă nu se potrivește în întregime și depășește gama de dimensiuni specificate.
informatie scurta
Denumiri
| Descriere | Exemplu | |
|---|---|---|
| <тип> | Indică tipul valorii. | <размер> |
| A && B | Valorile trebuie afișate în ordinea afișată. | <размер> && <цвет> |
| A | B | Indică faptul că ar trebui selectată doar una dintre valorile sugerate (A sau B). | normal | litere mici |
| A || B | Fiecare valoare poate fi folosită singură sau împreună cu altele, în orice ordine. | lățime || numara |
| Grupează valori. | [cultură || traversa] | |
| * | Repetați de zero sau de mai multe ori. | [,<время>]* |
| + | Repetați una sau mai multe ori. | <число>+ |
| ? | Tipul, cuvântul sau grupul specificat este opțional. | medalion? |
| (A, B) | Repetați cel puțin A, dar nu mai mult de B ori. | <радиус>{1,4} |
| # | Repetați o dată sau de mai multe ori, separate prin virgule. | <время># |
Valorile
vizibil Afișează întregul conținut al elementului, chiar și dincolo de înălțimea și lățimea specificate. ascuns Numai zona din interiorul elementului este afișată, restul va fi ascuns. scroll Barele de defilare sunt întotdeauna adăugate. barele de derulare automate sunt adăugate numai atunci când este necesar.
Cutie cu nisip
Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la ora unsprezece dimineața, pentru că la această oră micul dejun se terminase deja de mult și nici măcar nu se gândise să înceapă prânzul. Și, desigur, a fost teribil de încântat să-l vadă pe Rabbit scoțând cești și farfurii.
div (înălțime: 80px; overflow: automat;)
Exemplu
Gel albastru eterogen
Conductometria transmite ușor metoda electronică de producție, indiferent de consecințele pătrunderii metilcarbiolului.
Rezultat acest exemplu prezentată în fig. unu.
Orez. 1. Aplicarea proprietății overflow
Model de obiect
Un obiect.stil.debordare
Notă
Internet Explorer până la versiunea 7.0 inclusiv:
- relativ pozitionat elemente copil ale căror valori de depășire sunt setate la auto sau scroll se comportă ca și cum ar avea poziție: fixă.
Internet Explorer 8:
- Combinarea depășirii cu valoarea de defilare cu proprietățile max-height și float poate face ca elementele paginii web să dispară, iar browserul afișează un ecran gol.
- Pentru un bloc care are proprietățile plutitoareși depășirea cu o valoare de defilare, lățimea setată prin proprietatea max-width este ignorată.
- Înălțimea blocului cu o bară de derulare orizontală crește cu înălțimea barei de derulare, deși conform specificațiilor CSS dat dimensiunile trebuie să includă și barele de defilare.
Firefox 3.6 aplică incorect overflow grupurilor de celule de tabel ( ,
, ).Specificație
Fiecare specificație trece prin mai multe etape de aprobare.
- Recomandare - Această specificație a fost aprobată de W3C și este recomandată ca standard.
- Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că acesta este în concordanță cu obiectivele sale, dar este necesar ajutorul comunității de dezvoltatori pentru implementarea standardului.
- Recomandare propusă ( Recomandare sugerată) - În acest moment, documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
- Proiect de lucru - O versiune mai matură a proiectului după discuții și amendamente pentru revizuirea comunității.
- Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după editarea de către editorii de proiect.
- Ciornă ( Proiect de specificație) este primul proiect al standardului.
În acest articol, vom analiza în detaliu proprietatea overflow cu toate valorile sale, care vă permite, de asemenea, să adăugați sau să eliminați o bară de defilare orizontală / verticală. Cu alte cuvinte, cum să faci bare de defilare.
Overflow în CSS este responsabil pentru modul în care va arăta afișarea informațiilor dintr-un bloc dacă conținutul depășește înălțimea sau lățimea acestui bloc. Această proprietate se aplică numai elementelor de bloc (afișare: bloc; sau cele care sunt inițial bazate pe bloc - div și așa mai departe).
Valori posibile pe care le ia această proprietate (vizibile implicit):
- Vizibil - Afișează întregul conținut al elementului, chiar și dincolo de înălțimea și lățimea specificate.
- Ascuns - Numai zona din interiorul elementului este afișată, restul va fi ascuns.
- Defilare - Barele de defilare sunt întotdeauna adăugate.
- Auto - Barele de defilare sunt adăugate numai atunci când este necesar.
- Moștenire - Moștenește valoarea de la părinte.
Cel mai adesea această proprietate este folosită pentru a elimina sau adăuga bare de defilare la un element. Astfel, de exemplu, faceți cu rame pentru a nu le înghesui în dimensiune completă. Sau pentru a introduce ceva text mare, astfel încât să nu ocupe o jumătate de pagină, ci să se așeze confortabil într-un bloc special, și acolo să poată fi derulat și citit. În cea mai mare parte, proprietatea rezolvă problema unei afișari confortabile a informațiilor.
În demonstrație, puteți observa cum funcționează de fapt fiecare dintre valorile proprietății:
cod HTML
vizibil
ascuns
Tovarăși! start Munca zilnica asupra formării jocurilor de poziţie rol importantîn formarea sistemelor de participare în masă. Semnificația acestor probleme este atât de evidentă încât creșterea cantitativă constantă și sfera activității noastre impun definirea și rafinarea unor noi propuneri. Astfel, consolidarea și dezvoltarea structurii este un experiment interesant în testarea modelului de dezvoltare. Sarcina organizației, în special model nou activitatea organizatorica determina in mare masura crearea unui sistem de pregatire a personalului, raspunde nevoilor urgente.
Experiența diversă și bogată în consolidarea și dezvoltarea structurii ne permite să evaluăm importanța direcțiilor de dezvoltare progresivă. În acest fel dezvoltare ulterioară diverse forme de activitate vă permit să îndepliniți sarcini importante pentru dezvoltarea de noi propuneri. Practica de zi cu zi arată că implementarea obiectivelor planificate asigură o gamă largă de participare (specialişti) la formarea poziţiilor luate de participanţi în raport cu sarcinile stabilite. Semnificația acestor probleme este atât de evidentă încât consolidarea și dezvoltarea structurii este un experiment interesant de testare a unor condiții financiare și administrative semnificative. Astfel, creșterea cantitativă constantă și sfera activității noastre ne permit să apreciem importanța formelor de dezvoltare. Consideraţiile ideologice de ordin superior, precum şi cadrul şi locul de pregătire a personalului asigură o gamă largă de participare (specialiştilor) la formarea posturilor luate de participanţi în raport cu sarcinile stabilite.
sul
Tovarăși! începerea activității de zi cu zi de poziționare joacă un rol important în modelarea sistemelor participative. Semnificația acestor probleme este atât de evidentă încât creșterea cantitativă constantă și sfera activității noastre impun definirea și rafinarea unor noi propuneri. Astfel, consolidarea și dezvoltarea structurii este un experiment interesant în testarea modelului de dezvoltare. Sarcina organizației, în special noul model de activitate organizațională, determină în mare măsură crearea unui sistem de pregătire a personalului, răspunde nevoilor urgente.
Experiența diversă și bogată în consolidarea și dezvoltarea structurii ne permite să evaluăm importanța direcțiilor de dezvoltare progresivă. Astfel, dezvoltarea în continuare a diverselor forme de activitate ne permite să îndeplinim sarcini importante pentru dezvoltarea de noi propuneri. Practica de zi cu zi arată că implementarea obiectivelor planificate asigură o gamă largă de participare (specialişti) la formarea poziţiilor luate de participanţi în raport cu sarcinile stabilite. Semnificația acestor probleme este atât de evidentă încât consolidarea și dezvoltarea structurii este un experiment interesant de testare a unor condiții financiare și administrative semnificative. Astfel, creșterea cantitativă constantă și sfera activității noastre ne permit să apreciem importanța formelor de dezvoltare. Consideraţiile ideologice de ordin superior, precum şi cadrul şi locul de pregătire a personalului asigură o gamă largă de participare (specialiştilor) la formarea posturilor luate de participanţi în raport cu sarcinile stabilite.
auto
Tovarăși! începerea activității de zi cu zi de poziționare joacă un rol important în modelarea sistemelor participative. Semnificația acestor probleme este atât de evidentă încât creșterea cantitativă constantă și sfera activității noastre impun definirea și rafinarea unor noi propuneri. Astfel, consolidarea și dezvoltarea structurii este un experiment interesant în testarea modelului de dezvoltare. Sarcina organizației, în special noul model de activitate organizațională, determină în mare măsură crearea unui sistem de pregătire a personalului, răspunde nevoilor urgente.
Experiența diversă și bogată în consolidarea și dezvoltarea structurii ne permite să evaluăm importanța direcțiilor de dezvoltare progresivă. Astfel, dezvoltarea în continuare a diverselor forme de activitate ne permite să îndeplinim sarcini importante pentru dezvoltarea de noi propuneri. Practica de zi cu zi arată că implementarea obiectivelor planificate asigură o gamă largă de participare (specialişti) la formarea poziţiilor luate de participanţi în raport cu sarcinile stabilite. Semnificația acestor probleme este atât de evidentă încât consolidarea și dezvoltarea structurii este un experiment interesant de testare a unor condiții financiare și administrative semnificative. Astfel, creșterea cantitativă constantă și sfera activității noastre ne permit să apreciem importanța formelor de dezvoltare. Consideraţiile ideologice de ordin superior, precum şi cadrul şi locul de pregătire a personalului asigură o gamă largă de participare (specialiştilor) la formarea posturilor luate de participanţi în raport cu sarcinile stabilite.
body (marja: 0 0 0 0; umplutură: 0 0 60px 0; dimensiunea fontului: 16px;) h2 (culoare: # CC0033;) div (lățime: 200px; / * lățime fixă* / înălțime: 300px; / * înălțime fixă * / chenar: 1px solid # 555; umplutură: 4px; marginea: 4px; plutește la stânga; ) .VisibleDiv (overflow: vizibil;) .HiddenDiv (overflow: hidden;) .ScrollDiv (overflow: scroll;) .AutoDiv (overflow: auto;)
Merită să acordați atenție faptului că, în acest caz particular, blocurile cu o înălțime și lățime fixă date. Acest lucru este important, de exemplu, luați în considerare opțiunea când înălțimea blocului este setată la automat:
Putem observa că textul este afișat corect în interiorul blocului în toate cazurile, cu excepția unui mic inconvenient în cazul scroll-ului, unde apar bare de defilare inactive.
Dar în acest caz există un mic pericol, cu care mulți nu înțeleg de ce a apărut și cum să-l remedieze. Ideea este că dacă un bloc cu preaplin: vizibil; adică valoarea implicită, iar conținutul său are elemente cu oricare valoare flotantă, cu excepția niciunuia, atunci toate acestea vor fi afișate incorect. Pentru a înțelege care este această situație, luați în considerare un exemplu:
Există un alt bloc sub blocul VisibleDiv.
vizibil
Tovarăși! începerea activității de zi cu zi de poziționare joacă un rol important în modelarea sistemelor participative. Semnificația acestor probleme este atât de evidentă încât creșterea cantitativă constantă și sfera activității noastre impun definirea și rafinarea unor noi propuneri. Astfel, consolidarea și dezvoltarea structurii este un experiment interesant în testarea modelului de dezvoltare. Sarcina organizației, în special noul model de activitate organizațională, determină în mare măsură crearea unui sistem de pregătire a personalului, răspunde nevoilor urgente.
Nu există nimic sub blocul VisibleDiv
vizibil
Tovarăși! începerea activității de zi cu zi de poziționare joacă un rol important în modelarea sistemelor participative. Semnificația acestor probleme este atât de evidentă încât creșterea cantitativă constantă și sfera activității noastre impun definirea și rafinarea unor noi propuneri. Astfel, consolidarea și dezvoltarea structurii este un experiment interesant în testarea modelului de dezvoltare. Sarcina organizației, în special noul model de activitate organizațională, determină în mare măsură crearea unui sistem de pregătire a personalului, răspunde nevoilor urgente.
body (marja: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;) h2 (culoare: # CC0033;) p (float: left;) div (lățime: 500px; înălțime: automat; chenar: 1px solid # 555; umplutură: 4px; margine: 4px;) .VisibleDiv (overflow: vizibil; fundal: rgba (0,255,0,0.1);) .ignor (fundal: rgba (0,255,0,0,6); culoare: # FFFFFF; greutatea fontului: bold;)
În primul caz, puteți observa că conținutul cu proprietatea float părăsește blocul și nu este luat în considerare de acesta la determinarea înălțimii blocului, în al doilea caz, sub blocul cu preaplin: vizibil; un alt bloc este special plasat și umbrit într-o culoare diferită. Acestea nu sunt singurele exemple despre cum se pot comporta astfel de blocuri pe pagină (cu overflow: vizibil; și înălțime: auto;). Acest lucru poate fi remediat prin înlocuirea valorii vizibile cu ascuns, trebuie amintit că această proprietate trebuie specificată numai pentru blocurile cu înălțime: auto; dacă există o înălțime fixă, atunci există o mare șansă ca conținutul să fie pur și simplu ascuns dacă este mai mare decât înălțimea specificată.
Iată cum ar arăta versiunea revizuită:
De asemenea, nu vei avea o astfel de problemă dacă blocul cu overflow: vizibil; si inaltime: auto; setați, de asemenea, o valoare pentru proprietatea float. În general, în multe cazuri, afișarea elementelor depinde de un set de proprietăți, și nu de proprietăți individuale.
3. Forțarea defilării verticale și orizontale în blocul CSS
4. Un exemplu de bloc div cu defilare
În acest articol vom analiza problema creării unui bloc (div) marime fixa cu capacitatea de a derula orizontal și vertical. Acest lucru poate fi implementat folosind CSS... Responsabil pentru asta proprietatea de debordare.
Despre depășirea proprietății utile
Proprietate revărsare este responsabil pentru afișarea conținutului unui element bloc. Poate fi folosit atunci când conținutul nu se potrivește complet și depășește zona blocului.preaplin-x- este responsabil pentru afișarea conținutului unui element bloc pe orizontală.
preaplin-y- este responsabil pentru afișarea conținutului unui element bloc pe verticală.
Cod CSS
Prokrutka (
preaplin: automat; / * proprietate pentru a derula orizontal. Automatizați dacă conținutul este mai mare decât blocul * /
}
Proprietăți și valori de overflow
vizibil- afișează întregul conținut al elementului, chiar și dincolo de lățimea specificată.ascuns- este afișată doar zona din interiorul elementului, restul este ascuns.
sul- a adăugat forțat o bară de defilare orizontală (y) sau orizontală (x).
auto- adăugat automat dungă orizontală derularea dacă blocul este mai mic.
Luați în considerare un exemplu de clasă CSS. În lățime și înălțime, setăm lățimea și înălțimea dorite ale blocului (conținutul blocului nu va depăși ele), iar cu proprietatea de overflow: auto; setați derularea orizontală dacă este necesar
Cod CSS
Prokrutka (
latime: 150px; / * lățimea blocului nostru * /
înălțime: 100px; / * înălțimea blocului nostru * /
preaplin: automat; / * proprietate pentru a derula orizontal. Automat dacă există mai multe blocuri * /
}
Forțați defilarea într-un bloc CSS
De asemenea, puteți forța derularea în înălțime și lățime. Pentru a face acest lucru, fiecare axă: overflow-y: scroll; (vertical) overflow-x: scroll; (orizontal) specificăm parametrul de defilare, defilare forțată.Cod HTML și CSS
Prokrutka (
înălțime: 150px; / * înălțimea blocului nostru * /
fundal: #fff; / * culoare de fundal, alb * /
chenar: 1px solid # C1C1C1; / * dimensiunea și culoarea chenarului blocului * /
}
Exemplu de bloc div de defilare
Cod HTML și CSS
Și aici sunt multe, multe text diferit si alte informatii. Și aici există multe, multe texte diferite și alte informații. Și aici există multe, multe texte diferite și alte informații. Și aici există multe, multe texte diferite și alte informații. Și aici există multe, multe texte diferite și alte informații. Și aici există multe, multe texte diferite și alte informații. Și aici există multe, multe texte diferite și alte informații. Și aici există multe, multe texte diferite și alte informații.
Una dintre proprietăți revărsare poate fi eliminat, atunci va exista derulare doar de-a lungul unei axe, ceea ce este suficient.
Vedeți lucrarea de script De exemplu de mai jos.
Puteți utiliza overflow-y: derulați pentru a derula vertical.
