float bounds. Float i clear su CSS svojstva za plutajuće elemente u blok rasporedu. Kako Flexbox radi

Svaki atribut, sa izuzetkom logičkih vrednosti, ima vrednost koja je jedna od sledećih tipova: ključna reč, string, adresa, broj, procenat, kod jezika. Ovo nisu sve vrste, ali najčešće.

Ključna riječ

Neki atributi imaju rezervirane vrijednosti zvane "ključne riječi". Na primjer, vrijednost atributa tipa elementa definira tip elementa forme. Ispod stavke kreira dugme.

Ključne riječi podliježu specifikaciji, lista njihovih vrijednosti je ograničena i ne može se proizvoljno mijenjati.

Linija

Niz je tekst stavljen u dvostruke ili jednostruke navodnike.

Navodnici definiraju početak i kraj stringa, tako da se isti navodnici ne mogu dodati unutar stringa. Na primjer, sljedeći red koristi pogrešnu kombinaciju navodnika.

Da biste ispravno napisali niz sa internim navodnicima, postoji nekoliko opcija.

1. Izbjegavanje unutrašnjeg navodnika ovako - \". U ovom slučaju, pretraživač ga više neće percipirati kao navodnik, već se smatra znakom.

2. Koristite kombinaciju jednostrukih i dvostrukih navodnika.

Ovdje je niz u atributu title stavljen u jednostruke navodnike, tako da možemo sigurno pisati unutar dvostrukog navodnika.

Sve ovo radi na isti način za pojedinačne navodnike.

Adresa

Adresa je put do dokumenta, kao što je grafička datoteka. Adresa je potrebna u slučajevima kada se napravi link ka nekoj stranici, drugoj web stranici ili se preuzme određena datoteka. Na primjer, u elementu adresa se koristi kao vrijednost atributa src, specificira putanju do datoteke slike.

Razlikujte apsolutne i relativne adrese.

Apsolutne adrese

Takve adrese funkcionišu svuda i svuda, bez obzira na naziv sajta ili web stranice na kojoj je adresa data i uvek počinju sa protokolom za prenos podataka. Za web stranice, ovo je obično HTTP (HyperText Transfer Protocol), tako da apsolutne adrese počinju ključnom riječi http://. Primjer 1 pokazuje vezu koja koristi apsolutnu adresu.

Primjer 1: Upotreba apsolutne adrese u linku

Veza

Google

Pored HTTP protokola, postoji i siguran HTTPS protokol. Nije uvijek očito koji se protokol koristi na stranici, tako da se može u potpunosti izostaviti u adresi veze. U ovom slučaju, adresa će biti napisana ovako:

Google

Apsolutne adrese se prvenstveno koriste za upućivanje na drugi mrežni resurs i rijetko se koriste za interne veze.

Relativne adrese

Relativne adrese su specificirane iz korijena stranice ili trenutnog dokumenta. Na primjer, kod znači preuzimanje grafičke datoteke pod nazivom pic.png, koja se nalazi u istom folderu kao i sama web stranica. Pogledajmo neke primjere takvih adresa.

/
Adresa obično ukazuje na datoteku index.html, koja se nalazi u korijenu stranice. Ako nema datoteke index.html, pretraživač će obično prikazati listu datoteka u tom direktoriju. Ime datoteke ne mora biti index.html, ovaj parametar se mijenja kroz postavke web servera - to je naziv programa koji analizira zahtjeve koji dolaze iz pretraživača i šalje mu dokumente prikazane korisniku.

/images/pic.png
Crtica (/) ispred adrese označava da adresiranje počinje od korijena stranice. Veza vodi do datoteke pic.png koja se nalazi u folderu slika. A to se, zauzvrat, nalazi u korijenu stranice.

../help/me.html
Dve tačke ispred imena govore pretraživaču da se podigne za jedan nivo na listi direktorijuma sajta i da tamo "pretraži" u folderu pomoći datoteku koja se zove me.html.

priručnik/info.html
Ako nema dodatnih znakova ispred naziva fascikle, kao što su tačke ili crtice, tada se fascikla nalazi unutar trenutne fascikle, a info.html datoteka je već u njoj.

URL-ovi koji se odnose na korijen stranice kao što je /demo/ rade samo pod kontrolom web servera i nisu primjenjivi na lokalnom računalu.

Linkovi

Pogledaj moju fotografiju!

Kako snimiti istu fotografiju?

Ponekad možete pronaći adrese u obliku ./file/doc.html. Tačka ispred znači da je odbrojavanje iz trenutnog foldera. Takav unos je suvišan i može se skratiti na file/doc.html.

Brojevi

Brojevi se sastoje od brojeva od 0 do 9; za negativne brojeve, ako je potrebno, ispred se stavlja znak minus (-45). Primjer 3 pokazuje upotrebu brojeva kao vrijednosti atributa.

Primjer 3: Korištenje brojeva

Brojevi

Temperatura vode

