Ponekad je potrebno postaviti veliki komad teksta u mali prozor koji se tu ne uklapa u potpunosti; da biste riješili ovaj problem, lako je kreirati sloj pomicanjem - div sa skrolom.

Trebaće

Sloj fiksne veličine i CSS stil.

CSS

U CSS class.scroll parametri su postavljeni na 600px u dužinu i 300px u visinu, padding, okvir i boja pozadine. ALI! Najvažniji parametar je overflow:auto, koji postavlja traku za pomicanje da se pojavi kada je količina teksta veća od veličine sloja.

Pomicanje (širina:500px; visina:300px; /* potrebna je fiksna veličina */ overflow:auto; /* pomicanje se pojavljuje po potrebi */ padding:10px 20px; granica:#999 1px čvrsta; background-color:#FAFAFA; )

HTML

Rezultat

Na ekranu ćete videti mali okvir sa tekstom i sivim okvirom.

Najviše se koriste etilen glikol rashladna sredstva na bazi etilen glikola i vode (destilirana) sa kompleksom aditiva.

Antifrizi se dobijaju kao vodeni rastvori odgovarajućih koncentrata. Tokom rada, kvalitet antifriza se može kontrolisati gustinom. Tokom rada, prva stvar koja ispari iz rashladnog sredstva tokom rada je voda, koju treba povremeno dopunjavati (destilirati). Potrebno je osigurati da benzin i ulja ne dođu u antifriz, jer uzrokuju pjenjenje i oslobađanje tečnosti iz sistema.

Vek trajanja rashladnih tečnosti kao što su "Tosol" i "Lena" ograničen je izdržljivošću aditiva i obično je 2 godine; Prosječna kilometraža za razne automobile je 50.000 km.

Prilikom prvog servisiranja rabljenog vozila potrebno je promijeniti rashladnu tečnost. Nakon što ispraznite staru tečnost, napunite sistem čistom vodom, pokrenite motor i ostavite da radi u praznom hodu 15-20 minuta; zatim ispustite vodu i napunite sistem novom rashladnom tečnošću.

Svojstvo overflow kontroliše prikaz sadržaja blok element, ako se potpuno ne uklapa i prelazi područje datih dimenzija.

kratke informacije

Oznake

Vrijednosti

vidljivo Prikazuje cijeli sadržaj elementa, čak i izvan navedene visine i širine. hidden Samo područje unutar elementa je prikazano, ostalo će biti skriveno. pomicanje Trake za pomicanje se uvijek dodaju. auto Scroll trake se dodaju samo kada je potrebno.

Sandbox

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest ujutro, jer je tada doručak već odavno bio završen, a ručak još nije počeo. I, naravno, bio je užasno sretan kada je vidio da Zec vadi šolje i tanjire.

div (visina: 80px; overflow: auto ;)

Primjer

Rezultat ovaj primjer prikazano na sl. 1.

Rice. 1. Primjena svojstva overflow

Objektni model

Objekt.style.overflow

Bilješka

Internet Explorer do verzije 7.0 uključujući:

• relativno pozicioniran podređeni elementi, čije su vrijednosti prekoračenja postavljene na auto ili se pomicanje ponašaju kao da imaju poziciju: fiksnu.

Internet Explorer 8:

• Kombinovanje prelivanja sa vrednošću pomeranja sa svojstvima max-height i float može dovesti do nedostajućih elemenata veb stranice i prikazivanja praznog ekrana u pretraživaču.
• Za blok koji ima float svojstva i prelije sa vrijednošću scroll , širina specificirana kroz svojstvo max-width se zanemaruje.
• Visina bloka s horizontalnom trakom za pomicanje povećava se za visinu trake za pomicanje, iako prema specifikaciji CSS specificiran dimenzije trebaju uključivati ​​trake za pomicanje.

Firefox 3.6 ne primjenjuje ispravno prelijevanje na grupe ćelija tablice ( , , ).

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice da implementira standard.
• Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se dostavlja Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt – zrelija verzija nacrta o kojoj se raspravljalo i dopunjeno za pregled zajednice.
• Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon izmjena koje su izvršili urednici projekta.
• Nacrt ( Nacrt specifikacije) - prva verzija verzije standarda.

U ovom članku ćemo detaljno ispitati svojstvo overflow sa svim njegovim vrijednostima, koje vam također omogućava dodavanje ili uklanjanje horizontalne/vertikalne trake za pomicanje. Drugim riječima, kako napraviti trake za pomicanje.

Overflow u CSS-u je odgovoran za to kako će izgledati prikaz informacija u bloku ako sadržaj premašuje visinu ili širinu ovog bloka. Ovo svojstvo se odnosi samo na blok elemente (display : block ; ili one koji su inicijalno blok elementi - divs, itd.).

Moguće vrijednosti koje ovo svojstvo uzima (vidljivo prema zadanim postavkama):

• Vidljivo - prikazuje se cijeli sadržaj elementa, čak i iznad navedene visine i širine.
• Skriveno - prikazuje se samo područje unutar elementa, ostalo će biti skriveno.
• Scroll - Trake za pomicanje se uvijek dodaju.
• Auto - trake za pomicanje se dodaju samo kada je to potrebno.
• Naslijediti - Nasljeđuje vrijednost roditelja.

Najčešće se ovo svojstvo koristi za uklanjanje ili dodavanje traka za pomicanje elementu. Ovako se, na primjer, bave okvirima da ih ne bi nagurali u punoj veličini. Ili da ubacite neki veliki tekst tako da ne zauzima pola stranice, već da se udobno smjesti u poseban blok, i tamo se može listati i čitati. Uglavnom, nekretnina rješava problem udobnog prikaza informacija.

U demonstraciji možete vidjeti kako svaka vrijednost imovine funkcionira u praksi:

HTML kod

tijelo (margina:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) div ( width:200px; /* fiksna širina*/ visina:300px; /* fiksna visina */ border:1px solid #555; padding:4px; margin:4px; float:left; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;).ScrollDiv (overflow:scroll;).AutoDiv (overflow:auto;)

Vrijedno je obratiti pažnju na činjenicu da u ovom konkretnom slučaju blokovi imaju zadanu fiksnu visinu i širinu. Ovo je važno, na primjer, razmotrite opciju kada je visina bloka postavljena na auto:

Vidimo da je tekst ispravno prikazan unutar bloka u svim slučajevima, osim male neugodnosti u slučaju scrolla, gdje se pojavljuju neaktivne trake za pomicanje.

Ali u ovom slučaju postoji mala opasnost, nailazeći na koju mnogi ne razumiju zašto je nastala i kako je ispraviti. Činjenica je da ako je blok sa prelivom: vidljiv; odnosno zadana vrijednost, a njen sadržaj ima elemente sa bilo kojim float vrijednost, osim nijedan , onda će sve ovo biti pogrešno prikazano. Da biste razumjeli kakva je ova situacija, razmotrite primjer:

Ispod bloka VisibleDiv je još jedan blok

Nema ničega ispod bloka VisibleDiv

tijelo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) p (float:left;) div ( širina:500px; visina:auto; granica: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (background: rgba(0,255,0,0.6); color:# FFFFFF;font-weight:bold;)

U prvom slučaju je jasno da se sadržaj sa svojstvom float pomiče izvan bloka i ne uzima se u obzir pri određivanju visine bloka, u drugom slučaju ispod bloka sa prelivom: vidljivo ; Drugi blok je posebno postavljen i ofarban u drugu boju. Ovo nisu jedini primjeri kako se takvi blokovi mogu ponašati na stranici (s overflow : vidljivo ; i visinom : auto ; ). Ovo se može ispraviti zamjenom vidljive vrijednosti sa skrivenom; zapamtite da ovo svojstvo treba specificirati samo za blokove s visinom: auto; , ako postoji fiksna visina, onda postoji velika šansa da će sadržaj jednostavno biti skriven ako je veći od navedene visine.

Ovako će izgledati ispravljena verzija:

Također, nećete imati takav problem ako blok ima overflow: visible ; i visina: auto; određena je vrijednost svojstva float. Općenito, u mnogim slučajevima, prikaz elemenata ovisi o skupu svojstava, a ne o pojedinačnim svojstvima.

U ovom članku ćemo se osvrnuti na pitanje kreiranja bloka (div) fiksna veličina sa mogućnošću vodoravnog i okomitog pomicanja. Ovo se može implementirati koristeći CSS. Odgovoran za ovo overflow svojstvo.

O korisnom svojstvu prelijevanja

overflow-x- odgovoran je za horizontalno prikazivanje sadržaja blok elementa.
overflow-y- odgovoran je za vertikalno prikazivanje sadržaja blok elementa.

CSS kod

Prokrutka (
overflow: auto; /* svojstvo za horizontalno pomicanje. Automatski ako je sadržaj veći od bloka */
}

svojstva i vrijednosti prelivanja

Razmotrimo primjer CSS klase. U širini i visini postavljamo širinu i visinu bloka koji nam je potreban (sadržaj bloka neće ići dalje od njih), a sa svojstvom overflow: auto; postavite horizontalno pomicanje ako je potrebno

CSS kod

Prokrutka (
širina:150px; /* širina našeg bloka */
visina:100px; /* visina našeg bloka */


overflow: auto; /* svojstvo za horizontalno pomicanje. Automatski, ako ima više od bloka */
}

Prisilno pomicanje u CSS bloku

HTML i CSS kod

Prokrutka (
visina:150px; /* visina našeg bloka */
pozadina: #fff; /* boja pozadine, bijela */
granica: 1px čvrsta #C1C1C1; /* veličina i boja ivice bloka */


}

Primjer za pomicanje div

Možete koristiti overflow-y: pomicanje za vertikalno pomicanje.