U ovom ćemo članku detaljno analizirati svojstvo preljeva sa svim njegovim vrijednostima, koje vam također omogućuje dodavanje ili uklanjanje vodoravne / okomite 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 (prikaz: blok; ili one koji su u početku bazirani na bloku - div, i tako dalje).

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

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

Najčešće se ovo svojstvo koristi za uklanjanje ili dodavanje traka za pomicanje nekom elementu. Tako, na primjer, radite s okvirima kako ih ne biste nagurali u punoj veličini. Ili da umetnete neki veliki tekst, 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 od vrijednosti svojstva zapravo funkcionira:

HTML kod

tijelo (margina: 0 0 0 0; padding: 0 0 60px 0; veličina fonta: 16px;) h2 (boja: # CC0033;) div (širina: 200px; / * fiksna širina * / visina: 300px; / * fiksna visina * / obrub: 1px solid # 555; padding: 4px; margina: 4px; float: lijevo;) .VisibleDiv (preljev: vidljiv;) .HiddenDiv (preljev: skriven;) .ScrollDiv (preljev: pomicanje;) .AutoDiv ( preljev: auto;)

Vrijedno je obratiti pozornost na činjenicu da su u ovom konkretnom slučaju blokovi s zadanom fiksnom visinom i širinom. Ovo je važno, na primjer, razmotrite opciju kada je visina bloka postavljena na automatski:

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

Ali u ovom slučaju postoji mala opasnost, suočena s kojom mnogi ne razumiju zašto je nastala i kako je popraviti. Poanta je da ako je blok s preljevom: vidljiv; odnosno zadana vrijednost, a njegov sadržaj ima elemente s bilo kojom float vrijednosti, osim bez, onda će sve to biti pogrešno prikazano. Kako biste razumjeli kakva je ova situacija, razmotrite primjer:

Ispod bloka VisibleDiv nalazi se još jedan blok.

Ispod bloka VisibleDiv nema ništa

tijelo (margina: 0 0 0 0; padding: 0 0 60px 0; veličina fonta: 16px;) h2 (boja: # CC0033;) p (float: lijevo;) div (širina: 500px; visina: auto; obrub: 1px solid # 555; padding: 4px; margina: 4px;) .VisibleDiv (preljev: vidljiv; pozadina: rgba (0,255,0,0.1);) .ignor (pozadina: rgba (0,255,0,0,6); boja: # FFFFFF; težina fonta: podebljano;)

U prvom slučaju možete vidjeti da sadržaj sa svojstvom float napušta blok i da ga ne uzima u obzir pri određivanju visine bloka, u drugom slučaju ispod bloka s preljevom: vidljivo; drugi blok je posebno postavljen i zasjenjen drugom bojom. Ovo nisu jedini primjeri kako se takvi blokovi mogu ponašati na stranici (s preljevom: vidljivo; i visinom: auto;). To se može popraviti zamjenom vidljive vrijednosti sa skrivenom, treba imati na umu 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 bi izgledala revidirana verzija:

Također, nećete imati takav problem ako je blok s preljevom: vidljiv; i visina: auto; također postavite neku vrijednost za svojstvo float. Općenito, u mnogim slučajevima, prikaz stavki ovisi o skupu svojstava, a ne o pojedinačnim svojstvima.

Svojstvo overflow kontrolira prikaz sadržaja elementa bloka ako se ne uklapa u potpunosti i izvan je navedene veličine.

kratke informacije

Oznake

	Opis	Primjer
<тип>	Označava vrstu vrijednosti.	<размер>
A && B	Vrijednosti moraju biti prikazane prikazanim redoslijedom.	<размер> && <цвет>
A | B	Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B).	normalno | male kapice
A || B	Svaka vrijednost može se koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom.	širina || računati
	Grupne vrijednosti.	[usjev || križ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jedan ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nije obavezna.	umetnuti?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jedan ili više puta, odvojeno zarezima.	<время>#

×

Vrijednosti

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

Peščanik

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, pogotovo u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno završio, a večera nije ni pomislila da počne. I, naravno, bio je užasno oduševljen kad je vidio Zeca kako vadi šalice i tanjure.

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

Primjer

Rezultat ovog primjera prikazan je na sl. jedan.

Riža. 1. Primjena svojstva overflow

Model objekta

Objekt.stil.prelijevati

Bilješka

Internet Explorer do i uključujući verziju 7.0:

• relativno pozicionirana djeca čije su vrijednosti preljeva postavljene na auto ili pomicanje ponašaju se kao da imaju položaj: fiksni.

Internet Explorer 8:

• Kombiniranje preljeva s vrijednošću pomicanja sa svojstvima max-height i float može uzrokovati nestanak elemenata web stranice i preglednik prikazuje prazan zaslon.
• Za blok sa svojstvima float i overflow postavljenim na pomicanje, širina postavljena putem svojstva max-width se zanemaruje.
• Visina bloka s horizontalnom trakom za pomicanje povećava se za visinu trake za pomicanje, iako bi prema CSS specifikaciji zadane dimenzije trebale uključivati ​​i trake za pomicanje.

Firefox 3.6 pogrešno primjenjuje preljev na grupe ćelija tablice ( , , ).

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - Ovu specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da je u skladu s njegovim ciljevima, ali je za implementaciju standarda potrebna pomoć razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - U ovom trenutku dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt – zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon uređivanja od strane urednika projekta.
• Nacrt ( Nacrt specifikacije) je prvi nacrt standarda.

×
3. Forsiranje okomitog i horizontalnog pomicanja u CSS bloku
4. Primjer pomicanja div bloka

U ovom članku analizirat ćemo pitanje stvaranja bloka (div) fiksne veličine s mogućnošću vodoravnog i okomitog pomicanja. To se može učiniti pomoću CSS-a. Odgovoran za ovo svojstvo preljeva.

O preljevu korisnog svojstva

Vlasništvo prelijevanje odgovoran je za prikaz sadržaja blok elementa. Može se koristiti kada sadržaj ne stane u potpunosti i prelazi područje bloka.

preljev-x- odgovoran je za horizontalno prikazivanje sadržaja blok elementa.
prelijevati-y- odgovoran je za vertikalni prikaz sadržaja blok elementa.

CSS kod

Prokrutka (
preljev: auto; / * svojstvo za vodoravno pomicanje. Automat ako je sadržaj veći od bloka * /
}

Svojstva i vrijednosti preljeva

vidljivo- prikazuje cijeli sadržaj elementa, čak i izvan navedene širine.
skriven- prikazuje se samo područje unutar elementa, ostalo je skriveno.
svitak- prisilno dodana horizontalna (y) ili horizontalna (x) traka za pomicanje.
auto- horizontalna traka za pomicanje se automatski dodaje ako je blok manji.

Razmotrimo primjer CSS klase. U širini i visini postavljamo željenu širinu i visinu bloka (sadržaj bloka neće ići dalje od njih), a uz svojstvo overflow: auto; postavite vodoravno pomicanje ako je potrebno

CSS kod

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


preljev: auto; / * svojstvo za vodoravno pomicanje. Automat ako ima više bloka * /
}

Prisilno pomicanje u CSS bloku

Također možete prisilno pomicati po visini i širini. Da biste to učinili, svaka os: overflow-y: pomicanje; (okomito) overflow-x: pomicanje; (horizontalno) navodimo parametar pomicanja, prisilno pomicanje.

HTML i CSS kod

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


}

Primjer bloka div pomicanja

HTML i CSS kod

Jedna od nekretnina prelijevanje može se ukloniti, tada će biti pomicanja samo duž jedne osi, što je sasvim dovoljno.
Pogledajte rad skripte Na primjer ispod.