Nisko Normalno vruće Ključala voda

Osim cijelih brojeva, dozvoljeno je koristiti decimalne razlomke, dok su cijeli broj i razlomak odvojeni jedan od drugog točkom - 36,6, kao što je prikazano u primjeru 4.

Primjer 4. Razlomci

ulaz, max atribut

Interes

Procentualna notacija vam omogućava da se povežete sa veličinom roditeljskog elementa i postavite veličinu u odnosu na njega. Pretpostavimo da imamo sljedeći kod:

Element nalazi se unutra

Stoga element

će biti roditelj . Vrijedi i obrnuto - element je dijete od

Shodno tome, u ovom slučaju širina slike u procentima se izračunava iz nadređenog pasusa, koji po defaultu zauzima sav slobodni prostor prozora po širini.

Pretraživač razumije da govorimo o procentima ako se iza broja doda simbol %, na primjer: width="40%" .

Primjer 5 prikazuje kod web stranice u kojem je širina slike naznačena u postocima.

Primjer 5. Dimenzije slike u procentima

Slika

Rezultat ovog primjera prikazan je na sl. 1. Širina slike je postavljena na 100%, tako da zauzima punu širinu prozora pretraživača. Visina nije navedena i automatski je izračunava pretraživač.

Rice. 1. Veličina slike u procentima

Prednost procentualnog zapisa je u tome što se veličina slike mijenja sa širinom prozora pretraživača i ne ostaje statična. Nedostaci uključuju pogoršanje kvaliteta slike kada je jako rastegnuta.

Kod jezika

Živimo u eri globalizacije, kada web stranice sadrže tekstove na različitim jezicima. Pokazati tražilice, na kojem jeziku je tekst napisan i postavite svoja podešavanja različitim jezicima(vrste citata, na primjer) i jezik teksta je naznačen kao kod. Atribut lang se koristi za postavljanje jezika (primjer 6).

Primjer 6: Upotreba atributa lang

jezik

Fraza na francuskom

Je n "ai pas mange depuis six jours

U ovom primjeru, cijela stranica je postavljena na ruski sa atributom lang postavljenim na ru. Da bi se pokazalo da se jezik primjenjuje na cijelu stranicu, elementu se dodaje atribut . Za francuski tekst, elementu se dodaje lang atribut sa vrijednošću fr

Važeće vrijednosti atributa lang možete pronaći na ovoj stranici.

Opis

Određuje na kojoj će se strani element poravnati, s drugim elementima koji se omotavaju oko njega na drugim stranama. Kada je vrijednost svojstva float none , element se prikazuje na stranici kao normalan, dok se dopušta da jedan red prelamajućeg teksta bude na istoj liniji kao i sam element.

Sintaksa

float: lijevo | desno | nijedan | nasljediti

Vrijednosti

lijevo Poravnava element ulijevo, a svi ostali elementi, poput teksta, premotavaju ga udesno. desno Poravnava element udesno, a svi ostali elementi se omotavaju oko njega lijevo. none Prelamanje elemenata nije postavljeno. inherit Nasljeđuje vrijednost roditelja.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

float

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril dolore delenit aure te feue.

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Korištenje svojstva float

Objektni model

document.getElementById("elementID ").style.styleFloat

document.getElementById("elementID ").style.cssFloat

Pregledači

Internet Explorer 6 ima grešku sa udvostručavanjem vrednosti levog ili desnog dopuna za plutajuće elemente ugnežđene unutar nadređenih elemenata. Ispuna koja se nalazi uz stranu roditelja je udvostručena. Problem se obično rješava dodavanjem display: inline plutajućem elementu. Ovaj pretraživač takođe dodaje 3px padding (tzv. "tripiksela greška") u smeru određenom float vrednošću.

Internet Explorer do verzije 7.0 ne podržava naslijeđenu vrijednost.

Duga saga o pisanju članka o "float" svojstvu je završena. Iako je trebalo dosta vremena, mislim da sam uspio što jasnije spojiti svu raznolikost ponašanja ovog moćnog i pomalo čudnog svojstva u jedan zajednički sistem.

Osim toga, ovaj članak sadrži rekordan broj ilustracija među cjelokupnim "Udžbenikom" :-)

Sudbina svojstva "float" u CSS-u pomalo je slična sudbini oznake "table" u HTML-u: ni jedno ni drugo nije bilo zamišljeno kao sredstvo za kreiranje kolona i općenito postavljanje elemenata. Međutim, zbog određenih nesavršenosti mehanizma za pozicioniranje, plovci se široko koriste u tu svrhu. A činjenica da je izmišljen za drugog često se manifestuje raznim neočiglednim efektima. Međutim, prije nego što ih pokažem, ipak ću vam reći kako je float Može prijaviti se za izgled.

