granice plovka. Float i clear su CSS svojstva za plutajuće elemente u rasporedu blokova. Kako radi Flexbox

Svaki atribut, s iznimkom booleovih, ima vrijednost koja je jedna od sljedećih vrsta: ključna riječ, niz, adresa, broj, postotak, kod jezika. Ovo nisu sve vrste, ali najčešće.

Ključna riječ

Neki atributi imaju rezervirane vrijednosti koje se nazivaju "ključne riječi". Na primjer, vrijednost atributa tipa elementa definira tip elementa forme. Ispod stavke stvara gumb.

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

Crta

Niz je tekst u dvostrukim ili jednostrukim navodnicima.

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

Za ispravno pisanje niza s unutarnjim navodnicima postoji nekoliko opcija.

1. Izbjegavanje unutarnjeg navodnika ovako - \". U ovom slučaju, preglednik ga više neće percipirati kao navodnik, već se smatra znakom.

2. Koristite kombinaciju jednostrukih i dvostrukih navodnika.

Ovdje je niz u atributu naslova zatvoren u jednostruke navodnike, tako da možemo sigurno pisati unutar dvostrukih navodnika.

Sve ovo radi na isti način za jednostruke navodnike.

Adresa

Adresa je put do dokumenta, kao što je grafička datoteka. Adresa je potrebna u slučajevima kada se napravi poveznica na mjesto, drugu web stranicu ili kada se preuzme određena datoteka. Na primjer, u elementu adresa se koristi kao vrijednost atributa src, ona navodi stazu do slikovne datoteke.

Razlikovati apsolutne i relativne adrese.

Apsolutne adrese

Takve adrese rade svugdje i svugdje, bez obzira na naziv stranice ili web stranice na kojoj je navedena adresa i uvijek počinju s protokolom prijenosa podataka. Za web stranice to je obično HTTP (HyperText Transfer Protocol), tako da apsolutne adrese počinju ključnom riječi http://. Primjer 1 prikazuje vezu koja koristi apsolutnu adresu.

Primjer 1: Korištenje apsolutne adrese u vezi

Veza

Google

Osim HTTP protokola postoji i sigurni HTTPS protokol. Nije uvijek jasno koji se protokol koristi na web-mjestu, tako da se može u potpunosti izostaviti u adresi poveznice. U ovom slučaju, adresa će biti napisana ovako:

Google

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

Relativne adrese

Relativne adrese navedene su iz korijena stranice ili trenutnog dokumenta. Na primjer, kod znači preuzeti grafičku datoteku pod nazivom pic.png, koja se nalazi u istoj mapi kao i sama web stranica. Pogledajmo neke primjere takvih adresa.

/
Adresa obično upućuje na datoteku index.html koja se nalazi u korijenu stranice. Ako ne postoji datoteka index.html, preglednik će obično prikazati popis datoteka u tom direktoriju. Naziv datoteke ne mora biti index.html, ovaj se parametar mijenja kroz postavke web poslužitelja - to je naziv programa koji analizira zahtjeve koji dolaze iz preglednika i šalje mu dokumente prikazane korisniku.

/images/pic.png
Crtica (/) ispred adrese označava da adresiranje počinje od korijena stranice. Poveznica vodi do datoteke pic.png koja se nalazi u mapi sa slikama. A to se pak nalazi u korijenu stranice.

../help/me.html
Dvije točke ispred imena govore pregledniku da se popne jednu razinu gore na popisu mapa web-mjesta i tamo "potraži" u mapi pomoći datoteku pod nazivom me.html.

priručnik/info.html
Ako prije naziva mape nema dodatnih znakova, poput točkica ili crtica, tada se mapa nalazi unutar trenutne mape, a datoteka info.html je već u njoj.

URL-ovi koji se odnose na korijen stranice kao što je /demo/ rade samo pod kontrolom web poslužitelja 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. Točka ispred znači da je odbrojavanje od trenutne mape. Takav unos je suvišan i može se skratiti u file/doc.html.

Brojke

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

Primjer 3: Korištenje brojeva

Brojke

Temperatura vode

Niska Normalan vruće Kipuća voda

Osim cijelih brojeva, dopušteno je koristiti decimalne razlomke, dok su cijeli i razlomački dio međusobno odvojeni točkom - 36,6, kao što je prikazano u primjeru 4.

Primjer 4. Razlomački brojevi

unos, max atribut

Interes

