često se koristi u izgledu modernih web stranica za stvaranje mreža i jednostavno znači neku vrstu bloka ili spremnika. Također je moguće u njega ugnijezditi druge oznake, što nije moguće sa svim blok elementima, tako da
pogodan za korištenje. Blokovi se obično naslažu jedan na drugi i ne umeću se u inline elemente. HTML ugrađeni elementi su tekst, a CSS se koristi za njegovo stiliziranje.
S obzirom na širinu sadržaja, ukupna širina bloka zbroj je vrijednosti desnog i lijevog ispuna, margine, obruba i širine. Na zadanoj visini - od gornje i donje podloge, margina, obruba i visine. Tekst u elementima bloka je prema zadanim postavkama poravnat lijevo. Ako jedan od njih sadrži umetnute elemente zajedno s blok elementima, tada se oko umetnutih elemenata stvara anonimni blok. Na njega će se primijeniti zadani stil. Također će naslijediti navedeni stil dodijeljen roditelju.
Protok dokumenata Tok se odnosi na redoslijed kojim se elementi stranice prikazuju, određen svojstvima navedenim u CSS-u. U ovom slučaju, prema zadanim postavkama, blokovi su poredani odozgo prema dolje, a ako nema dovoljno prostora, ugrađene oznake se premještaju u novi red i raspoređuju od vrha prema dolje i slijeva nadesno. Položaj elementa na stranici ovisi o njegovom mjestu u kodu: što je viši, to se ranije nalazi. Svaki od elemenata bloka izgleda kao pravokutnik koji gura svoje susjede. Ovo ponašanje možete promijeniti pomoću posebnih svojstava. Poravnavanje određenih blokova prema sredini ili stranama spremnika u CSS-u naziva se pozicioniranje.
Elementi pozicioniranja Položaj blokova može se kontrolirati pomoću apsolutnog i relativnog pozicioniranja. Pozicioniranje se koristi kako bi se velikim dijelovima stranice dala određena lokacija, za stvaranje složenih sučelja, skočnih prozora i ukrasnih elemenata. Glavno svojstvo koje se koristi za pozicioniranje blokova u CSS-u je pozicija. Ima četiri glavna svojstva:
relativan; apsolutni; fiksni; statički.
Uz njihovu pomoć možete mijenjati načine izgleda određivanjem jednog od četiri parametra: gore, desno, dolje ili lijevo. Tu je i svojstvo za redoslijed slojeva - z-index. Pozicioniranje sa statičkim svojstvom obično se ne koristi jer označava zadano pozicioniranje blokova. Stoga korištenje bilo kojeg parametra ni na koji način ne utječe na to. Ostala tri svojstva koriste se za raspored: relativno, apsolutno, fiksno.
Relativno pozicioniranje Relativno pozicioniranje blokova u CSS-u, tj. svojstvo position:relative, znači da se element može pomicati i mijenjati njegov izvorni položaj. Takav blok i dalje ostaje u struji. Zapravo nije istisnut on sam, nego njegova kopija. Vrijednosti svojstava postavljene su tako da pokazuju točno koliko će se blok kretati u jednom ili drugom smjeru. Najčešće se mjere u pikselima. Ali prihvatljivo je koristiti druge jedinice.
Korištenje svojstava za relativno pozicioniranje Svojstvo top pomiče kopiju određenog bloka gore ili dolje za broj piksela navedenih u svojstvu. Kada ga koristite, elementi koji se nalaze ispod ili iznad ostaju na svojim mjestima, jer se zapravo blok koji se pomiče ne pomiče nigdje.
Svojstvo bottom pomiče blok u smjeru suprotnom od svojstva top. Pozitivna vrijednost pomaže da se pomakne prema gore, a negativna vrijednost pomaže da se pomakne prema dolje. Svojstva desno i lijevo pomiču element udesno, odnosno ulijevo. Kombinirajući ih sve, možete postaviti točnu lokaciju bloka na stranici, pomičući ga duž okomite i vodoravne koordinatne osi. Ako povećate uvlake, one se neće računati od ruba samog bloka, već od njegovog pomaka kopije u stranu.
Apsolutno pozicioniranje Apsolutno pozicioniranje blokova u CSS-u određeno je vrijednošću svojstva apsolutne pozicije. Element koji je pozicioniran apsolutno ispada iz toka dokumenta, a njegovo mjesto zauzimaju susjedni blokovi. Širina takvog elementa se rasteže ovisno o njegovom sadržaju, a može se pomaknuti postavljanjem određenih vrijednosti za svojstva gore, lijevo, desno, dolje. Apsolutno pozicioniranje blokova u CSS-u korisno je za naslove. Ali position: absolute ne radi samo za blok elemente, već i za elemente u liniji.
Poravnavanje elemenata prema sredini Pozicionirani apsolutno inline element će se ponašati potpuno isto kao inline element. Stoga se pozicioniranje također može koristiti za kontrolu teksta u CSS-u. Na njega možete primijeniti neka nova svojstva, na primjer, promijeniti visinu i širinu. Centriranje i okomito poravnanje u CSS-u koristi kombinaciju nekoliko svojstava. Kontrolira okomito poravnanje gornjeg svojstva. Ako želite centrirati blok u CSS-u, glavni spremnik bi trebao biti relativno pozicioniran, a poravnati element trebao bi biti apsolutno pozicioniran. Spremnik mora postaviti svojstvo top: 50%, a za pomicanje elementa za polovicu vlastite visine upotrijebite svojstvo translate s vrijednošću "0, -50%". Apsolutno pozicionirani elementi mogu se izdvojiti u novi tip, jer se na njih primjenjuju svojstva koja nisu dostupna za druge vrste pozicioniranja.
Pozicioniranje u odnosu na gornji lijevi kut preglednika Svojstva lijevo, gore, desno i dno rade različito na apsolutno i relativno pozicioniranim elementima. Za relativne elemente, ova svojstva postavljaju pomak u odnosu na to gdje se element nalazi. Apsolutno pozicionirani zauzimaju mjesto u odnosu na određeni koordinatni sustav vezan uz veličinu prozora preglednika. Polazište ovog sustava su kutovi prozora. Kada koristite svojstvo lijevo, uvlaka će se brojati od lijeve strane preglednika, ali neće biti trake za pomicanje. Svojstvo top, kada je postavljeno apsolutno, specificira pomak od vrha preglednika do vrha elementa na koji se primjenjuje. Kombinacijom obaju svojstava element se može pomicati u odnosu na gornji lijevi kut preglednika.
Pozicioniranje u odnosu na gornji desni kut preglednika Slično, pomoću svojstava desno i vrh, možete pritisnuti element na desnoj strani prozora preglednika i promijeniti njegov okomiti položaj, pomičući ga u gornji desni kut. Ako je pravo svojstvo postavljeno na negativnu vrijednost, blok će se pomaknuti izvan granice prozora. Nakon toga trebala bi se pojaviti traka za pomicanje. Da biste pomaknuli element prema dolje, koristite svojstvo bottom. Određuje uvlačenje od donjeg ruba prozora preglednika do dna bloka. Ako je njegova vrijednost negativna, pojavljuje se i traka za pomicanje jer se element pomiče iza donje granice prozora preglednika.
Koordinatni sustav za apsolutno pozicioniranje Prema zadanim postavkama, svi elementi kojima je dana apsolutna pozicija vezani su za jedan koordinatni sustav - prozor preglednika. Ali može se promijeniti davanjem relativnog položaja nekom nadređenom elementu. Tada će podređeni blok promijeniti svoju lokaciju ovisno o roditelju. Ako među roditeljskim elementima postoji nekoliko s relativnim položajem, tada se brojanje provodi od najbližeg od njih. U ovom slučaju, zadano pozicioniranje bit će ono što je navedeno u oznaci tijela.
Referentna točka za apsolutno pozicionirani element Prije nego što je element dobio apsolutno pozicioniranje, nalazio se na nekom mjestu koje se naziva implicitno podrijetlo. Ako se takvom bloku ne daju svojstva, on se neće pomaknuti. Možete ga pomaknuti postavljanjem svojstva margine. Radit će slično svojstvima pozicioniranja. Ako ne definirate vrijednost svojstva lijevo i svih ostalih, tada će biti jednako auto. Također možete koristiti auto za vraćanje elemenata na njihova izvorna mjesta.
Fiksno pozicioniranje Drugo značenje je fiksno. Svojstvo položaja usidri element na određeno mjesto. Fiksno pozicioniranje često se koristi za stvaranje izbornika u CSS-u. Sličan je apsolutnom, ali fiksni blok ispada iz toka. Čak i kada se pomičete po stranici, takav će element ostati na mjestu, pa je prikladno koristiti ga za izradu izbornika u CSS-u. Početna točka bit će vezana za prozor preglednika. Ako postoji nekoliko pozicioniranih blokova, svojstvo z-index koristi se za njihov poredak. Uz njegovu pomoć možete preklapati relativne blokove s apsolutnim ako im date odgovarajući indeks, izražen kao cijeli broj. Što je veći, blok će biti viši.
Jedna od najboljih stvari kod CSS-a je ta što nam stilovi daju mogućnost pozicioniranja sadržaja i elemenata na stranici na gotovo bilo koji zamisliv način. Ovo dodaje strukturu našem dizajnu i pomaže da sadržaj postane vizualniji.
Ima ih nekoliko različiti tipovi pozicioniranja u CSS-u, svaka od ovih vrsta ima svoj opseg. U ovom poglavlju pogledat ćemo nekoliko različitih slučajeva upotrebe—stvaranje rasporeda za višekratnu upotrebu i jedinstveno pozicioniranje jednokratnih elemenata—i opisat ćemo nekoliko metoda za to.
Pozicioniranje pomoću plovka Jedan od načina pozicioniranja elemenata na stranici je kroz svojstvo float. Ovo je svojstvo vrlo svestrano i može se koristiti na mnogo različitih načina.
U osnovi, svojstvo float uzima element, uklanja ga iz normalnog toka stranice i postavlja ga lijevo ili desno od nadređenog elementa. Svi ostali elementi na stranici obavit će se oko takvog elementa. Na primjer, odlomci će se omotati oko slike ako element
Kada se svojstvo float primijeni na više elemenata odjednom, to omogućuje stvaranje izgleda s plutajućim elementima jedan do ili nasuprot drugoga, kao što je prikazano u rasporedu s više stupaca.
Svojstvo float ima nekoliko vrijednosti, dvije najpopularnije su lijevo i desno, koje omogućuju elementu da pluta lijevo ili desno od svog roditelja.
Img ( float: lijevo; )
lebdjeti u praksi Kreirajmo opći izgled stranice sa zaglavljem na vrhu, dva stupca u sredini i podnožjem na dnu. U idealnom slučaju, ova bi stranica trebala biti označena elementima
,
, I , kao što je opisano u lekciji 2, “Uvod u HTML.” Unutar elementa HTML bi mogao izgledati ovako:
Demonstracija izgleda bez float-a Evo elemenata I temelje se na blokovima, pa se prema zadanim postavkama slažu jedan na drugi. Međutim, želimo da ti elementi stoje jedan pored drugog. Postavljanjem float na kao lijevo , i za kao desno, možemo ih postaviti kao dva stupca jedan nasuprot drugome. Naš CSS trebao bi izgledati ovako:
Odjeljak ( float: lijevo; ) u stranu ( float: desno; )
Za referencu, plutajući elementi postavljeni su duž ruba nadređenog elementa. Ako nema roditelja, plutajući element bit će postavljen uz rub stranice.
Kada postavimo element da pluta, uklanjamo ga iz normalnog toka HTML dokumenta. To uzrokuje da zadana širina tog elementa postane širina njegovog sadržaja. Ponekad, primjerice kada stvaramo stupce za višekratni izgled, ovakvo ponašanje nije poželjno. To se može popraviti dodavanjem svojstva širine s fiksnom vrijednošću za svaki stupac. Osim toga, kako bismo spriječili da plutajući elementi dodiruju jedni druge, uzrokujući da sadržaj jednog elementa sjedi pored drugog, možemo koristiti svojstvo margine za postavljanje razmaka između elemenata.
U nastavku proširujemo prethodni blok koda dodavanjem margine i širine za svaki stupac kako bismo bolje oblikovali željeni rezultat.
Odjeljak ( float: lijevo; margina: 0 1,5%; širina: 63%; ) u stranu ( float: desno; margina: 0 1,5%; širina: 30%; )
Demonstracija izgleda s floatom float može promijeniti prikazanu vrijednost elementa Za plutajući element također je važno razumjeti da je element uklonjen iz normalnog toka stranice i da se zadana vrijednost prikaza elementa može promijeniti. Svojstvo float oslanja se na vrijednost prikaza elementa koja je postavljena na blok i može promijeniti zadanu vrijednost prikaza elementa ako već nije prikazan kao blok element.
Na primjer, element čiji je prikaz naveden kao inline, kao što je inline , zanemaruje svojstva visine ili širine. Međutim, ako navedete float za inline element, vrijednost prikaza će se promijeniti u block i tada element već može preuzeti svojstva visine ili širine.
Kada floatujemo element, moramo paziti na to kako on utječe na vrijednost svojstva prikaza.
Za dva stupca možete postaviti float, jedan stupac kao lijevi, a drugi kao desni, ali za više stupaca morat ćemo promijeniti pristup. Recimo, na primjer, da bismo željeli imati red od tri stupca između naših elemenata I . Ako odbacimo svoj element i koristiti tri elementa , naš HTML može izgledati ovako:
Za raspored ova tri elementa u redu s tri stupca, moramo postaviti float za sve elemente kao lijevo . Također moramo prilagoditi širinu uzimajući u obzir dodatne stupce i postavljajući ih jedan do drugog.
Odjeljak ( float: lijevo; margina: 0 1,5%; širina: 30%; )
Ovdje imamo tri stupca, svi s jednakom širinom i vrijednošću margine, i float postavljen na lijevo.
Demonstracija izgleda s tri stupca s floatom Čišćenje i float sadržaj Svojstvo float izvorno je dizajnirano da omogući protok sadržaja oko slika. Slici se može dati plutanje i sav sadržaj oko te slike prirodno teče oko nje. Iako ovo odlično funkcionira za slike, svojstvo float zapravo nije bilo namijenjeno korištenju u svrhu izgleda i pozicioniranja i stoga dolazi s nekoliko zamki.
Jedna od tih zamki je da se ponekad ispravni stilovi ne pojavljuju na elementu koji je susjedni ili je roditelj plutajućeg elementa. Kada je element postavljen na plutanje, on se uklanja iz normalnog tijeka stranice i, kao rezultat toga, stilovi elemenata oko tog plutajućeg elementa mogu negativno utjecati.
Često se vrijednosti margine i svojstava ispune netočno tumače, uzrokujući njihovo stapanje u plutajući element. Ostala svojstva također mogu biti pogođena.
Još jedna pogreška je to što se ponekad neželjeni sadržaj počinje omotati oko elementa float. Uklanjanje elementa iz tijeka dokumenta omogućuje svim elementima oko plutajućeg elementa da ga zaobiđu i zauzmu sav raspoloživi prostor oko plutajućeg elementa, što je često nepoželjno.
U našem primjeru s prethodna dva stupca, nakon što smo elementima dodali float I , ali prije postavljanja svojstva širine bilo kojem od njih, sadržaj unutar elementa nalazio se između dva usmjerena elementa iznad njega, ispunjavajući sav raspoloživi prostor. Stoga element bio bi u prostoru između elemenata I , zauzimajući slobodan prostor.
Demonstracija izgleda bez brisanja plovka Kako bismo spriječili omotavanje sadržaja oko plutajućih elemenata, moramo očistiti plutajuće elemente i vratiti stranicu u normalni tijek. Pogledat ćemo kako očistiti plovke, a zatim ćemo pogledati njihov sadržaj.
Čišćenje plovaka Brisanje float-a događa se pomoću svojstva clear, koje poprima nekoliko različitih vrijednosti: najčešće korištene vrijednosti su lijevo, desno i oboje.
Div ( jasno: lijevo; )
Vrijednost lijevo briše lijeve plovke, dok vrijednost desno briše desne plovke. Vrijednost both će, međutim, očistiti lijevi i desni plutajući dio i često je najidealnija opcija.
Vraćamo se na naš prethodni primjer, ako koristimo svojstvo clear s vrijednošću oboje na elementu , tada možemo očistiti plovak. Važno je da se clear primijeni na element naveden nakon plutajućih elemenata, a ne prije, kako bi se stranica vratila u normalan tijek.
Podnožje ( jasno: oboje; )
Demonstracija izgleda s brisanjem plovka Plutanje sadržaja Umjesto brisanja float, druga opcija je postaviti sadržaj na float. Rezultat će biti gotovo isti, ali float sadržaj stvarno osigurava da će se svi naši stilovi pravilno prikazati.
Za postavljanje float sadržaja, float elementi moraju biti unutar nadređenog elementa, on će djelovati kao spremnik, ostavljajući tok dokumenta potpuno normalnim izvan njega. Stil za ovaj roditeljski element predstavljen je grupnom klasom, kao što je prikazano ovdje:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; )
Ovdje se ne događa mnogo, ali u biti sve što CSS radi je brisanje svih plutajućih elemenata unutar grupnog elementa i vraćanje dokumenta u normalan tijek.
Točnije, pseudoelementi ::before i ::after, kao što je objašnjeno u lekciji 4, dinamički generiraju elemente iznad i ispod elementa s class group. Ovi elementi ne uključuju nikakav sadržaj i prikazuju se kao elementi tablice, slično blok elementima. Dinamički generirani element nakon grupnog elementa briše float unutar grupnog elementa, baš kao što je clear prije činio. Naposljetku, element grupe također briše sve float-ove koji se mogu pojaviti prije njega u slučaju da postoji float s vrijednošću lijevo ili desno. Također je uključen mali trik koji čini da stariji preglednici dobro rade.
Ovdje postoji više koda od naredbe clear: both, ali može biti vrlo korisno.
Uzimajući u obzir naš izgled stranice u dva stupca, mogli bismo ga zamotati I nadređeni element. Ovaj nadređeni element sadržavat će plutajuće elemente. Kod će izgledati ovako:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) section ( float: lijevo ; margina: 0 1,5%; širina: 63%; margina: 0 1,5%; širina: 30%;
Demonstracija izgleda s float sadržajem Ovdje prikazana tehnika poznata je kao "clearfix" i često se može vidjeti na drugim stranicama s nazivom klase clearfix ili cf. Odlučili smo se koristiti skupinu naziva klase jer predstavlja skupinu elemenata i bolje izražava sadržaj.
Kada su elementi postavljeni na plutanje, važno je pratiti kako oni utječu na tijek stranice i osigurati da se tok stranice resetira kroz čišćenje ili kroz plutajući sadržaj kako je predviđeno. U suprotnom, praćenje lebdenja može izazvati mnogo glavobolja, posebno na stranicama koje sadrže više redaka, svaki s više stupaca.
Na praksi Vratimo se na stranicu Styles Conference i isprobajmo dodavanje lebdećih elemenata nekom sadržaju.
Najprije, prije primjene float na bilo koji element, osigurajmo sadržaj tim plutajućim elementima dodavanjem clearfixa našem CSS-u. U datoteci main.css, odmah ispod naših stilova mreže, dodat ćemo clearfix ispod naziva klase grupe, baš kao i prije. /* ================================================== ====== Clearfix ======= ===================================== * / .group::before, .group::after ( content: " "; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) Sad kad možemo koristiti float, definirajmo ga za main
unutarnji element kao lijevo i neka ostatak sadržaja u zaglavlju teče udesno.Da biste to učinili, dodajte klasu logotipa elementu
. Zatim ćemo unutar našeg CSS-a dodati novi stilski odjeljak za glavno zaglavlje. U ovom odjeljku ćemo odabrati element s klasom logotipa i postavite float na lijevo.
/* ======================================== Glavno zaglavlje ====== = ==================================== */ .logo ( float: lijevo; )Dok smo već ovdje, dodajmo još malo detalja našem logotipu. Počnimo s postavljanjem elementa
U CSS-u ćemo dodati obrub duž vrha našeg logotipa i nešto okomitog ispuna kako bi logotip mogao slobodno "disati".
Logotip (gornja granica: 4 px puna #648880; ispuna: 40 px 0 22 px 0; lebdi: lijevo; )
Pošto smo napravili element
pojednostavljeno, želimo postaviti sadržaj da pluta. Neposredni roditelj za je element , pa ćemo to dodati grupni razred . Ovo će na njega primijeniti clearfix stilove koje smo ranije postavili.
Element poprima oblik, pa pogledajmo element . Slično onome što smo učinili s , postavit ćemo float za naše autorsko pravo kao lijevo unutra i neka svi ostali elementi teku oko njega s desne strane.
Za razliku od elementa međutim, nećemo primijeniti klasu izravno na plutajući element. Ovaj put ćemo dodati klasu roditelju elementa float i koristiti jedinstveni CSS selektor za odabir elementa i zatim mu dati float.
Počnimo s dodavanjem klase primarnog podnožja elementu . Jer znamo da ćemo unutra imati pojednostavljene elemente , tada bismo trebali dodati grupni razred kad smo već kod toga.
Sada kada je klasa primarnog podnožja postavljena na element , ovu klasu možemo koristiti za poseban odabir elementa S koristeći CSS . Želimo mu dati plutanje kao lijevo. Ne zaboravite stvarati novi odjeljak u našoj datoteci main.css za stiliziranje glavnog podnožja.
/* ========================================= Glavni podrum ====== ===================================== */ .primary-footer small ( float: lijevo; ) Za provjeru - ovdje odabiremo element , koji bi trebao biti unutar elementa s vrijednošću atributa klase primarni-footer, kao što je naš element
Na kraju ćemo dodati malo podloge na vrh i dno elementa. , to će ga malo odvojiti od ostatka stranice. To možemo učiniti izravno pomoću klase primarnih podnožja.
Primarno podnožje (donji dio: 44 px; gornji dio: 44 px; )
Uzimajući u obzir sve ove promjene u elementima I , moramo ih uključiti na svaku stranicu, a ne samo na stranicu index.html.
Riža. 5.01. Korištenje više plutajućih elemenata I na glavnoj stranici Styles Conference raditi zajedno
Pozicioniranje putem inline-bloka Uz korištenje float, drugi način na koji možemo pozicionirati sadržaj je korištenje svojstva display u kombinaciji s vrijednošću inline-block. Inline-block metoda, kao što ćemo kasnije raspraviti, primarno je korisna za postavljanje stranica ili za postavljanje elemenata u red jedan pored drugog.
Podsjetimo se da vrijednost ugrađenog bloka za svojstvo prikaza prikazuje elemente u liniji i dopušta im da preuzmu sva svojstva modela okvira, uključujući visinu, širinu, ispunu, obrub i marginu. Korištenje inline-block-a omogućuje nam da u potpunosti iskoristimo blok-model bez potrebe za brigom o brisanju bilo kakvih float-ova.
inline-block u praksi Pogledajmo naš primjer s tri stupca od početka. Počet ćemo tako što ćemo spremiti naš HTML ovako:
Sada umjesto float za naša tri elementa promijenit ćemo njihovu vrijednost prikaza u inline-block , ostavljajući svojstva margine i širina su isti kao i prije. Kao rezultat toga, naš CSS će izgledati ovako:
Odjeljak (prikaz: inline-block; margina: 0 1,5%; širina: 30%; )
Nažalost, samo ovaj kod nije dovoljan da izvede trik i zadnji element gura se u novi redak. Upamtite, budući da se elementi umetnutog bloka pojavljuju u retku jedan do drugoga, oni uključuju jedan razmak između sebe. Kada se veličina svakog pojedinačnog prostora doda vrijednosti širine i vodoravne margine svih elemenata u nizu, ukupna širina postaje prevelika, gurajući zadnji element na novu liniju. Za prikaz svih stavki u jednom retku, trebali biste ukloniti bijeli prostor između svakog
Demonstracija inline-block elemenata s razmakom Uklanjanje razmaka između inline-block elemenata Postoji nekoliko metoda za uklanjanje prostora između inline-block elemenata, a neke su složenije od drugih. Najviše ćemo se usredotočiti na dva jednostavne metode , od kojih se svaki pojavljuje unutar HTML-a.
Prvo rješenje je staviti svaki novi tag otvarajućeg elementa u istom retku kao i završna oznaka prethodnog elementa . Umjesto korištenja nova linija za svaki element na kraju započinjemo elemente na istoj liniji. Naš HTML može izgledati ovako:
Pisanje inline-block elemenata na ovaj način osigurava da između takvih elemenata u HTML-u nema razmaka. Stoga se razmak neće pojaviti kada se stranica prikaže.
Demonstracija inline-block elemenata bez razmaka Druga metoda za uklanjanje razmaka između inline-block elemenata je otvaranje HTML komentara odmah nakon završne oznake elementa. Zatim zatvorite komentar neposredno prije početne oznake sljedećeg elementa. To omogućuje elementima umetnutog bloka da započinju i završavaju u zasebnim redcima u HTML-u te će "komentirati" svaki potencijalni razmak između elemenata. Rezultirajući kôd će izgledati ovako:
Nijedna od ovih opcija nije savršena, ali su korisne. Ja preferiram korištenje komentara za bolju organizaciju, ali koju ćete opciju odabrati ovisi o vama.
Stvorite rasporede za višekratnu upotrebu Kada gradite web mjesto, uvijek je najbolje pisati modularne stilove koji se mogu ponovno upotrijebiti negdje drugdje, a višekratni izgledi su na vrhu popisa višekratnog koda. Izgledi se mogu izraditi pomoću float-ova ili inline-block elemenata, ali koji je najbolji i zašto?
Pitanje jesu li za strukturu stranice bolji lebdeći ili inline-block elementi otvoreno je za raspravu. Moj pristup je korištenje inline-block elemenata za stvaranje rešetke ili izgleda stranice, a zatim korištenje float-a kada želim da sadržaj teče oko elementa (za što su float-ovi dizajnirani kada se radi sa slikama). Općenito, također smatram da je s inline-block elementima lakše raditi.
Međutim, koristite ono što vam najviše odgovara. Ako ste više upoznati s jednim pristupom nego drugim, upotrijebite ga.
U izradi su nove CSS specifikacije - posebno svojstva fleksibilnosti i mreže - koje će vam pomoći da odlučite kako najbolje rasporediti svoje stranice. Pripazite na ove metode kad se počnu pojavljivati.
Na praksi S čvrstim razumijevanjem rasporeda za višekratnu upotrebu, vrijeme je da ga implementirate na našoj stranici Styles Conference.
Za web stranicu Styles Conference izradit ćemo izgled s tri stupca koristeći elemente umetnutih blokova. To ćemo učiniti tako da dobijemo tri stupca iste širine ili dva stupca s ukupnom širinom podijeljenom na 2/3 za jedan i 1/3 za drugi.
Prvo ćemo stvoriti klase koje definiraju širinu ovih stupaca. Nazvat ćemo ove dvije klase col-1-3 za jednu trećinu i col-2-3 za dvije trećine. U odjeljku Grid naše main.css datoteke, krenimo naprijed i definirajmo te klase i njihove odgovarajuće širine.
Stupac-1-3 (širina: 33,33%; ) .col-2-3 (širina: 66,66%; )
Želimo da se oba stupca pojave kao ugrađeni blok elementi. Također moramo biti sigurni da je njihovo okomito poravnanje postavljeno na vrh svakog stupca.
Kreirajmo dva nova birača koji dijele prikaz i okomito poravnanje.
Col-1-3, .col-2-3 ( display: inline-block; vertical-align: top; )
Ponovno pogledajte CSS. Napravili smo dva selektora klasa col-1-3 i col-2-3 odvojena zarezom. Zarez na kraju prvog selektora znači da slijedi drugi selektor. Nakon drugog selektora nalazi se otvarajuća vitičasta zagrada, koja označava da počinje opis stila. Korištenjem zareza za odvajanje selektora, možemo vezati jedan stil za nekoliko selektora u isto vrijeme.
Želimo staviti razmak između stupaca kako bismo razbili sadržaj. To se može učiniti dodavanjem vodoravne ispune svakom stupcu.
Ovo dobro funkcionira, međutim, kada su dva stupca postavljena jedan pored drugog, širina prostora između njih bit će dvostruko veća od prostora od vanjskog ruba. Kako bismo ovo uravnotežili, stavit ćemo sve naše stupce u rešetku i dodati im iste ispune.
Upotrijebimo klasu rešetke za definiranje naše mreže, a zatim dajmo istu vodoravnu podlogu klasama rešetke, col-1-3 i col-2-3. Sa zarezima koji opet odvajaju naše birače, naš CSS izgleda ovako:
Mreža, .col-1-3, .col-2-3 ( padding-left: 15px; padding-desno: 15px; )
Kada postavljamo vodoravnu podlogu, moramo biti oprezni. Upamtite, u prošloj smo lekciji stvorili spremnik s klasom kontejnera kako bismo centrirali sav naš sadržaj na stranici širine 960 piksela. U ovaj trenutak , ako postavimo element s klasom rešetke unutar elementa s klasom spremnika, onda bi se njihova horizontalna ispuna zbrojila i naši stupci ne bi bili prikazani proporcionalno širini ostatka stranice.
To ćemo učiniti rastavljanjem starog skupa pravila spremnika na sljedeće:
Spremnik, .grid ( margina: 0 auto; širina: 960px; ) .container ( padding-lijevo: 30px; padding-desno: 30px; )
Sada će svaki element s klasom spremnika ili mreže biti širok 960 piksela i nalazit će se u središtu stranice. Osim toga, zadržali smo postojeće vodoravno ispunjavanje za bilo koji element s klasom spremnika premještanjem u novi, zasebni skup pravila.
U redu, sav teži dio postavljanja mreže je završen. Sada je vrijeme da radimo s našim HTML-om i vidimo kako ove klase rade.
Počet ćemo s teaserima na početnoj stranici, u datoteci index.html, poredanim u tri stupca. Trenutno su teaseri umotani u element s klasom kontejnera. Želimo promijeniti klasu spremnika u rešetku kako bismo mogli početi postavljati stupce unutra.
...
...
...
...
I konačno, budući da je svaki od naših stupaca umetnuti blok element, moramo biti sigurni da smo uklonili svaki bijeli prostor između njih. Da bismo to učinili, upotrijebit ćemo komentare i dodati dokumentaciju u svaki odjeljak kako bismo bolje organizirali naš kod.
...
...
...
Kako bismo provjerili, ostavili smo komentar u retku 3 identificirajući odjeljak "Zvučnici" koji slijedi. Na kraju retka 7 otvaramo komentar odmah nakon završne oznake. Unutar ovog komentara, u retku 9 definiramo sljedeći odjeljak "Raspored". Zatim zatvorite komentar na početku retka 11, neposredno prije početne oznake . Slična struktura komentara pojavljuje se u recima 13 do 17 između dva elementa , neposredno prije odjeljka Mjesto događaja. Općenito, komentirali smo svaki potencijalni razmak između stupaca, dok smo istovremeno koristili iste komentare za identifikaciju naših odjeljaka.
Sada imamo rešetku s tri stupca za višekratnu upotrebu koja podržava različite izglede, koristeći 1/3 i 2/3 širine stupca. Naša početna stranica sada sadrži tri stupca, koji odvajaju sve teasere.
Riža. 5.02. Početna stranica Styles Conference sada uključuje izgled u tri stupca
Demo i izvorni kod U nastavku možete pogledati web stranicu Styles konferencije u trenutnom stanju, a također i preuzeti izvor mjesto u ovom trenutku.
Jedinstveno pozicioniranje elemenata Prije ili kasnije svatko će htjeti precizno pozicionirati element, ali float ili inline-block elementi ne dopuštaju takav trik. Plutajući elementi koji uklanjaju element iz toka stranice često proizvode neželjene rezultate jer se okolni elementi omotavaju oko plutajućeg elementa. Umetnuti blok elementi, osim ako ne stvaramo stupce, mogu biti prilično nezgodni kada je u pitanju ispravno pozicioniranje. Za situacije poput ove, možemo koristiti svojstvo položaja u kombinaciji sa svojstvima odmaka bloka.
Svojstvo položaja određuje kako je element postavljen na stranici i hoće li biti prikazan u normalnom tijeku dokumenta. Koristi se zajedno sa svojstvima pomaka bloka top , right , bottom i left , koja određuju točno gdje će element biti postavljen pomicanjem elementa u različitim smjerovima.
Prema zadanim postavkama, vrijednost položaja svakog elementa postavljena je na statički, što znači da element postoji u normalnom tijeku dokumenta i ne preuzima nikakva svojstva za njegovo pozicioniranje. Statičnu vrijednost najčešće prebriše relativna ili apsolutna vrijednost, koju ćemo pogledati sljedeće.
Relativno pozicioniranje Postavljanje svojstva položaja na relativno omogućuje elementima da se pojavljuju u normalnom tijeku stranice, rezervirajući prostor za element kako je predviđeno i sprječavajući druge elemente da teče oko njega. Međutim, također vam omogućuje izmjenu položaja elementa pomoću svojstava pomaka. Na primjer, razmotrite sljedeći HTML i CSS:
...
...
...
Div (visina: 100 px; širina: 100 px; ) .offset (lijevo: 20 px; pozicija: relativno; gore: 20 px; )
Demonstracija relativnog pozicioniranja Ovdje za drugi element
s klasom pomaka vrijednost položaja je postavljena na relativno, kao i dva svojstva pomaka - lijevo i gore. Ovo održava izvorni položaj elementa i drugim elementima nije dopušteno pomicanje u to područje. Osim toga, svojstva pomaka pomiču element gurajući ga 20 piksela slijeva i 20 piksela s vrha izvorne lokacije.
Za relativno pozicionirane elemente, važno je znati da svojstva pomaka bloka određuju gdje će se element pomaknuti, s obzirom na njegov izvorni položaj. Dakle, lijevo svojstvo s vrijednošću od 20 piksela zapravo gura element udesno za 20 piksela. Svojstvo na vrhu s vrijednošću od 20 piksela tada će gurnuti element prema dolje za 20 piksela.
Kada postavimo element pomoću svojstava pomaka, element se preklapa s elementom ispod sebe, umjesto da ga gura prema dolje kao što to čine svojstva margine ili padding.
Apsolutno pozicioniranje Apsolutna vrijednost za svojstvo položaja razlikuje se od relativne vrijednosti po tome što se apsolutno pozicionirani element ne pojavljuje u normalnom tijeku dokumenta, a izvorni prostor i položaj apsolutno pozicioniranog elementa nisu rezervirani.
Dodatno, apsolutno pozicionirani elementi pomiču se u odnosu na njihov najbliži relativno pozicionirani nadređeni element. Ako relativno pozicionirani roditelj ne postoji, tada će apsolutno pozicionirani element biti pozicioniran relativno u odnosu na element
. Ovo je mali podatak; pogledajmo kako to radi unutar nekog koda:
Odjeljak ( pozicija: relativna; ) div ( pozicija: apsolutna; desno: 20px; gore: 20px; )
Demonstracija apsolutnog pozicioniranja U ovom primjeru element pozicioniran je u odnosu na, ali ne uključuje svojstva pomaka. Stoga se njegov položaj ne mijenja. Element s klasom pomaka uključuje vrijednost položaja kao apsolutnu. Budući da element
je najbliži relativno pozicionirani nadređeni element , zatim element
će se postaviti u odnosu na element
.Za relativno pozicionirane elemente, svojstva pomaka određuju u kojem smjeru će se element pomaknuti u odnosu na sebe. Za apsolutno pozicionirane elemente, svojstva pomaka određuju u kojem smjeru će se element pomaknuti u odnosu na svog najbližeg relativno pozicioniranog roditelja.
Kao rezultat svojstava desno i vrh, element
pojavit će se 20 piksela s desne i 20 piksela s gornje strane iznutra
.Budući da element
pozicioniran apsolutno, nije pozicioniran u normalnom tijeku stranice i preklopit će sve elemente koji ga okružuju. Štoviše, početni položaj
nije spremljeno i drugi elementi mogu zauzeti ovo mjesto. Općenito, većina pozicioniranja može se dogoditi bez korištenja svojstava položaja i svojstava pomaka, ali u nekim slučajevima mogu biti izuzetno korisna.
Sažetak Naučiti kako pozicionirati sadržaj u HTML i CSS veliki je korak prema svladavanju ovih jezika. Dodajte ovome blok model i na dobrom smo putu da postanemo front-end programeri.
Ovaj tutorial članak bit će posvećen vrlo važnoj temi, koja se odnosi na pozicioniranje elemenata na stranici, od vas će zahtijevati maksimalnu pozornost. Upoznat ćete sljedeće vrste pozicioniranja elemenata: apsolutni , relativna , fiksni I statički .
Pozicioniranje će vam omogućiti da postavite ovaj ili onaj element na mjesto gdje vam je potreban, svrha ovog članka je razumjeti po kojim se pravilima to događa, koja CSS svojstva treba koristiti i zašto.
Vrste pozicioniranja elemenata
Osnove CSS svojstvo Ono što vam omogućuje kontrolu pozicioniranja elemenata na stranici je svojstvo position, ono govori pregledniku koja se vrsta pozicioniranja koristi za element ( statički -statički relativna - rođak, apsolutni – apsolutni , odn fiksni - fiksno).
Da biste u potpunosti razumjeli kako su elementi pozicionirani na bilo kojoj stranici, morate detaljno proučiti sve vrste pozicioniranja. Ovaj vodič će vam pružiti takvu priliku; sada ćemo zasebno govoriti o svakoj vrsti pozicioniranja i analizirati kako i u odnosu na što dolazi do pomaka elemenata u dokumentu.
Apsolutno pozicioniranje
Kao što ste primijetili, elementi koji imaju apsolutno pozicioniranje , odvojen od toka glavne stranice , što može dovesti do naslaganja elemenata jedan na drugi. Još jedna nijansa rad s elementima koji imaju apsolutno pozicioniranje , to su oni ne može plutati . Plutajući elementi mogu biti samo elementi koji imaju statičko pozicioniranje (static), odnosno onaj koji je zadani za element. Razgovarali smo o metodama rada s plutajućim elementima u članku udžbenika "".
Relativno pozicioniranje
Sljedeća vrsta pozicioniranja koju ćemo razmotriti je relativno pozicioniranje (položaj: relativno) su pomaknuti (postavljeni), ili drugim riječima.
Prijeđimo odmah na primjer, a zatim razgovarajmo o svim nijansama koje će se pojaviti pri radu s
</span> Relativno pozicioniranje elemenata
statički
klasa = "relativno" > relativna
klasa = "static" > statički
Što smo učinili u ovom primjeru:
Za blokove (elemente ), koji ima
statičko pozicioniranje (zadano) postavite visinu na 50 piksela i boju pozadine na -
Crvena .
Postavili smo element sa relativno pozicioniranje (položaj: relativno), postavite njegovu visinu na 100 piksela i boju pozadine zelena . Osim toga, naznačeno je da je on pomiče u odnosu na svoju trenutnu poziciju od gornjeg ruba za 50 piksela, a od lijevog ruba za 100 piksela, što uzrokuje prelijevanje dokumenta.
Rezultat našeg primjera:
Također je iz ovog primjera potrebno naglasiti da za razliku od apsolutno pozicioniranje ostali elementi u dokumentu reagiraju na elemente s relativno pozicioniranje . Unatoč činjenici da smo pregledniku dali naredbu za premještanje elementa, preglednik je rezervirao prostor za element, ostavljajući prazan prostor na mjestu gdje bi element inicijalno trebao biti prije premještanja.
U praksi najvjerojatnije nećete morati pomicati elemente koji imaju relativno pozicioniranje . glavna ideja relativno pozicioniranje nije premjestiti element negdje, nego stvoriti "spremnik" za element koji ima apsolutno pozicioniranje
. Drugim riječima, ugniježđeni elementi neće biti pomaknuti u odnosu na rub prozora preglednika, već u odnosu na ovaj element, koji će imati relativno pozicioniranje i nalazi se u glavnoj niti dokumenta . Razmotrit ćemo ovu točku detaljnije kasnije u ovom članku s uputama.
Fiksno pozicioniranje
Treći vrsta pozicioniranja koju ćemo promatrati je fiksno pozicioniranje element se kreće u odnosu na određeni rub prozora preglednika . Posebnost Ovo pozicioniranje je ono kada se pomičete po stranici element ostaje na jednom mjestu , odnosno, grubo rečeno, pomiče se zajedno sa stranicom (element je fiksan).
Mislim da ste tijekom putovanja internetom često nailazili na navigacijske izbornike, bočne trake ili čak gumbe "vrh stranice" koji su fiksirani na jednom mjestu. Sve to postaje moguće zahvaljujući fiksno pozicioniranje .
Pogledajmo primjer u kojem ćemo dizajnirati fiksnu bočnu traku.
</span> Fiksno pozicioniranje elemenata
fiksni
class = "container" >
Pogledajmo što smo učinili u ovom primjeru:
Set za elemente I visina jednaka 100%, to će nam omogućiti da postavimo visinu u postocima za našu bočnu traku. Osim toga, uklonili smo margine za ove elemente, to je neophodno za uklanjanje ugrađenih stilova preglednika.
Za našu bočnu traku postavite visinu na nadređeni element (100%), postavite širinu na 15% nadređenog elementa i postavite boju pozadine Crvena . Osim toga, naznačili su da naš bočna ploča Ima fiksno pozicioniranje , što mu omogućuje da izgleda kao da se zalijepio za ekran. Da bi se naš panel pojavio s desne strane, postavili smo desnu vrijednost na 0 (odmak pozicioniranog elementa od desnog ruba prozora preglednika).
Za demonstraciju fiksno pozicioniranje napravili smo spremnik visine 2000 piksela. Sada, ako pomičemo stranicu, naša bočna traka će ostati na mjestu, ali će se sadržaj spremnika (glavni sadržaj) pomicati.
Rezultat našeg primjera:
Statičko pozicioniranje
Pa, konačna vrsta pozicioniranja je statičko pozicioniranje (statično), ti i ja smo već nekoliko puta pričali o tome. Statičko pozicioniranje to je klasično u potoku HTML dokument
Želio bih vam skrenuti pozornost na jednu činjenicu da se gore spomenuta svojstva, koja su odgovorna za pomicanje elemenata, ne mogu primijeniti na elemente koji imaju statičko pozicioniranje , odnosno imaju pozicioniranje koje je standardno postavljeno.
Napredno apsolutno pozicioniranje
Prije nego prijeđete na napredne aplikacije apsolutno pozicioniranje , želim vam skrenuti pozornost na činjenicu da ako vi nemoj naznačiti vrijednost okomitog položaja elementa sa apsolutno pozicioniranje (gore ili dolje), ili obrnuto u vodoravni položaj (lijevo ili desno), zatim preglednik će ostaviti element na istom mjestu na stranici gdje se nalazi u općem toku (bit će postavljen na vrh sadržaja ako ga ima).
Već smo naučili da element sa apsolutno pozicioniranje (pozicija : apsolutna) pozicioniran u odnosu na dati rub svog pretka , a predak mora imati poziciju vrijednosti različito od zadanog -statički inače izvršit će se brojanje (pomak). u odnosu na navedeni rub prozora preglednika . Vrijeme je da pogledamo ovakav primjer:
</span> Apsolutno pozicioniranje u odnosu na pretka
relativna
class = "container" > spremnik
klasa = "apsolutno" > apsolutni
Pogledajmo pobliže što smo učinili u ovom primjeru:
Za početak smo postavili blok (element ), koji ima
relativno pozicioniranje . Odredili smo mu unutarnju marginu od vrha (margin-top) jednaku 100 piksela, postavili širinu, visinu i boju pozadine.
Zatim je unutar njega postavljen blok element (element ), koji ima visinu od 100 piksela i boju pozadine
žuta boja . Kao što razumijete, ovaj element ima
statičko pozicioniranje (zadana vrijednost) budući da je vrijednost svojstva položaja
nije naslijeđeno , i nije naslijedio roditeljski blok
relativno pozicioniranje .
Zatim smo stavili unutar naše posude s statičko pozicioniranje element koji ima apsolutno pozicioniranje . Postavite njegovu širinu i visinu na 50 piksela i boju pozadine Crvena . Obratite pozornost na najviše važna točka , da ovaj element nije pozicioniran u odnosu na prozor preglednika, ne u odnosu na nadređeni element, već u odnosu na svog pretka, koji ima pozicioniranje drugačije od statičkog! Kao rezultat toga, postavili smo naš element u gornji desni kut njegovog pretka s relativno pozicioniranje .
Rezultat našeg primjera:
Sažmimo što smo naučili u ovom članku o pozicioniranju elemenata:
Statičko pozicioniranje to je klasično postavljanje elemenata odozgo prema dolje (stavke se prikazuju redoslijedom kojim su navedene u toku HTML dokumenta ), smatra se zadanom vrijednošću za sve elemente.Element je postavljen u odnosu na prozor preglednika ako ima fiksno pozicioniranje (element je fiksiran prilikom pomicanja dokumenta).
Element je postavljen u odnosu na prozor preglednika ako ima apsolutno pozicioniranje , i on nije ugniježđen unutar elementa koji ima drugo pozicioniranje osim statički
.
Element za koji je postavljen relativno pozicioniranje pomaci u odnosu na položaj u nizu dokumenata (u odnosu na njegov trenutni položaj ).
Element je postavljen u odnosu na strane drugog elementa u slučaju da on ima pretka, ili roditelja sa apsolutni , relativna ili fiksni pozicioniranje .
Pitanja i zadaci na temu
Prije nego prijeđete na sljedeću temu, dovršite zadatak za vježbanje:
2016-2019 Denis Bolshakov, komentare i prijedloge u vezi s radom stranice možete poslati na [email protected]
Kako poravnati sliku udesno
Dug pasus s nekoliko rečenica. Sadrži tekst koji opisuje označeno svojstvo i sliku koju treba pritisnuti na rub desne strane.
Izvlači element iz toka i gura ga do ruba lijeve ili desne strane roditelja. Elementi i tekst smješteni u kodu nakon float elementa teku oko njega na suprotnoj strani.
Ne nasljeđuje se, odnosi se na sve elemente. izvlači element iz tijeka i postavlja ga na vrh ostatka sadržaja. Može se pomicati u odnosu na granice svog nadređenog, koji ima vrijednost položaja različitu od static, koristeći svojstva top, right, bottom, left. Kada smjer: ltr; svojstvo lijevo ima prednost nad svojstvom desno, osim ako je svojstvo lijevo postavljeno na auto.
Dug pasus s nekoliko rečenica.
Sadrži tekst koji opisuje označeno svojstvo i sliku koju treba pritisnuti na rub desne strane.
Vlasništvo
poravnanje teksta naslijeđeno, primijenjeno na blok elemente.
Vodoravno poravnava sve ugrađene elemente i tekst. Ne pomiče sam element niti pomiče blokove i ne radi ako se da umetnutom elementu. Ima nekoliko značenja, uključujući
pravo, što vam omogućuje pomicanje sadržaja udesno.
Vlasništvo
margin-lijevo ne nasljeđuje se, odnosi se na sve elemente.
Ima smisla
auto, koji vodoravno poravnava element bloka. Naime
margin-lijevo: auto; gura element na desni rub roditelja. Ovu poziciju može promijeniti nekretnina
margin-desno..html">Kada
margin-lijevo: auto; I
margin-desno: auto; element je postavljen centriran na širinu pretka.
Vlasništvo
plutati ne nasljeđuje se, odnosi se na sve elemente.
Izvodi element iz toka i gura ga do ruba lijeve ili desne strane roditelja. Elementi i tekst smješteni u kodu nakon float elementa teku oko njega na suprotnoj strani.
Vlasništvo
položaj ne nasljeđuje se, odnosi se na sve elemente.
pozicija: apsolutna; izvlači element iz tijeka i postavlja ga na vrh ostatka sadržaja. Može se pomicati u odnosu na granice roditelja čija je vrijednost
položaj različito od
statički, koristeći svojstva
vrh,
pravo,
dno,
lijevo. Na
smjer: ltr; imovine
lijevo ima prednost pred imovinom
pravo, osim kada imovina
lijevo ima značenje
auto.
Vlasništvo prikaz nije naslijeđeno, primjenjuje se na sve elemente..html">tag stol, A tablica-ćelija — td.
Savjet: na
u ovom primjeru Zanimljivo je vidjeti kako se slika ponaša kada se smanji veličina prozora preglednika.
Kako poravnati tekst udesno
Kratki tekst desno
Kratki tekst desno
Povezani materijali:
ažurirano vodoravno html poravnanje html opravdanje želite ažurirati
Kako poravnati blok udesno
Element ne utječe na visinu ili širinu roditelja, niti uzrokuje njegovo prelijevanje.
Element ne utječe na visinu roditelja osim ako se plutajući element ne očisti.
Kako poravnati više blokova udesno
marža: 0 100% 0 -100%;
/* ne morate dodati još jedan omotač, ali u prethodnom stilu navedite transform: translate(-100%, 0); */ pozadina:zelena; )
CSS tretira izgled HTML dokumenta kao stablo elemenata. Poziva se jedinstveni element koji nema nadređeni element korijen element. Modul CSS pozicioniranja opisuje kako se bilo koji element može pozicionirati bez obzira na redoslijed dokumenta (tj. izuzeti iz "tijeka").
U CSS2, svaki element u stablu dokumenta generira nula ili više okvira, slijedeći model okvira. CSS3 modul nadopunjuje i proširuje shemu pozicioniranja. Lokacija ovih blokova je regulirana:
veličina i vrsta elementa,
shema pozicioniranja (normalni protok, protok i apsolutno pozicioniranje),
odnosi između elemenata u stablu dokumenta,
vanjske informacije (na primjer, veličina okvira za prikaz, unutarnje dimenzije slike itd.).
Sheme pozicioniranja
U CSS-u, blok elementa može se pozicionirati prema tri sheme pozicioniranja:
1. Normalni protok
Normalni tijek uključuje kontekst oblikovanja bloka (elementi s blokom za prikaz, stavkom popisa ili tablicom), kontekst za oblikovanje u liniji (elementi s inline prikazom, blokom za prikaz ili tablicom za prikaz), te relativno i ljepljivo pozicioniranje elemenata na razini bloka i linije.
2. Teći okolo
U modelu toka, blok se uklanja iz normalnog toka i postavlja lijevo ili desno. Sadržaj se omotava oko desne strane elementa s float: left i lijeve strane elementa s float: right.
3. Apsolutno pozicioniranje
U modelu apsolutnog pozicioniranja, blok je potpuno uklonjen iz normalnog toka i dobio mu je položaj u odnosu na blok koji ga sadrži. Apsolutno pozicioniranje provodi se pomoću vrijednosti position: absolute; i položaj: fiksni; .
"Off-flow" element može biti float, apsolutno pozicioniran element ili korijenski element.
Općenito govoreći, blok koji sadrži je blok koji sadrži drugi element. U slučaju normalnog protoka korijena html element je sadržavajući blok za element tijela, koji je sa svoje strane sadržavajući blok za sve njegove dječji elementi i tako dalje. U slučaju pozicioniranja, sadržajni blok u potpunosti ovisi o vrsti pozicioniranja.
Za nekorijenski element s položajem: static; ili položaj: relativan; blok koji ga sadrži formira rub područja sadržaja najbližeg roditeljskog bloka na razini, ćelije tablice ili bloka na razini retka.
Za nekorijenski element s položajem: absolute; blok koji ga sadrži postavljen je na najbliži nadređeni element s vrijednošću položaja koja nije statična kako slijedi:
ako je predak element na razini bloka, blok koji ga sadrži bit će područje sadržaja plus ispuna elementa;
ako je predak element na razini linije, sadržavajući blok bit će područje sadržaja;
ako nema predaka, tada se sadržavajući blok elementa definira kao početni sadržavajući blok.
Za "ljepljivi" blok, blok koji ga sadrži najbliži je predak pomičnom ili prozoru za prikaz, inače.
2. Odabir sheme pozicioniranja: svojstvo položaja
Svojstvo položaja određuje koji se algoritam pozicioniranja koristi za izračunavanje položaja bloka.
Imovina se ne nasljeđuje.
položaj
Značenje:
statički
Blok je postavljen prema normalnom protoku. Svojstva top , right , bottom i left nisu primijenjena. Zadana vrijednost.
relativna
Položaj bloka izračunava se prema normalnom protoku. Blok se tada pomakne u odnosu na svoj normalni položaj i u svim slučajevima, uključujući elemente tablice, ne utječe na položaj bilo kojeg sljedećeg bloka. Međutim, takav pomak može rezultirati preklapanjem blokova, kao i trakom za pomicanje ako postoji preljev. Relativno pozicioniran blok zadržava svoje dimenzije, uključujući prijelome redaka i prostor izvorno rezerviran za njega.
Relativno pozicioniran blok stvara novi sadržavajući blok za svoju apsolutno pozicioniranu djecu.
Utjecajni položaj: relativan; na elementima tablice definira se na sljedeći način:
apsolutni
Položaj bloka (i eventualno veličina) specificiran je pomoću svojstava top, right, bottom i left. Ova svojstva definiraju eksplicitni pomak u odnosu na blok koji ga sadrži. Apsolutno pozicionirani blokovi potpuno su uklonjeni iz normalnog toka bez utjecaja na postavljanje sestrinskih elemenata. Margine apsolutno pozicioniranih blokova se ne skupljaju.
Apsolutno pozicionirani blok stvara novi sadržavajući blok za djecu normalnog toka i djecu s pozicijom: absolute; .
Sadržaj apsolutno pozicioniranog elementa ne može se omotati oko drugih blokova. Apsolutno pozicionirani blok može sakriti sadržaj drugog bloka (ili sam može biti skriven), ovisno o vrijednosti z-indeksa preklapajućih blokova.
ljepljiv
Položaj bloka izračunava se prema normalnom protoku. Blok je tada pomaknut u odnosu na svog najbližeg pomičnog prethodnika ili okvir za prikaz ako niti jedan od predaka nema pomicanje. Ljepljivi blok može preklapati druge blokove i stvoriti trake za pomicanje ako se prelije.
Ljepljivi blok zadržava svoje dimenzije, uključujući prijelome redaka i prostor izvorno rezerviran za njega.
Ljepljivi blok stvara novi sadržavajući blok za apsolutno i relativno pozicioniranu djecu.
fiksni
Fiksno pozicioniranje slično je apsolutnom pozicioniranju, osim što je okvir za prikaz postavljen za blok koji ga sadrži. Takav blok je potpuno uklonjen iz tijeka dokumenta i nema položaj u odnosu na bilo koji dio dokumenta. Fiksni blokovi se ne pomiču prilikom pomicanja dokumenta. U tom su pogledu slične fiksnim pozadinskim slikama. Prilikom ispisa, fiksni blokovi se ponavljaju na svakoj stranici, a blok koji ih sadrži definira područje stranice za njih. Blokovi s fiksnim položajem koji su veći od površine stranice obrezuju se.
početni
Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti
Nasljeđuje vrijednost svojstva od nadređenog elementa.
Sintaksa
Položaj: statičan; položaj: relativan; pozicija: apsolutna; položaj: ljepljiv; položaj: fiksni; položaj: početni; položaj: naslijediti;
3. Pomak bloka: svojstva vrh, desno, dno, lijevo
Element se smatra pozicioniranim ako je njegovo svojstvo položaja postavljeno na nešto što nije statično. Pozicionirani elementi generiraju pozicionirane blokove i mogu se pozicionirati prema sljedeća četiri fizička svojstva:
Sintaksa
Vrh: 10 px; vrh: 2em; vrh: 50%; vrh:auto; vrh: naslijediti; gore: početno;
Svojstvo top specificira udaljenost na kojoj je gornji rub apsolutno pozicioniranog bloka (ovisno o margini) pomaknut ispod gornjeg ruba bloka koji ga sadrži. Za relativno pozicionirane blokove, specificira pomak u odnosu na gornji rub samog bloka (to jest, bloku se daje položaj u normalnom toku, a zatim pomak od tog položaja prema ovom svojstvu).
Sintaksa
Desno: -10px; desno: .5em; desno: -10%; desno: auto; desno: naslijediti; desno: početno;
Svojstvo desno određuje udaljenost na kojoj je desni rub apsolutno pozicioniranog bloka (uzimajući u obzir njegovu marginu) pomaknut ulijevo od desnog ruba bloka koji ga sadrži. Za relativno pozicionirane blokove, definira pomak u odnosu na desni rub samog bloka.
Sintaksa
Dolje: 50px; dolje: -3em; dolje: -50%; dolje: auto; dolje: naslijediti; dolje: početno;
Svojstvo bottom specificira udaljenost na kojoj je donji rub bloka pomaknut prema gore u odnosu na donji rub bloka koji ga sadrži. Za relativno pozicionirane blokove, definira pomak u odnosu na donji rub samog bloka.
Sintaksa
Lijevo: 50px; lijevo: 10em; lijevo: 20%; lijevo: auto; lijevo: naslijediti; lijevo: početno;
Svojstvo lijevo određuje udaljenost na kojoj je lijevi rub pomaknut udesno od lijevog ruba bloka koji ga sadrži. Za relativno pozicionirane blokove, definira pomak u odnosu na lijevi rub samog bloka.
Pozitivne vrijednosti pomiču element unutar sadržavajućeg bloka, a negativne vrijednosti pomiču ga izvan sadržavajućeg bloka.
4. Omatanje: svojstvo float
Prelamanje omogućuje blokovima da lebde lijevo ili desno na trenutnom retku. "Plutajući blok" pomiče se lijevo ili desno dok njegov vanjski rub ne dotakne rub bloka koji ga sadrži ili vanjski rub drugog plutajućeg bloka. Ako postoji linijska jedinica, vanjska gornji dio plutajući blok je poravnat s vrhom trenutnog linearnog bloka.
Kada koristite svojstvo float na elementima, preporuča se postaviti širinu. To će omogućiti pregledniku da stvori prostor za drugi sadržaj. Ako nema dovoljno vodoravnog prostora za plutajući element, on će biti gurnut prema dolje dok ne stane. U tom slučaju, drugi elementi na razini bloka će ga ignorirati, a elementi na razini reda će se pomaknuti udesno ili ulijevo, oslobađajući prostor za njega i teći oko njega.
Pravila koja upravljaju ponašanjem plutajućih strana opisana su svojstvom float.
Imovina se ne nasljeđuje.
Sintaksa
Plutanje: lijevo; plovak: desno; plovak: nijedan; float: naslijediti;
Plutajući blok preuzima dimenzije svog sadržaja, uzimajući u obzir podstavu i obrube. Gornja i donja margina plutajućih elemenata se ne skupljaju.
Plutajući elementi mogu koristiti negativne margine za pomicanje izvan područja sadržaja nadređenog elementa.
Svojstvo automatski mijenja izračunatu (preglednikom prikazanu) vrijednost svojstva prikaza za prikaz: blok za sljedeće vrijednosti: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-caption, table-header-group, table-footer-group. Vrijednost inline-table mijenja se u tablicu.
Svojstvo nema učinka na elemente s display: flex i display: inline-flex. Ne odnosi se na apsolutno pozicionirane elemente.
Riža. 3. Omotajte elemente
5. Kontrola protoka oko plutajućih elemenata: Clear Property
Svojstvo clear određuje koje strane blokova elementa ne bi trebale biti uz lebdeće blokove iznad njega u izvornom dokumentu. U CSS2 i CSS 2.1, svojstvo se odnosi samo na neplutajuće elemente na razini bloka.
Imovina se ne nasljeđuje.
Sintaksa
Jasno: ništa; jasno: lijevo; jasno: desno; jasno: oboje; jasno: naslijediti;
Kako biste spriječili prikaz pozadine ili obruba ispod plutajućih elemenata, koristite pravilo (overflow: hidden;).
6. Definiranje konteksta preklapanja: svojstvo z-index
U CSS-u svaki blok ima poziciju u tri dimenzije. Osim vodoravnih i okomitih položaja, blokovi se slažu duž Z osi jedan na drugi. Položaj duž Z osi je posebno važan kada se blokovi vizualno preklapaju.
Riža. 1. Položaj elemenata duž Z osi
Redoslijed iscrtavanja stabla dokumenta na ekranu opisan je pomoću prekriti kontekst . Svaki blok pripada jednom kontekstu preklapanja. Svaki blok u danom kontekstu preklapanja ima razinu cijelog broja, što je njegov položaj na Z osi u odnosu na druge blokove u istom kontekstu preklapanja.
Blokovi s višim razinama uvijek se pojavljuju prije blokova s nižim razinama, a blokovi s istom razinom raspoređeni su odozdo prema gore prema redoslijedu elemenata u izvornom dokumentu. Kutija elementa ima isti položaj kao i roditeljska kutija osim ako mu svojstvo z-index ne daje drugu razinu.
Svojstvo z-index omogućuje promjenu načina na koji se elementi slažu jedan na drugi.
Imovina se ne nasljeđuje.
Sintaksa
Z-indeks: automatski; z-indeks: 0; z-indeks: 5; z-indeks: 999; z-indeks: -1; z-indeks: naslijediti; z-indeks: početni;
Svijet besplatnih programa i korisnih savjeta