Na samom početku - mala napomena o terminima. Ne postoji poznat naziv za ovaj instrument na ruskom (barem ne još). Stoga, radije ga pišem u izvornom pravopisu - "float". Čita se nešto poput "float" (ne morate lomiti svoje jagodice izgovorom "float"). Istovremeno, odmah vas molim da mi oprostite takve slobode kao što su "lebdi" to, "lebdi" pile itd. :-)

Princip rada

Kao i pozicioniranje, float se koristi za pomicanje kutija. Ali za razliku od pozicioniranja, koje može pomjerati kutije gotovo proizvoljno, sve što plutajući može učiniti je pomjeriti element na bilo koju stranu toka, desno ili lijevo.

Istovremeno, sama kutija i oni koji je prate u streamu dobijaju zanimljivo ponašanje:

Float" Kutija lebdi vodoravno i drži se jedne strane svog roditelja.
Float" kutija sa maticom više nije raspoređena na cijelu širinu kutije roditeljskog kontejnera (kao što se dešava sa blokovima u toku). Kada njegova slobodna strana nije pritisnuta na roditelj, pojavljuje se slobodan prostor.
prateći ga blok kutije se podižu i zauzimaju svoje mjesto, kao da plutajuća kutija nije u potoku.
Mala slova kutije unutar blokova koji su se pomaknuli prema gore počinju teći oko plivajuće "kutije sa slobodne strane.

Želim još jednom naglasiti stvar koja nije odmah očigledna: sama kutija bloka koji prati plovak zavlači se ispod njega i zauzima cijelu širinu toka, ali se tekst unutar ovog bloka pomiče u stranu i premotava oko float.

Nadalje, zanimljivo je kako se float "kutije koje idu u jednom smjeru ponašaju jedna za drugom. U ovom slučaju, sljedeći okvir će pokušati da stane na stranu prethodne, na njegovu slobodnu stranu. I samo ako nema dovoljno prostora za njega, onda će se pomeriti ispod i pokušaće da stane već tamo.

Postoji još jedan mali tehnički aspekt, koji nije neophodan za razumijevanje cijele "mehanike". Možete float i blok boksove i one inline.U isto vrijeme, inline boksovi odmah automatski postaju blok boxovi.Odnosno, pisanje display:blok, jer float nije potrebno.

Iz dvije opisane karakteristike float "s-a - pritiskanje na ivicu i spajanje jedno uz drugo - slijede dvije njihove glavne primjene u rasporedu:

dijeljenje stranice na kolone
horizontalni meniji

zvučnici

Kolone su kada su blokovi teksta jedan pored drugog i imaju istu visinu.

Razmotrit ću sve izglede kolona na sljedećem jednostavnom HTML kodu sa dva bloka:

...

Odmah treba reći da je pravljenje stupaca u kontejneru koji se proteže u širinu teže nego sa datom širinom. Postoje dva fundamentalno različita pristupa, pogodna za različite slučajeve.

Proporcionalna širina

Ako želite da se širina kolona mijenja proporcionalno kada se širina stranice promijeni, pristup je sljedeći:

#content ( float:desno; širina:70%; ) #sidebar (float:left; width:30%; )

Odnosno, dva float bloka" nalaze se jedan pored drugog u različitim smjerovima, a njihova širina je podijeljena u željenom postotku. Ova metoda olakšava zamjenu stupaca - samo promjenom desne i lijeve vrijednosti.

Istezanje samo jedne kolone

Ako trebate promijeniti samo širinu glavnog stupca, prethodna metoda nije prikladna. Činjenica je da je u CSS-u to, nažalost, nemoguće direktno da se formuliše nešto kao "sva dostupna širina minus određeni broj".

Hajde sada da se okrenemo jednom od prethodnih članaka o blokovima u toku, gde sam spomenuo jednu od njihovih korisnih karakteristika za automatsko uklapanje u širinu roditeljskog okvira. Odnosno, ako je bloku u toku naprijed data, recimo, lijeva margina, tada će se njegova širina smanjiti u skladu s tim. A upravo to je ponašanje koje smo željeli postići iz jedne od kolona.

Dakle, za efekat koji želimo, daćemo glavnom bloku lijevu marginu tako da se skupi udesno, a bočna traka lebdi na mjestu:

#sidebar (float:left; width:200px; ) #content ( margin-left:200px; )

Ali druga metoda ima jedan vrlo ozbiljan nedostatak. Imajte na umu da u originalnom HTML-u ide blok "sidebar". prije blok "sadržaj" sa glavnim sadržajem. Ne treba misliti da je to slučajno :-). To je učinjeno namjerno, jer inače ova druga metoda sa preklapanjem kolone na vrhu margine ne bi funkcionirala.

Kao što sam napisao na početku članka, plovci se pomiču samo u stranu i prave mjesta za sljedeće blokove koji se pomiču gore. Stoga je važno da je "bočna traka" već na vrhu, a onda će glavni blok voziti Ako "bočna traka" dođe iza glavnog bloka, onda će ostati niža i neće izgledati kao ni jedna kolona.