Oznaka postotka omogućuje vam vezanje uz veličinu nadređenog elementa i postavljanje veličine u odnosu na njega. Pretpostavimo da imamo sljedeći kod:

Element koji se nalazi unutra

Stoga element

bit će roditelj . Vrijedi i obrnuto – element je dijete od

U skladu s tim, u ovom slučaju, širina slike kao postotak izračunava se iz nadređenog odlomka, koji prema zadanim postavkama zauzima sav slobodni prostor prozora u širini.

Preglednik razumije da govorimo o postocima ako se nakon broja doda simbol %, na primjer: width="40%" .

Primjer 5 prikazuje kôd web stranice u kojem je širina slike navedena u postocima.

Primjer 5. Dimenzije slike u postocima

Slika

Rezultat ovog primjera prikazan je na sl. 1. Širina slike je postavljena na 100%, tako da zauzima punu širinu prozora preglednika. Visina nije određena i preglednik je automatski izračunava.

Riža. 1. Veličina slike u postocima

Prednost zapisivanja postotaka je u tome što se veličina slike mijenja sa širinom prozora preglednika i ne ostaje statična. Nedostaci uključuju pogoršanje kvalitete slike kada se jako rasteže.

Jezični kod

Ž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 svoje postavke različiti jezici(vrste citata, na primjer), a jezik teksta je naznačen kao šifra. Atribut lang se koristi za postavljanje jezika (primjer 6).

Primjer 6: Korištenje atributa lang

Jezik

Fraza na francuskom

Je n "ai pas mange depuis six jours

U ovom primjeru, cijela je stranica postavljena na ruski s 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 s vrijednošću fr

Valjane vrijednosti atributa lang mogu se pronaći na ovoj stranici.

Opis

Određuje na koju će se stranu element poravnati, s drugim elementima koji će se omotati oko njega s drugih strana. Kada je vrijednost svojstva float none , element se prikazuje na stranici kao normalan, dok dopušta da jedan redak teksta za prelamanje bude u istom retku kao i sam element.

Sintaksa

plovak: lijevo | desno | nijedan | naslijediti

Vrijednosti

lijevo Poravnava element ulijevo, a svi ostali elementi, poput teksta, prelamaju ga udesno. desno Poravnava element udesno, a svi ostali elementi omotavaju ga ulijevo. nijedan Omatanje elemenata nije postavljeno. naslijediti Nasljeđuje vrijednost roditelja.

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

plutati

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 delenit au gue duis dolore te feugat nulla facilisi.

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Korištenje svojstva float

Objektni model

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

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

Preglednici

Internet Explorer 6 ima pogrešku s udvostručenjem lijeve ili desne vrijednosti ispune za plutajuće elemente ugniježđene unutar nadređenih elemenata. Podstava koja je uz roditeljsku stranu udvostručena je. Problem se obično rješava dodavanjem display: inline plutajućem elementu. Ovaj preglednik također dodaje ispunu od 3 piksela (tzv. "bug od tri piksela") u smjeru određenom float vrijednošću.

Internet Explorer do verzije 7.0 ne podržava vrijednost nasljeđivanja.

Duga saga oko pisanja članka o imovini "float" 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 sustav.

Osim toga, ovaj članak sadrži rekordan broj ilustracija u cijelom "Udžbeniku" :-)

Sudbina svojstva "float" u CSS-u donekle je slična sudbini oznake "table" u HTML-u: nijedno uopće nije bilo zamišljeno kao sredstvo za stvaranje stupaca i općenito postavljanje elemenata. Međutim, zbog određenih nesavršenosti u mehanizmu za pozicioniranje, plovci se naširoko koriste za ovu svrhu. A činjenica da je izmišljeno za drugoga često se očituje raznim neočitim učincima. Međutim, prije nego što ih pokažem, ipak ću vam reći kako je plovak Limenka prijaviti se za raspored.

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

Princip rada

Poput pozicioniranja, float se koristi za pomicanje kutija. Ali za razliku od pozicioniranja, koje može pomicati okvire gotovo proizvoljno, sve što float može učiniti je pomaknuti element na bilo koju stranu toka, desno ili lijevo.

U isto vrijeme, sama kutija i oni koji je slijede u streamu poprimaju zanimljivo ponašanje:

Plutanje" Kutija lebdi vodoravno i drži se jedne strane svog roditelja.
Float" kutija s maticama više nije raspoređena na cijelu širinu roditeljske kutije spremnika (kao što se događa s blokovima u toku). Kada njegova slobodna strana nije pritisnuta na roditelja, pojavljuje se slobodan prostor.
slijedeći ga blok kutije se povlače 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 plutajuće kutije sa slobodne strane.

Želim još jednom naglasiti stvar koja nije odmah očigledna: sam okvir bloka koji slijedi plovak uvlači se ispod njega i zauzima cijelu širinu toka, ali tekst unutar ovog bloka pomiče se u stranu i obavija oko plutati.

Nadalje, zanimljivo je kako se jedna za drugom ponašaju plutajuće kutije koje idu u jednom smjeru. U tom slučaju, sljedeća kutija će pokušati stati na stranu prethodne, na svoju slobodnu stranu. I to samo ako nema dovoljno prostora za to, onda će se pomaknuti ispod i pokušati već tamo stati.

Postoji još jedan mali tehnički aspekt, nepotreban za razumijevanje cijele "mehanike". Možete plutati i blok okvire i one inline. U isto vrijeme, inline okviri odmah automatski postaju blok okviri. To jest, pisanje display: block; za float je nepotrebno.

Od dvije opisane značajke float "s - pritiskanje na rub i pristajanje jedno uz drugo - slijede dvije njihove glavne primjene u rasporedu:

dijeljenje stranice u stupce
horizontalni izbornici

zvučnici

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

Razmotrit ću sve rasporede stupaca na sljedećem jednostavnom HTML kodu s dva bloka:

...

Treba odmah reći da je izrada stupaca u spremniku koji se proteže u širinu teža nego sa zadanom širinom. Postoje dva bitno različita pristupa, prikladna za različite slučajeve.

Proporcionalna širina

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

#content ( float:right; width:70%; ) #sidebar ( float:left; width:30%; )

To jest, dva plutajuća bloka su jedan pored drugog u različitim smjerovima, a njihova širina je podijeljena u željenom postotku. Ova metoda olakšava zamjenu stupaca - jednostavnom promjenom vrijednosti desnog i lijevog.

Istezanje samo jednog stupca

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

Sada se okrenimo jednom od prethodnih članaka o blokovima u toku, gdje sam spomenuo jednu od njihovih korisnih značajki za automatsko uklapanje u širinu nadređenog okvira. To jest, ako je bloku u naprijed toku dana, recimo, lijeva margina, tada će se njegova širina u skladu s time smanjiti. A upravo takvo ponašanje smo htjeli postići iz jedne od kolona.

Dakle, za učinak koji želimo, dat ćemo glavnom bloku lijevu marginu tako da se smanjuje udesno, a bočna traka lebdi na svoje mjesto:

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

Ali druga metoda ima jedan vrlo ozbiljan nedostatak. Imajte na umu da u izvornom HTML-u ide blok "sidebar". prije blok "sadržaj" s glavnim sadržajem. Ne treba misliti da je to učinjeno slučajno :-). To je učinjeno namjerno, jer inače ova druga metoda s preklapanjem stupaca 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 kreću prema gore. Stoga je važno da je "sidebar" već na vrhu, a tada će glavni blok voziti do nje. Ako "sidebar" dolazi nakon glavnog bloka, tada će ostati niže i neće izgledati kao stupci.

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

fiksna širina

Stvari su dramatično pojednostavljene kada stupci stanu u spremnik fiksne širine. U ovom slučaju, najbolje je koristiti prvu metodu (float" sve stupce), a širina se već može postaviti ne samo u postocima, već kako god želite, jer se može točno izračunati.

Visina zvučnika

Opet, nije bilo slučajno da sam "odrezao" donji dio blokova na slikama :-). U suprotnom, uopće ne bi izgledali kao stupci, jer, kao što vidite, ako primijenite CSS fragmente koje sam dao i obojate stupce različitim bojama, tada će njihova visina biti drugačija. Ovisi o količini sadržaja u tim blokovima.

Ovaj ružan učinak može se zaobići na nekoliko načina.

Prva metoda nazvana je "Faux columns", objavljena u autoritativnom web magazinu A List Apart u rujnu 2004. i od tada je vrlo popularna. Preporučam svima da pročitaju ili izvornik ili ruski prijevod. No, ako danas niste raspoloženi za klikanje, evo ukratko njegove suštine.