Ovo je zaista loše jer podriva jednu od glavnih ideja CSS-a: odvajanje stila od sadržaja. Ispostavilo se da smo samo htjeli promijeniti dizajn, a ako se blokovi nalaze "pogrešno", onda ćemo morati ići u HTML šablone. Osim toga, sa stanovišta strukture, mogu postojati dobri razlozi da se blokovi rasporede na jedan, a ne na drugi način. Na primjer, tako da korisnik može početi čitati glavni tekst stranice bez čekanja da se navigacija učita.

fiksna širina

Stvari su dramatično pojednostavljene kada se kolone uklope u kontejner fiksne širine. U ovom slučaju najbolje je koristiti prvi metod (float" sve kolone), a širina se već može podesiti ne samo u procentima, već u bilo čemu što želite, jer se može tačno izračunati.

Visina zvučnika

Opet, daleko od toga da sam "odrezao" donji dio blokova na slikama :-). U suprotnom, oni uopće ne bi izgledali kao stupci, jer, kao što vidite, ako primijenite CSS fragmente koje sam dao i obojite stupce različitim bojama, onda će njihova visina biti drugačija. Zavisi od količine sadržaja u ovim blokovima.

Ovaj ružni efekat se može zaobići na nekoliko načina.

Prva metoda se zove "Faux columns", objavljena u autoritativnom web magazinu A List Apart u septembru 2004. godine i od tada je veoma popularna. Preporučujem svima da pročitaju ili original ili prevod na ruski. Međutim, ako danas niste raspoloženi da kliknete, evo kratkog sažetka njegove suštine.

Umjesto dodjeljivanja pozadine samim stupcima, oni su ostavljeni transparentni, ali njihovom kontejneru je dodijeljena pozadinska slika koja je širina cijelog kontejnera i koja se ponavlja okomito. Naslikani su dijelovi ove slike, smješteni ispod različitih stubova različite boje i kada se ponavlja naniže daje željeni vizuelni efekat.

Ono što je sjajno kod lažnih kolona je to što se ne morate ograničavati na čvrste boje na pozadinskoj slici. Na njemu, na primjer, možete nacrtati efekt sjene između stupova, ponavljajući horizontalne pruge kao pozadinu, ornament duž rubova.

Nedostatak ove metode je u tome što pozadinska slika ima samo jednu veličinu, ne može se koristiti za proporcionalno rastezanje kolona, jer se slika neće rastezati. Ali za slučaj kada je jedna od kolona fiksna po širini, pozadina se može podesiti (ovaj se slučaj, inače, ne razmatra u "Faux columns").

Poenta je da se pozadinska slika postavi samo ispod kolone čija je širina poznata. Ostatak prostora će zauzeti pozadina boja kontejner, a ne slika.

Uzmimo naš primjer i napravimo kolonu "sidebar" na desnoj širini od 200 piksela, a "sadržaj" neka bude rastegnut. Za "bočnu traku" pripremit ćemo sliku dimenzija 200x1, na primjer, ravnomjernu plavu nijansu. A pod "sadržaj" ćemo uzeti žućkasto.

U stilovima to izgleda ovako:

#bočna traka ( float:right; width:200px; ) #content ( margin-right:200px; ) body ( background:url(bg.png) #FFD desno gore repeat-y; )

Jedino pravilo za kontejner (tijelo) specificira svo pozadinsko ponašanje:

navedite URL slike (bg.png)
boja pozadine na mjestima gdje je neće biti (#FFD)
položaj slike pritisnut na desnu ivicu (desno gore)
ponovi sliku prema dolje (repeat-y)

IN pravi primjer CSS je takođe imao nekoliko pravila za boju slova i postupanje sa ivicama, koja su sada irelevantna.

Drugi način za izjednačavanje stupova po visini bio je nedavno opisan i već dobro poznat zbog svoje pogodnosti.

Ideja iza toga je da se sakriju nejednake visine kolona tako što ih se nevjerovatno protežu prema dolje, tako da su njihovi krajevi izvan stvarnog sadržaja stranice. Oni to postižu tako što prvo stave veoma veliko uvlačenje (odmak) na kolone, koje je obojeno bojom pozadine. I da se ostatak sadržaja ne pomakne predaleko tamo, kolone su dodijeljene negativan obrub (margina) iste veličine:

Čudan broj je zbog činjenice da je to maksimum koji Safari pretraživač može dozvoliti. To zapravo i nije tako čudno. Za svakoga ko se pita, ovo je maksimalni predpisani cijeli broj kada je predstavljen sa 16 bitova.

Kao rezultat, sve što slijedi nakon stupaca je pomaknuto i nalazi se direktno ispod sadržaja najdužeg od njih, a stupci su prošireni prema dolje. Jedna stvar je ružna – zbog dugih kolona i sama stranica postaje isto tako duga. Da biste se borili protiv ovoga, morate postaviti svojstvo overflow:hidden na njihov kontejner, što prisiljava kontejner da jednostavno odsječe i ne prikazuje ono što prelazi njegove granice.

Moj primjer, koji sam uzeo na samom početku, ima, međutim, jednu prepreku. Tu stubovi leže pravo u telu. A ako je tijelo postavljeno na overflow:hidden , tada pretraživači potpuno otkazuju pomicanje stranice. Čak i ako je pravi sadržaj iznad prozora. Stoga, kolone moraju biti umotane u drugi element, kao što je div. Ali pošteno rečeno, mora se reći da su u praksi kolone već umotane u nešto.

Zasjeda

Gde bez toga :-). Kao što sam ne baš transparentno nagovijestio na samom početku, pošto plovci nisu izmišljeni kao sredstvo za stvaranje stupaca, ovo će definitivno ispasti nešto ružno i vratiti se da proganja povećanje potrošnje analgina (neki preferiraju tempalgin ili paracetamol) .