Umjesto dodjeljivanja pozadine samim stupcima, oni su ostavljeni prozirni, ali je njihovom spremniku dodijeljena pozadinska slika koja je širine cijelog spremnika i ponavlja se okomito. Dijelovi ove slike, koji se nalaze ispod različitih stupaca, naslikani su različite boje a kada se ponavlja prema dolje daje željeni vizualni učinak.

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

Nedostatak ove metode je taj što, budući da pozadinska slika ima samo jednu veličinu, ne može se koristiti za proporcionalno istezanje stupaca, jer se slika neće rastezati. Ali u slučaju kada je jedan od stupaca fiksne širine, pozadina se može prilagoditi (ovaj slučaj, usput, nije razmatran u "Faux stupcima").

Poanta je postaviti pozadinsku sliku samo ispod stupca čija je širina poznata. Ostatak prostora će zauzeti pozadina boja spremnik, a ne slika.

Uzmimo naš primjer i napravimo "sidebar" stupac s desne strane širok 200 piksela, a "sadržaj" neka bude rastegnut. Za "bočnu traku" pripremit ćemo sliku dimenzija 200x1, na primjer, ujednačenu plavu nijansu. A pod "sadržaj" uzet ćemo žućkasto.

U stilovima to izgleda ovako:

#sidebar ( float:right; width:200px; ) #content ( margin-right:200px; ) body ( background:url(bg.png) #FFD right top repeat-y; )

Jedino pravilo za spremnik (tijelo) specificira svo ponašanje u pozadini:

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

U pravi primjer CSS je također imao nekoliko pravila za boju slova i postupanje s obrubima, koja su sada nebitna.

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

Ideja koja stoji iza toga je sakriti nejednake visine stupaca tako što će se nevjerojatno produžiti prema dolje tako da su njihovi krajevi izvan stvarnog sadržaja stranice. To postižu tako da prvo stave vrlo veliku uvlaku (padding) na stupce, koje se preboje bojom pozadine. A da ostatak sadržaja ne odmakne previše tamo, stupci su dodijeljeni negativan granica (margina) iste veličine:

Čudan broj je zbog činjenice da je to maksimum koji Safari preglednik može dopustiti. Zapravo i nije tako čudno. Za sve koji se pitaju, ovo je najveći cijeli broj s predznakom predstavljen sa 16 bitova.

Kao rezultat toga, sve što slijedi nakon stupaca je pomaknuto i nalazi se neposredno ispod sadržaja najdužeg od njih, a stupci su produženi prema dolje. Jedna stvar je ružna – zbog dugih stupaca i sama stranica postaje jednako dugačka. Da biste se borili protiv toga, trebate postaviti svojstvo overflow:hidden na njihov spremnik, što prisiljava spremnik da jednostavno odsiječe i ne prikazuje ono što prelazi njegove granice.

Moj primjer, koji sam uzeo na samom početku, ima, međutim, jednu začkoljicu. Tu stupci leže točno u tijelu. A ako je tijelo postavljeno na overflow:hidden , tada preglednici u potpunosti otkazuju pomicanje stranice. Čak i ako je pravi sadržaj iznad prozora. Stoga stupci moraju biti omotani u drugi element, kao što je div. No, pošteno radi, mora se reći da su u praksi stupci već umotani u nešto.

Zasjeda

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

I "izaći" - u pravom smislu riječi. Pomaknimo naš "goli" primjer malo bliže stvarnosti dodavanjem zaglavlja iznad stupaca i bloka s tekstom ispod.

...

Radi jednostavnosti, odabrat ćemo jednostavan stupni dizajn s fiksnom širinom. Neka zaglavlje i donji blok budu plavi s bijelim slovima, glavni sadržaj je bijeli, a dodatni stupac također plavi, ali malo svjetliji. Postavit ćemo boje za stupce pomoću metode "Faux columns".

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

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

Hmm... Pa, stupci se, općenito, čak i vide! Ne suzdržavajte se! No, kako god se govorilo, ne izgleda sve onako kako je planirano, a može se čak reći da se sve pretvorilo u svojevrsnu zbrku cvijeća i slova.

Da bismo razumjeli zašto se to događa, moramo se sjetiti opisa kako float radi. Naime, blokovi koji slijede plovke prestanu primjećivati te plovke i povlače se prema gore. Štoviše, sam spremnik, u kojem se nalaze plovci, također ih prestaje primjećivati, a blokovi plovka padaju kroz dno spremnika ako završi ranije.

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

Dalje - "podnožje". On, pridržavajući se istog pravila, također ne vidi plutajuće "blokove matice i povlači se izravno do samog naslova (budući da je "main" nula visine). Ali u "podnožju" postoji tekst. Ovaj bi tekst već trebao omotati oko plutajućih "s": na desnoj "sadržaj" i na lijevoj "sidebar". Nema razmaka između stupaca, tako da tekst može započeti samo ispod jednog od stupaca koji prvi završava. Evo ga. Dakle, "podnožje" se povlači ispod naslova i nastavlja prema dolje dok sav njegov tekst ne nestane. I sva ova plava pozadina ispod naslova je "podnožje" i jest.

Zašto takva složenost

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

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

Neka pomaknuta slika zauzima više visine od teksta odlomka. Ako ona rastegne svoj odlomak i gurne početak sljedećeg niže, tada će izgledati ružno zbog povećanog razmaka susjednih odlomaka. Stoga pada kroz sve granice blokova, zadržavajući lijepe udubine 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 koji eliminiraju obje manifestacije ovog svojstva: povlačenje sljedećih kutija prema gore i padanje kroz dno posude.

Postoji posebno svojstvo za eliminiranje povlačenja blokova - jasno. To tjera element da se pomiče prema dolje sve dok na njegovoj strani više ne ostane nijedan plovak. Štoviše, možete kontrolirati s koje strane ne bi trebao biti plovak:

clear:left osigurava da na lijevoj strani nema plovaka clear:right osigurava da na desnoj strani nema plovaka clear:both osigurava da nema plovaka na obje strane

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

#footer ( jasno:oba; )

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

Ali to ne rješava drugi problem: ti plovci padaju kroz "main" i on se kolabira, ostavljajući pozadinu stupca koja mu je dodijeljena nevidljivom.

Spremnik možete eksplicitno postaviti na neki način. Koliko ja razumijem logiku specifikacije, ponašanje prelaska u grešku smatra se logičnim samo u jednostavnoj niti. U drugim slučajevima samo smeta. I tako je, kao što smo vidjeli. Odnosno, dovoljno je dodijeliti spremniku npr. poziciju: absolute ili float: lijevo i ništa neće propasti, spremnik će u potpunosti sadržavati i tekst i floate. U našem slučaju (i u većini slučajeva, po način) ovo rješenje je sasvim prikladno.

Još jedan zanimljiv način povezan je s nuspojavom svojstva overflow. Sam po sebi, namijenjen je određivanju kako će se spremnik preliti kada ne može sadržavati svoj sadržaj. Ima četiri značenja:

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

Dakle ovdje nuspojava je da ako stavite bilo koji preljev na spremnik, osim uobičajenog vidljivog, on se odjednom rasteže i uključuje plovke koji se nalaze u njemu, eliminirajući kolaps.

Koju vrstu preljeva koristiti? Pomicanje odmah nestaje - jasno je da stalno viseće trake za pomicanje nisu potrebne. Ono što ostaje je auto i hidden, koji se razlikuju samo po tome hoće li se traka za pomicanje pojaviti pri prelijevanju ili ne. Ali nemamo nikakav preljev, naprotiv, ovim smo svojstvom natjerali posudu da se dodatno rasteže tako da pokrije sve svoje elemente. Stoga se može koristiti bilo koja vrijednost.

Praznovjerno pokušavam koristiti skriveni kako se ne bi pojavile trake za pomicanje ako zbog nekih grešaka iznenada dođe do prelijevanja.

Rješenje za preljev ima jednu smetnju koja se odnosi na ponašanje Some Browser™. Radi samo ako je spremniku eksplicitno dodijeljena širina ili visina. Zbog toga ih je ponekad nezgodno koristiti kada trebate automatske veličine umjesto krutih.

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

#main ( width:100%; overflow:hidden; )

Usput! Da nisam koristio lažne stupce za crtanje pozadine ispod stupaca, već metodu dugog postavljanja, tada bi zahtijevao koristite overflow:hidden za "main", što također rješava problem propadanja. Ali kako bih onda o tome govorio?

To je to sa zvučnicima... Vrijeme je da si natočite ukusan čaj (mnogi ljudi više vole kavu) i u njega dodate ukusne kolačiće, zastanite kako biste riješili svu ovu zbrku u glavi. Dalje, čekamo mali dodatak - o jelovniku.

Jelovnik