I "izlazi" - u pravom smislu. Pomaknimo naš "goli" primjer malo bliže stvarnosti dodavanjem zaglavlja iznad kolona i nekog bloka s tekstom ispod.

...

Radi jednostavnosti, odabrat ćemo jednostavan stupčasti dizajn s fiksnom širinom. Zaglavlje i donji blok napravimo plavim bijelim slovima, glavni sadržaj je bijel, a dodatna kolona je također plava, ali malo svjetlija. Postavićemo boje za kolone koristeći metodu "Faux columns".

/* Izgled kolone */ body ( širina:600px; margin:0 auto; ) #content (float:left; width:450px; ) #sidebar (float:desno; širina:150px; ) /* Boje */ #main ( background:url(bg.png) desno gore repeat-y; ) #header, #footer ( background:#238; color:white; )

Opet sam izostavio sve uvlake i fontove radi lakše percepcije. Dodajte tekst testa i pokrenite:

Hm... Pa, kolone se, generalno, čak i vide! Ne suzdržavajte se! Međutim, kako god da se kaže, ne izgleda sve kako je planirano, a može se čak reći da se sve pretvorilo u neku vrstu zbrke od cveća i pisama.

Da bismo razumjeli zašto se to događa, moramo se sjetiti opisa kako float funkcionira. Naime, da blokovi koji prate plovke prestanu da primećuju ove plovke i da se povlače prema gore. Štoviše, sam kontejner, u kojem se nalaze plovci, također ih prestaje primjećivati, a plutajući blokovi padaju kroz dno kontejnera ako se završi ranije.

Pogledajmo sada naš kod. I float "content" i "sidebar" blokovi su unutar "glavnog" bloka. I nema ništa drugo u "main". A pošto nema više šta da sadrži, njegova visina pada na nulu! Stoga, ne možete vidjeti bilo koja bijela na slici pozadina "sadržaja", niti svijetloplava pozadina "bočne trake", jer su te boje dodijeljene kao "glavna" pozadina.

Dalje - "podnožje". On, poštujući isto pravilo, takođe ne vidi plutajuće "blokove matica i povlači se direktno do samog naslova (pošto je "glavni" nula visina). Ali u "podnožju" postoji tekst. Ovaj tekst bi već trebao omotajte float "s: na desnoj "sadržaj" i na lijevoj "bočnoj traci". Između kolona nema razmaka, tako da tekst može početi samo ispod jedne od kolona koja se prva završava. Eno ga. Dakle, "podnožje" se povlači gore ispod naslova i nastavlja dolje dok sav njegov tekst ne nestane. I sva ova plava pozadina koja je ispod naslova je "podnožje" i jeste.

Zašto takva složenost

Opisano ponašanje bi trebalo da izazove zbunjenost. Zašto je bilo potrebno smisliti takve komplikacije: podijeliti koncept bloka tako da su boje i okviri na vrhu, a tekst na svom mjestu? Ali naravno da ima smisla. Ovo, zajedno sa kolapsom granica, predstavlja pokušaj da se CSS model okvira ponaša normalno u uslovima jednostavnog toka teksta. Detaljno klasično objašnjenje ovog fenomena daje isti Eric Meyer u članku "Containing Floats" (na engleskom). Pokušaću da ukratko prenesem suštinu.

Zamislite normalan tok pasusa - blokova teksta - bez ikakvog pozicioniranja. U jednom od pasusa nalazi se slika koju želite da pomerite, recimo, ulevo tako da tekst teče oko nje. Ovo je ranije postignuto u HTML-u sa svojstvom align="left", ali u duhu premještanja stila iz HTML-a u stilove, za ovu funkciju, upravo su osmislili svojstvo float. To jest, umjesto poravnanja ovoj slici je dodijeljen float:left .

Neka pomaknuta slika zauzima više visine od teksta pasusa. Ako ona rastegne svoj pasus i gurne početak sljedećeg niže, onda će to izgledati ružno zbog povećanog razmaka između susjednih pasusa. Dakle, propada kroz sve ivice blokova, držeći lijepe uvlake između njih, a tekst teče oko njega.