Dopustite mi da vas podsjetim da ako nekoliko uzastopnih blokova lebdi u jednom smjeru, tada će se svaki sljedeći pokušati proširiti sa slobodne strane prethodnog.Ovaj se učinak naširoko koristi za pretvaranje popisa odjeljaka web mjesta u vodoravne izbornike.

Uzmimo ovaj popis:

Početak
Katalog
Košara
Referenca

Da bi izgledao kao izbornik, trebate pomaknuti "sve li ulijevo, ukloniti atribute liste s njih (uvlake i grafičke oznake) i dodati 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 ; color:white; border:solid 1px; border-color:#46F #238 #238 #46F; ) a ( color:white; text-decoration:none; )

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

float:left je potreban za elemente liste kako bi se širili vodoravno, te za samu listu kako elementi ne bi propadali kroz nju;
nulta margina i padding eliminiraju padding koji preglednici rade za popise prema zadanim postavkama, ali oni to rade vrlo drugačije, tako da je lakše reći "sve je nula" nego zapamtiti što staviti zasebno za koji element.

Moralnost

Plutajući mehanizam još je jedan alat za raspored uz apsolutno pozicioniranje.

Razlikuju se na bolje, omogućujući vam da ostavite element u toku, što je vrlo zgodno za raspored stupaca.

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

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

Već smo shvatili. Saznali smo da imaju sadržaj. Međutim, ovo 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 odlomak. Ali kako ga poravnati udesno? 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 uglastih zagrada), ali njihove vrijednosti mogu biti različite. Baš kao i oznake, vrijedne atribute se potiče da se pišu malim slovima, iako preglednici općenito ne mare - to je samo pravilo. lijepo ponašanje: na ruskom jeziku TAKOĐER NIJE PRIHVAĆENO PISANJE S UKLJUČENIM VELIKIM SLAVIM. Zašto je HTML lošiji?

Vrijednosti s atributima napisane su u sljedećem formatu:

attribute=”value” lang=”en”

Atribute uvijek treba pisati unutar uvodne oznake, iza rezervirane riječi.

stavak

Obično postoji više atributa dostupnih za jednu oznaku. Nije važno kojim redoslijedom su navedeni.

Generički atributi

Svaka HTML oznaka ima vlastiti skup atributa. Neki atributi mogu biti dostupni na više oznaka, dok drugi mogu raditi samo na jednoj. Također postoji grupa univerzalnih (globalnih) atributa koji se mogu koristiti s bilo kojom oznakom. Pogledajmo na brzinu atribute ove kategorije.

pristupni ključ omogućuje vam postavljanje prečaca na tipkovnici za pristup određenom objektu stranice. Na primjer, možete to učiniti pomoću prečaca na tipkovnici Alt+1 korisnik je kliknuo na određenu poveznicu. Tako razvijte navigacijski sustav tipkovnicom.

Vrijednost atributa može biti brojevi 0-9 ili slova latinične abecede:

Link će se otvoriti pritiskom na tipkovni prečac s one

razreda omogućuje vam pridruživanje oznake s unaprijed definiranim CSS stilom. Korištenje atributa omogućuje značajno smanjenje koda, jer umjesto ponavljanja unosa istog CSS bloka, možete jednostavno unijeti naziv klase koja mu odgovara.
Pomoću sadržajno uređivanje možete dopustiti korisniku da uređuje bilo koji element HTML stranice: brisanje, umetanje, promjena teksta. Isti atribut omogućuje uređivanje i onemogućavanje. Postoje samo dvije vrijednosti: pravi- dopustiti uređivanje lažno- zabraniti.
Uz atribut kontekstni izbornik bilo kojem elementu dokumenta možete dati jedinstvene stavke kontekstnog izbornika po vašem izboru. Sam meni je kreiran u tagu , a atribut contextmenu dobiva svoj ID.
red definira smjer teksta: slijeva nadesno (ltr) ili zdesna na lijevo (rtl).
povlačeći se omogućuje vam zabranu (lažno) ili dopustiti (pravi) korisniku da povuče element stranice koji ima ovaj atribut.
pad zona govori pregledniku što treba učiniti s povučenim elementom: copy(value kopirati), premjestiti ( potez) ili izradite poveznicu na njega (veza).
skriven- atribut koji vam omogućuje skrivanje sadržaja elementa tako da se ne prikazuje u pregledniku. Ako je atribut postavljen na false, objekt se prikazuje, true - skriven.
iskaznica postavlja identifikator elementa - vrstu imena koje je potrebno za jednostavnu promjenu stila objekta, kao i da mu skripte mogu pristupiti. Vrijednost atributa bit će njegovo ime. Mora započeti latiničnim slovom, a može sadržavati brojke, slova iste latinske abecede (velika i mala), kao i crtice (-) i podvlake (_) . Ruska slova ne mogu sadržavati.
Jezik pomaže pregledniku razumjeti jezik na kojem je sadržaj napisan i stilizirati ga u skladu s tim (na primjer, u jezicima se mogu koristiti različiti navodnici). Vrijednosti su jezični kodovi (ruski - hr, Engleski - hr i tako dalje.).
Provjera pravopisa uključuje (pravi) ili onemogućuje (lažno) Provjera pravopisa. Posebno je korisno koristiti atribut u oznakama polja obrasca gdje će korisnik unositi tekst.
stil omogućuje postavljanje izgleda elementa pomoću CSS koda.
tabindex omogućuje određivanje koliko će puta korisnik morati pritisnuti tipku Tab da bi objekt s ovim atributom dobio fokus. Broj klikova određuje vrijednost atributa - pozitivan cijeli broj.
titula- tooltip koji će se pojaviti ako prijeđete mišem preko elementa i ostavite ga neko vrijeme nepomičan. Niz u vrijednosti bit će savjet.

Prevedi dopušta (Da) ili zabranjuje (Ne) prijevod sadržaja oznake.
uskladiti postavlja poravnanje elementa. Na primjer, može se koristiti za poravnavanje teksta ulijevo (vrijednost lijevo), na desnoj strani ( pravo), centrirano (centar) ili po širini (opravdati). Za slike (tag ) također je dostupan za poravnanje na vrh najvišeg elementa u retku ( vrh), uz donju granicu (dno), a srednja vrijednost čini da središnja linija slike odgovara osnovnoj liniji crte.

Vrijedno je imati na umu da korištenje atributa uskladiti ne preporučuje se, a poravnanje teksta je bolje s CSS-om.

Primjer korištenja atributa

Kao primjer, razmotrite redak HTML koda:

Ovaj tekst se može uređivati

Cijeli redak stvara odlomak teksta koji korisnik može uređivati u pregledniku.

Analizirajmo svaki element niza.

- početna oznaka spremnika koji pohranjuje odlomak.

- završna oznaka.

Između likova > I < locirani 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 otvori stranicu. Preglednik ga tretira kao običan tekst koji treba prikazati na ekranu.

sadržajno uređivanje=”pravi” - ovo je atribut i njegova vrijednost. Sjeti se kako u školi: x=3. Isto tako i ovdje: sadržajno uređivanje=”pravi". Atribut sadržajno uređivanje postavlja hoće li korisnik moći uređivati sadržaj elementa, vrijednost pravi, napisano u navodnicima odvojenim znakom jednakosti, uređivanje dopušta:

Attribute=”value” contenteditable=”true”

kratka informacija

Notacija

	Opis	Primjer
<тип>	Određuje vrstu 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 \| malim slovima
A \|\| B	Svaka se vrijednost može koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom.	širina \|\| računati
	Vrijednosti grupa.	[ obrezivanje \|\| križ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jednom ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	umetak?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jednom ili više puta odvojene zarezima.	<время>#

Vrijednosti

Pješčanik

Winnie Pooh uvijek nije bio nesklon malom osvježenju, pogotovo u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno završio, a večera nije ni pomišljala započeti. I, naravno, bilo mu je užasno drago vidjeti da je Zec izvadio šalice i tanjure.

img (float: ništa;)

Primjer

plutati

Biheviorizam, koliko god se paradoksalno činio, prosvjetljuje sublimirani poticaj, primjerice, Richard Bandler je promjenom submodaliteta izgradio učinkovita stanja.

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Korištenje svojstva float

Objektni model

Objekt.style.cssFloat

Bilješka

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

Preporuka (Recommendation) - specifikacija je odobrena od strane W3C i preporučena kao standard.
Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
Predložena preporuka ( Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom odboru W3C na konačno odobrenje.
Radni nacrt - zreliji nacrt nakon rasprave i izmjena za reviziju zajednice.
Urednikov nacrt ( Urednički nacrt) je nacrt verzije standarda nakon što su urednici projekta izvršili izmjene.
Nacrt ( Nacrt specifikacije) je prva verzija nacrta standarda.