Rješenja

Dakle, ponašanje propadanja je razumljivo, ali je zgodno za nepozicionirani tekst, a prilično je nezgodno za raspored. Postoje dva pristupa koja eliminišu obje manifestacije ovog svojstva: povlačenje sljedećih kutija prema gore i padanje kroz dno kontejnera.

Postoji posebno svojstvo za eliminisanje povlačenja blokova - čisti. To tjera element da se pomiče prema dolje sve dok na njegovoj strani ne preostane plutača. Štaviše, možete kontrolirati s koje strane ne bi trebalo biti plutača:

jasno:lijevo osigurava da nema plutajućih na lijevoj strani clear:desno osigurava da nema plutajućih na desnoj strani clear:oba osigurava da nema plutajućih na obje strane

Dakle, ako našem "podnožju" kažemo:

#footer (jasno:oba; )

Tako da nema plutajućih kolona lijevo i desno od njega, pomjeraće se dolje upravo tamo gdje se oba završavaju.

Ali to ne rješava drugi problem: to plutajuće pada kroz "glavni" i kolabira, ostavljajući pozadinu kolone koja mu je dodijeljena nevidljivom.

Možete eksplicitno pozicionirati kontejner na neki način. Koliko ja razumijem logiku specifikacije, ponašanje prelaska na grešku se smatra logičnim samo u jednostavnoj niti. U drugim slučajevima, to samo stane na put. I tako je, kao što smo videli. Odnosno, dovoljno je dodijeliti kontejneru, na primjer, poziciju: absolute ili float: lijevo, i ništa neće propasti, kontejner će u potpunosti sadržavati i tekst i float. U našem slučaju (iu većini slučajeva, po način) ovo rješenje je sasvim prikladno.

Drugi zanimljiv način je povezan sa nuspojavama svojstva prelivanja. Sam po sebi, ima za cilj da odredi kako će se kontejner preliti kada ne može sadržati svoj sadržaj. Ima četiri značenja:

Vidljivi sadržaj ide preko ivice i normalno je vidljiv (ovo je zadano ponašanje) skriveni sadržaj je odsječen izvan spremnika i nije vidljiv tamo ni na koji način automatski ako sadržaj prelije kontejner, ima traku za pomicanje koja vam omogućava pomicanje sadržaj, ako nije, ne pojavljuje se pomicanje kao auto , samo kontejner uvijek ima traku za pomicanje, čak i kada je sadržaj ne prelije

Pa evo nuspojava je da ako stavite bilo kakav preljev na kontejner, osim uobičajenog vidljivog, on se odjednom rasteže i uključuje plovke koji sjede u njemu, eliminirajući kolaps.

Kakav preliv koristiti? Scroll odmah nestaje - uvijek viseće trake za pomicanje očigledno nisu potrebne. Ono što ostaje je auto i hidden, koji se razlikuju samo po tome da li se traka za pomicanje pojavljuje na prelivu ili ne. Ali nemamo nikakvog prelijevanja, naprotiv, ovim svojstvom smo natjerali kontejner da se dalje rasteže tako da pokrije sve svoje elemente. Stoga se može koristiti bilo koja vrijednost.

Praznoverno pokušavam da koristim skriveno kako se trake za pomeranje ne bi pojavile ako zbog nekih grešaka iznenada dođe do prelivanja.

Rešenje za prelivanje ima jednu prepreku koja se odnosi na ponašanje Some Browser™. Radi samo ako je kontejneru eksplicitno dodijeljena širina ili visina. Zbog toga ih je ponekad nezgodno koristiti kada su vam potrebne automatske veličine, a ne krute.

Dakle, na kraju, da popravimo naš primjer sa stupcima, moramo učiniti ovo:

#main ( širina:100%; overflow:hidden; )

Između ostalog! Da nisam koristio lažne stupce za crtanje pozadine ispod kolona, već metodu dugog dodavanja, onda bi zahtijevao koristite overflow:hidden za "main", što takođe rešava problem propadanja. Ali kako bih onda govorio o tome?

To je to sa zvučnicima... Vrijeme je da odete sipajte sebi ukusan čaj (mnogi više vole kafu) i dodajte mu neki ukusni muffin, pauzirajte da ubacite sav ovaj nered u glavu. Zatim, čekamo mali dodatak - o jelovniku.

Meni

Podsjetim vas da ako nekoliko uzastopnih blokova lebdi u jednom smjeru, onda će svaki sljedeći pokušati da se proširi sa slobodne strane prethodnog.Ovaj efekat se široko koristi za pretvaranje lista sekcija sajta u horizontalne menije.

Uzmimo ovu listu:

Počni
Katalog
Basket
Referenca

Da bi izgledao kao meni, potrebno je da plutate "sve li na lijevoj strani, uklonite atribute liste iz njih (uvlake i oznake) i dodate uvlake, pozadinu i okvir za ljepotu:

/* raspored */ ul, li ( float:left; list-style:none; margin:0; padding:0; ) /* pogled */ li ( padding:2px 10px; font:Bold Small Tahoma; background:#35C ; boja:bijela; ivica:puna 1px; boja obruba:#46F #238 #238 #46F; ) a ( boja:bijela; dekoracija teksta:nema; )

Imajte na umu da su sva svojstva izgleda dodijeljena i ul i li elementima. Zgodno je ovo svesti na jedno pravilo, jer:

float:left je potreban za elemente liste kako bi se širili horizontalno, a za samu listu da elementi ne propadaju kroz nju;
nulta margina i padding eliminišu dopune koje pretraživači rade za liste prema zadanim postavkama, ali oni to rade veoma različito, tako da je lakše reći "sve je nula" nego zapamtiti šta treba staviti zasebno za koji element.

Moral

Mehanizam za plutanje je još jedan alat za raspored zajedno sa apsolutnim pozicioniranjem.

Oni se razlikuju na bolje, što vam omogućava da element ostavite u toku, što je vrlo zgodno za raspored kolona.

Međutim, on ima nedostatke što je manje fleksibilan zbog činjenice da se elementi ne mogu proizvoljno pomicati i zato što mogućnost njegove upotrebe može ovisiti o redoslijedu elemenata u HTML oznaci.

Ovaj članak dio je ciklusa koji je u procesu pisanja pod radnim naslovom "Udžbenik". Preporučujem da pročitate i druge članke koji se nalaze u kategoriji "Udžbenici", gdje su sada prikupljeni obrnutim hronološkim redom.

Već smo shvatili. Saznali smo da imaju sadržaj. Međutim, to nije sve. Oznake također imaju atribute koji proširuju njihove mogućnosti, a atributi, zauzvrat, imaju vrijednosti. Uz njihovu pomoć možete postaviti parametre za element, odrediti stil dizajna. Na primjer, oznaka

označili ste pasus. Ali kako to učiniti da bude desno? Da biste to učinili, potreban vam je određeni atribut s odgovarajućom vrijednošću. Kao što neke oznake nemaju par, tako se neki atributi mogu koristiti bez vrijednosti.

Kako napisati atribute?

Atributi su rezervirane riječi (poput oznaka, samo bez ugaonih zagrada), ali njihove vrijednosti mogu biti različite. Baš kao i oznake, vrijedni atributi se ohrabruju da se pišu malim slovima, iako pretraživače generalno nije briga - to je samo pravilo. dobre manire: na ruskom, TAKOĐER NIJE PRIHVAĆENO PISANJE SA UKLJUČENIM KAPITALIMA. Zašto je HTML lošiji?

Vrijednosti sa atributima se pišu u sljedećem formatu:

attribute=”value” lang=”en”

Atribute uvijek treba pisati unutar početne oznake, nakon rezervirane riječi.

Paragraf

Obično postoji više atributa dostupnih za jednu oznaku. Nije bitno kojim redosledom su navedeni.

Generički atributi

Svaka HTML oznaka ima svoj skup atributa. Neki atributi mogu biti dostupni na više oznaka, dok drugi mogu raditi samo na jednoj. Postoji i grupa univerzalnih (globalnih) atributa koji se mogu koristiti sa bilo kojom oznakom. Pogledajmo na brzinu atribute ove kategorije.

pristupni ključ omogućava vam da postavite prečicu na tastaturi za pristup određenom objektu stranice. Na primjer, možete to učiniti tako da koristite prečicu na tipkovnici Alt+1 korisnik je kliknuo na određenu vezu. Tako razviti navigacioni sistem tastature.

Vrijednost atributa mogu biti brojevi 0-9 ili slova latinične abecede:

Veza će se otvoriti pritiskom na prečicu na tastaturi sa jednim

klasa omogućava vam da povežete oznaku sa unapred definisanim CSS stilom. Korištenje atributa vam omogućava da značajno smanjite kod, jer umjesto ponavljanja unosa istog CSS bloka, možete jednostavno unijeti ime klase koja mu odgovara.
Korišćenjem contenteditable možete dopustiti korisniku da uređuje bilo koji element HTML stranice: izbriše, umetne, promijeni tekst. Isti atribut omogućava uređivanje i onemogućavanje. Postoje samo dvije vrijednosti: istinito- dozvoli uređivanje false- zabraniti.
Sa atributom contextmenu bilo koji element dokumenta možete podariti jedinstvenim stavkama kontekstnog menija po vašem izboru. Sam meni se kreira u tag-u , a atributu kontekstnog menija dat je njegov ID.
dir definira smjer teksta: lijevo na desno (ltr) ili s desna na lijevo (rtl).
prevlačenje dozvoljava vam da zabranite (lažno) ili dozvoliti (istinito) korisnik da povuče element stranice koji ima ovaj atribut.
zona pada govori pretraživaču šta da radi sa prevučenim elementom: copy(value kopija), premjestiti ( pokret) ili kreirajte vezu do njega (veza).
skriveno- atribut koji vam omogućava da sakrijete sadržaj elementa tako da se ne prikazuje u pretraživaču. Ako je atribut postavljen na false, objekt je prikazan, true - skriven.
id postavlja identifikator elementa - neku vrstu imena koja je potrebna za jednostavnu promjenu stila objekta, kao i da mu skripte mogu pristupiti. Vrijednost atributa će biti njegovo ime. Mora početi latiničnim slovom i može sadržavati brojeve, slova iste latinične abecede (velika i mala), kao i crtice (-) i donje crte (_) . Ruska slova ne mogu sadržavati.
jezik pomaže pretraživaču da razumije jezik na kojem je sadržaj napisan i da ga stilizira u skladu s tim (na primjer, u jezicima se mogu koristiti različiti navodnici). Vrijednosti su kodovi jezika (ruski - en, engleski - en i tako dalje.).
provjera pravopisa uključuje (istinito) ili onemogućava (lažno) provjera pravopisa. Posebno je korisno koristiti atribut u oznakama polja obrasca gdje će korisnik unijeti tekst.
stil omogućava vam da postavite izgled elementa pomoću CSS koda.
tabindex omogućava da se odredi koliko puta će korisnik morati da pritisne taster Tab da bi objekat sa ovim atributom dobio fokus. Broj klikova određuje vrijednost atributa - pozitivan cijeli broj.
naslov- tooltip koji će se pojaviti ako pomaknete miša preko elementa i ostavite ga neko vrijeme nepomično. Niz u vrijednosti će biti nagoveštaj.

prevesti dozvoljava (da) ili zabranjuje (ne) prevod sadržaja oznaka.
poravnati postavlja poravnanje elementa. Na primjer, može se koristiti za poravnavanje teksta ulijevo (vrijednost lijevo), na desnoj strani ( u pravu), centriran (centar) ili po širini (opravdati). Za slike (tag ) je također dostupan za poravnavanje na vrh najvišeg elementa u redu ( top), duž donje granice (dole), a srednja vrijednost čini da srednja linija slike odgovara osnovnoj liniji linije.

Vrijedi imati na umu da korištenje atributa poravnati ne preporučuje se, a poravnavanje teksta je bolje sa CSS-om.

Primjer korištenja atributa

Kao primjer, uzmite red HTML koda:

Ovaj tekst se može uređivati

Cijela linija stvara pasus teksta koji korisnik može uređivati u pretraživaču.

Analizirajmo svaki element niza.

- oznaku za otvaranje kontejnera u kojem se čuva paragraf.

- završnu oznaku.

Između likova > I < lociran tekst Ovaj tekst se može uređivati. Ovo je natpis izvan oznaka (između njih), što znači da će biti vidljiv korisniku koji je otvorio stranicu. Pregledač ga tretira kao običan tekst koji treba da se prikaže na ekranu.

contenteditable=”istinito” - ovo je atribut i njegova vrijednost. Zapamtite kako u školi: x=3. Isto tako i ovdje: contenteditable=”istinito". Atribut contenteditable postavlja da li će korisnik moći uređivati sadržaj elementa, vrijednost istinito, napisano u navodnicima razdvojenim znakom jednakosti, uređivanje omogućava:

Attribute=”value” contenteditable=”true”

kratke informacije

Notacija

	Opis	Primjer
<тип>	Određuje tip vrijednosti.	<размер>
A&&B	Vrijednosti se moraju ispisati navedenim redoslijedom.	<размер> && <цвет>
A \| B	Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B).	normalno \| small-caps
A \|\| B	Svaka vrijednost se može koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom.	širina \|\| count
	Grupne vrijednosti.	[ usev \|\| križ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jedan ili više puta.	<число>+
?	Navedeni tip, riječ ili grupa su opcioni.	umetnuti?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jedan ili više puta odvojeno zarezima.	<время>#

Vrijednosti

Sandbox

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutru, jer je tada doručak već odavno bio završen, a večera nije ni pomislila da počne. I, naravno, užasno mu je bilo drago kada je vidio da Zec izvadi šolje i tanjire.

img ( float: nema ; )

Primjer

float

Biheviorizam, koliko god paradoksalno izgledao, prosvjetljuje sublimirani stimulans, na primjer, Richard Bandler je koristio promjenu submodaliteta za izgradnju efikasnih stanja.

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Korištenje svojstva float

Objektni model

Objekt.style.cssFloat

Bilješka

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

Preporuka (Recommendation) - 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 je za implementaciju standarda potrebna podrška razvojne zajednice.
Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
Radni nacrt – zreliji nacrt nakon rasprave i amandmana za reviziju zajednice.
Nacrt urednika ( Urednički nacrt) je radna verzija standarda nakon što su izmene izvršili urednici projekta.
nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.