se pogosto uporablja v postavitvi sodobnih spletnih mest za ustvarjanje mrež in preprosto pomeni nekakšen blok ali vsebnik. Vanj je mogoče ugnezditi tudi druge oznake, kar ni mogoče pri vseh elementih bloka, torej
priročen za uporabo. Bloki so običajno zloženi drug na drugega in niso vstavljeni v inline elemente. Elementi HTML v vrstici so besedilo, CSS pa se uporablja za njegovo oblikovanje.
Glede na širino vsebine je skupna širina bloka vsota vrednosti desnega in levega oblazinjenja, roba, obrobe in širine. Na določeni višini - od zgornjega in spodnjega oblazinjenja, robov, robov in višine. Besedilo v elementih blokov je privzeto poravnano levo. Če eden od njih vsebuje elemente v vrstici skupaj z elementi bloka, se okoli elementov v vrstici ustvari anonimni blok. Zanj bo uporabljen privzeti slog. Prav tako bo podedoval podani slog, dodeljen njegovemu nadrejenemu.
Pretok dokumentov Tok se nanaša na vrstni red, v katerem so prikazani elementi strani, ki ga določajo lastnosti, določene v CSS. V tem primeru so bloki privzeto postavljeni od zgoraj navzdol in če ni dovolj prostora, se oznake v vrstici premaknejo v novo vrstico in razporedijo od zgoraj navzdol in od leve proti desni. Lokacija elementa na strani je odvisna od njegovega mesta v kodi: višje kot je, prej se nahaja. Vsak element bloka je videti kot pravokotnik, ki odriva svoje sosede. To vedenje lahko spremenite s posebnimi lastnostmi. Poravnava določenih blokov na sredino ali stranice vsebnika v CSS se imenuje pozicioniranje.
Elementi za pozicioniranje Postavitev blokov je mogoče nadzorovati z uporabo absolutnega in relativnega pozicioniranja. Pozicioniranje se uporablja za določanje določene lokacije velikih delov strani, za ustvarjanje zapletenih vmesnikov, pojavnih oken in okrasnih elementov. Glavna lastnost, ki se uporablja za pozicioniranje blokov v CSS, je položaj. Ima štiri glavne lastnosti:
sorodnik; absolutno; fiksno; statična.
Z njihovo pomočjo lahko preklapljate med načini postavitve tako, da določite enega od štirih parametrov: zgoraj, desno, spodaj ali levo. Obstaja tudi lastnost za razvrščanje slojev - z-index. Pozicioniranje s statično lastnostjo se običajno ne uporablja, ker označuje privzeto pozicioniranje blokov. Zato uporaba kakršnih koli parametrov na to nikakor ne vpliva. Druge tri lastnosti se uporabljajo za postavitev: relativna, absolutna, fiksna.
Relativno pozicioniranje Relativno pozicioniranje blokov v CSS, to je lastnost position: relative, pomeni, da lahko element premikamo in spreminjamo njegov prvotni položaj. Takšen blok še vedno ostane v toku. Pravzaprav ni izpodrinjen on sam, ampak njegova kopija. Vrednosti lastnosti so nastavljene tako, da natančno kažejo, koliko se bo blok premaknil v eno ali drugo smer. Najpogosteje se merijo v slikovnih pikah. Vendar je sprejemljivo uporabiti druge enote.
Uporaba lastnosti za relativno pozicioniranje Lastnost top premakne kopijo določenega bloka navzgor ali navzdol za število slikovnih pik, določeno v lastnosti. Ko ga uporabljate, elementi, ki se nahajajo spodaj ali zgoraj, ostanejo na svojih mestih, saj se dejansko premaknjeni blok ne premakne nikamor.
Spodnja lastnost premakne blok v nasprotni smeri od zgornje lastnosti. Pozitivna vrednost ga pomaga premakniti navzgor, negativna pa navzdol. Lastnosti desno in levo premakneta element v desno oziroma levo. Če jih vse združite, lahko nastavite natančno lokacijo bloka na strani in ga premaknete vzdolž navpične in vodoravne koordinatne osi. Če povečate zamike, se ne bodo izračunale od roba samega bloka, temveč od njegovega odmika kopije na stran.
Absolutno pozicioniranje Absolutno pozicioniranje blokov v CSS je določeno z vrednostjo lastnosti absolutnega položaja. Element, ki je pozicioniran, absolutno izpade iz toka dokumenta, njegovo mesto pa prevzamejo sosednji bloki. Širina takega elementa je raztegnjena glede na njegovo vsebino in jo je mogoče premakniti z nastavitvijo določenih vrednosti za lastnosti zgoraj, levo, desno, spodaj. Absolutno pozicioniranje blokov v CSS je uporabno za naslove. Toda položaj: absolutno ne deluje samo za blokovne elemente, ampak tudi za elemente v vrstici.
Poravnava elementov na sredino Pozicioniran absolutno inline element se bo obnašal povsem enako kot inline element. Zato se lahko pozicioniranje uporablja tudi za nadzor besedila v CSS. Zanj lahko uporabite nekaj novih lastnosti, na primer spremenite višino in širino. Centriranje in navpična poravnava v CSS uporabljata kombinacijo več lastnosti. Nadzoruje navpično poravnavo zgornje lastnosti. Če želite sredinsko postaviti blok v CSS, mora biti glavni vsebnik relativno postavljen, poravnani element pa mora biti absolutno postavljen. Vsebnik mora nastaviti zgornjo lastnost: 50 % in za premik elementa za polovico lastne višine uporabite lastnost prevajanja z vrednostjo »0, -50 %«. Absolutno pozicionirane elemente je mogoče ločiti v nov tip, saj se na njih uporabijo lastnosti, ki niso na voljo za druge vrste pozicioniranja.
Pozicioniranje glede na zgornji levi kot brskalnika Lastnosti levo, zgoraj, desno in spodaj delujejo različno na absolutno in relativno pozicioniranih elementih. Za relativne elemente te lastnosti nastavijo odmik glede na lokacijo elementa. Absolutno pozicionirani zasedajo mesto glede na določen koordinatni sistem, vezan na velikost okna brskalnika. Izhodišča tega sistema so vogali okna. Pri uporabi lastnosti left se zamik šteje od leve strani brskalnika, vendar drsnega traku ne bo. Lastnost top, ko je postavljena absolutno, določa odmik od vrha brskalnika do vrha elementa, za katerega je uporabljena. S kombinacijo obeh lastnosti je mogoče element premakniti glede na zgornji levi kot brskalnika.
Pozicioniranje glede na zgornji desni kot brskalnika Podobno lahko z uporabo desnih in zgornjih lastnosti pritisnete element na desno stran okna brskalnika in spremenite njegov navpični položaj ter ga premaknete v zgornji desni kot. Če je desna lastnost nastavljena na negativno vrednost, se bo blok premaknil izven meje okna. Po tem bi se moral prikazati drsni trak. Če želite premakniti element navzdol, uporabite lastnost bottom. Določa zamik od spodnjega roba okna brskalnika do dna bloka. Če je njegova vrednost negativna, se prikaže tudi drsni trak, saj se element premakne čez spodnjo mejo okna brskalnika.
Koordinatni sistem za absolutno pozicioniranje Privzeto so vsi elementi, ki jim je podana absolutna pozicija, vezani na en koordinatni sistem - okno brskalnika. Lahko pa se spremeni tako, da se nekemu nadrejenemu elementu dodeli relativni položaj. Nato bo podrejeni blok spremenil svojo lokacijo glede na nadrejenega. Če je med nadrejenimi elementi več z relativnim položajem, se štetje izvede od najbližjega od njih. V tem primeru bo privzeti položaj glede na določeno v oznaki telesa.
Referenčna točka za absolutno pozicioniran element Preden je element dobil absolutno pozicioniranje, je bil na nekem mestu, imenovanem implicitni izvor. Če takšnemu bloku niso dodeljene lastnosti, se ne bo premaknil. Lahko ga premaknete tako, da nastavite lastnost roba. Delovalo bo podobno kot lastnosti pozicioniranja. Če vrednosti leve lastnosti in vseh ostalih ne določite, bo enaka samodejnemu. Za vrnitev elementov na prvotna mesta lahko uporabite tudi samodejno.
Fiksno pozicioniranje Druga vrednost je fiksna. Lastnost položaja zasidra element na določeni lokaciji. Fiksno pozicioniranje se pogosto uporablja za ustvarjanje menijev v CSS. Podoben je absolutnemu, vendar fiksni blok izpade iz toka. Tudi med pomikanjem po strani bo tak element ostal na mestu, zato ga je priročno uporabiti za ustvarjanje menija v CSS. Začetna točka bo vezana na okno brskalnika. Če obstaja več pozicioniranih blokov, se za njihovo razvrščanje uporabi lastnost z-index. Z njegovo pomočjo lahko prekrivate relativne bloke z absolutnimi, če jim dodelite ustrezen indeks, izražen kot celo število. Večji kot je, višji bo blok.
Ena najboljših stvari pri CSS je ta, da nam slogi omogočajo, da postavimo vsebino in elemente na stran na skoraj kakršen koli način. To našemu dizajnu doda strukturo in pomaga narediti vsebino bolj vizualno.
Nekaj jih je različni tipi pozicioniranje v CSS, ima vsaka od teh vrst svoj obseg. V tem poglavju si bomo ogledali nekaj različnih primerov uporabe – ustvarjanje postavitev za večkratno uporabo in edinstveno pozicioniranje elementov za enkratno uporabo – in opisali nekaj metod za to.
Pozicioniranje preko plovca Eden od načinov za pozicioniranje elementov na strani je z lastnostjo float. Ta lastnost je precej vsestranska in jo je mogoče uporabiti na veliko različnih načinov.
V bistvu lastnost float vzame element, ga odstrani iz običajnega toka strani in ga postavi levo ali desno od nadrejenega elementa. Vsi drugi elementi na strani se bodo ovili okoli takega elementa. Na primer, odstavki se bodo ovili okoli slike, če element
Ko je lastnost float uporabljena za več elementov hkrati, omogoča ustvarjanje postavitve z lebdečimi elementi drug poleg drugega ali nasproti drugega, kot je prikazano v postavitvi z več stolpci.
Lastnost float ima več vrednosti, najbolj priljubljeni sta levi in desni, ki elementu omogočata lebdenje levo ali desno od nadrejenega.
Img (lebdenje: levo;)
lebdi v praksi Ustvarimo splošno postavitev strani z glavo na vrhu, dvema stolpcema na sredini in nogo na dnu. V idealnem primeru bi morala biti ta stran označena z elementi
,
, in , kot je opisano v 2. lekciji, »Predstavljamo HTML«. Znotraj elementa HTML je lahko videti takole:
Prikaz postavitve brez plovca Tukaj so elementi in temeljijo na blokih, zato se privzeto nalagajo drug na drugega. Vendar želimo, da ti elementi sedijo drug ob drugem. Z nastavitvijo float na kot levo , in za kot desno , jih lahko postavimo kot dva stolpca drug nasproti drugega. Naš CSS bi moral izgledati takole:
Odsek ( float: levo; ) na stran ( float: desno; )
Za referenco so lebdeči elementi postavljeni vzdolž roba nadrejenega elementa. Če ni nadrejenega elementa, bo lebdeči element nameščen vzdolž roba strani.
Ko element nastavimo na lebdenje, ga odstranimo iz običajnega toka dokumenta HTML. To povzroči, da privzeta širina tega elementa postane širina njegove vsebine. Včasih, na primer ko ustvarjamo stolpce za postavitev za večkratno uporabo, je to vedenje nezaželeno. To je mogoče popraviti z dodajanjem lastnosti širine s fiksno vrednostjo za vsak stolpec. Poleg tega, da preprečimo, da bi se lebdeči elementi dotikali drug drugega, zaradi česar bi vsebina enega elementa sedela poleg drugega, lahko uporabimo lastnost roba za nastavitev presledka med elementi.
Spodaj razširimo prejšnji blok kode z dodajanjem roba in širine za vsak stolpec, da bolje oblikujemo želeni rezultat.
Odsek ( float: levo; rob: 0 1,5 %; širina: 63 %; ) na stran ( float: desno; rob: 0 1,5 %; širina: 30 %; )
Predstavitev postavitve s plavajočim float lahko spremeni prikazano vrednost elementa Pri lebdečem elementu je pomembno tudi razumeti, da je element odstranjen iz običajnega toka strani in da se lahko spremeni privzeta prikazana vrednost elementa. Lastnost float se zanaša na to, da je prikazana vrednost elementa nastavljena na blok, in lahko spremeni privzeto prikazano vrednost elementa, če še ni upodobljena kot blokovni element.
Na primer element, katerega prikaz je določen kot inline, kot je inline , ignorira vse lastnosti višine ali širine. Vendar, če določite plavajočo vrednost za element v vrstici, se bo prikazana vrednost spremenila v blok in takrat lahko element že prevzame lastnosti višine ali širine.
Ko plavamo element, moramo biti previdni, kako vpliva na vrednost lastnosti prikaza.
Za dva stolpca lahko nastavite float, en stolpec kot levi in drugi kot desni, vendar bomo morali za več stolpcev spremeniti naš pristop. Recimo, na primer, da bi radi imeli vrstico treh stolpcev med našimi elementi in . Če zavržemo svoj element in uporabite tri elemente , je lahko naš HTML videti takole:
Za ureditev teh treh elementov v vrstici s tremi stolpci moramo za vse elemente nastaviti float kot levo. Prilagoditi moramo tudi širino upoštevajoč dodatne stolpce in jih postavljajo enega poleg drugega.
Odsek (lebdeči: levo; rob: 0 1,5 %; širina: 30 %; )
Tukaj imamo tri stolpce, vsi z enako širino in vrednostjo roba ter lebdeči nastavljen na levo.
Demonstracija postavitve s tremi stolpci s plavajočim Čiščenje in lebdenje vsebine Lastnost float je bila prvotno zasnovana tako, da omogoča pretok vsebine okoli slik. Sliki je mogoče dati lebdenje in vsa vsebina okoli te slike naravno teče okoli nje. Čeprav to odlično deluje pri slikah, lastnost float v resnici ni bila namenjena uporabi za namene postavitve in pozicioniranja, zato prinaša nekaj pasti.
Ena od teh pasti je, da se včasih pravilni slogi ne prikažejo na elementu, ki je sosednji lebdečemu elementu ali je njegov nadrejeni element. Ko je element nastavljen na lebdenje, je odstranjen iz običajnega toka strani in posledično lahko to negativno vpliva na sloge elementov okoli tega lebdečega elementa.
Vrednosti lastnosti roba in oblazinjenja se pogosto interpretirajo nepravilno, zaradi česar se zlijejo z lebdečim elementom. Prizadete so lahko tudi druge lastnosti.
Druga napaka je, da se včasih neželena vsebina začne ovijati okoli elementa float. Odstranitev elementa iz toka dokumenta omogoči vsem elementom okoli lebdečega elementa, da ga obidejo in zavzamejo ves razpoložljiv prostor okoli lebdečega elementa, kar je pogosto nezaželeno.
V našem primeru prejšnjih dveh stolpcev, potem ko smo elementom dodali plavajočo oznako in , vendar preden nastavite lastnost širine kateremu koli od njih, vsebino znotraj elementa je bil nameščen med dvema poenostavljenima elementoma nad njim, ki sta zapolnila ves razpoložljivi prostor. Zato element bi bil v prostoru med elementi in , ki zavzame prosti prostor.
Predstavitev postavitve brez čiščenja plavajočega elementa Da preprečimo, da bi se vsebina ovila okoli lebdečih elementov, moramo počistiti lebdeče in vrniti stran v normalni tok. Ogledali si bomo, kako počistiti plovce, nato pa si bomo ogledali njihovo vsebino.
Čiščenje plovcev Čiščenje lebdečega elementa se izvede z uporabo lastnosti clear, ki ima več različnih vrednosti: najpogosteje uporabljene vrednosti so levo, desno in obe.
Div ( jasno: levo; )
Vrednost levo počisti leve lebdeče, medtem ko vrednost desno počisti desne lebdeče. Vrednost obeh pa bo počistila leve in desne lebdeče in je pogosto najbolj idealna možnost.
Če se vrnemo k prejšnjemu primeru, če na elementu uporabimo lastnost clear z vrednostjo obeh , potem lahko počistimo plovec. Pomembno je, da se clear uporabi za element, določen za lebdečimi elementi, in ne pred njim, da se stran vrne v normalni tok.
Noga ( jasno: oboje; )
Predstavitev postavitve s čiščenjem plovca Lebdenje vsebine Namesto čiščenja float je druga možnost, da nastavite vsebino na float. Rezultat bo skoraj enak, vendar lebdeča vsebina resnično zagotavlja, da bodo vsi naši slogi pravilno prikazani.
Za nastavitev lebdeče vsebine morajo biti lebdeči elementi znotraj nadrejenega elementa, deloval bo kot vsebnik, tako da bo tok dokumenta zunaj njega povsem normalen. Slog za ta nadrejeni element je predstavljen s skupinskim razredom, kot je prikazano tukaj:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; )
Tu se ne dogaja veliko, toda vse, kar CSS naredi, je, da počisti vse lebdeče elemente znotraj elementa skupine in vrne dokument v običajni tok.
Natančneje, psevdoelementa ::before in ::after, kot je razloženo v lekciji 4, dinamično ustvarjata elemente nad in pod elementom s skupino razreda. Ti elementi ne vključujejo nobene vsebine in so upodobljeni kot elementi tabele, podobno blokovnim elementom. Dinamično ustvarjen element za skupinskim elementom počisti lebdeči element znotraj skupinskega elementa, tako kot je Clear prej. Končno element skupine počisti tudi morebitne lebdeče vrednosti, ki se lahko pojavijo pred njim, če obstaja lebdeča vrednost z vrednostjo levo ali desno. Vključen je tudi majhen trik, ki poskrbi, da starejši brskalniki delujejo dobro.
Tukaj je več kode kot le ukaz clear: both, vendar je lahko zelo uporaben.
Glede na našo postavitev strani z dvema stolpcema bi lahko zavili in nadrejeni element. Ta nadrejeni element bo vseboval lebdeče elemente. Koda bo videti takole:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) section ( float: left ; rob: 0 1,5 %; širina: 63 %; ) na stran (lebdeč: desno; rob: 0 1,5 %; širina: 30 %; )
Predstavitev postavitve s plavajočo vsebino Tukaj prikazana tehnika je znana kot "clearfix" in jo pogosto vidimo na drugih mestih z imenom razreda clearfix ali cf. Za skupino imena razreda smo se odločili, ker predstavlja skupino elementov in bolje izraža vsebino.
Ko so elementi nastavljeni na plavajoče, je pomembno spremljati, kako vplivajo na potek strani, in zagotoviti, da se potek strani ponastavi s čiščenjem ali prek lebdeče vsebine, kot je predvideno. V nasprotnem primeru lahko spremljanje lebdečih elementov povzroči veliko preglavic, zlasti na straneh, ki vsebujejo več vrstic, od katerih ima vsaka več stolpcev.
Na praksi Vrnimo se na spletno mesto Styles Conference in poskusimo dodati lebdeče vsebini.
Najprej, preden uporabimo float za kateri koli element, zagotovimo vsebino tem lebdečim elementom tako, da našemu CSS dodamo clearfix. V datoteki main.css, tik pod našimi slogi mreže, bomo dodali clearfix pod ime razreda skupine, tako kot prej. /* ================================================== ====== Clearfix ======= ===================================== * / .group::before, .group::after ( vsebina: " "; prikaz: tabela; ) .group::after ( počisti: oba; ) .group ( počisti: oba; *povečava: 1; ) Zdaj, ko lahko uporabljamo float, ga definirajmo za main
notranji element kot levo in pustite, da preostala vsebina v glavi teče v desno.Če želite to narediti, elementu dodajte razred logotipa
. Nato bomo znotraj našega CSS-ja dodali nov razdelek za slog za glavno glavo. V tem razdelku bomo izbrali element z razredom logotipa in nastavite float na levo.
/* ======================================== Glavna glava ====== = ==================================== */ .logo ( float: levo; )Ko smo že tukaj, dodajmo našemu logotipu še nekaj podrobnosti. Začnimo s postavitvijo elementa
V CSS bomo dodali obrobo vzdolž vrha našega logotipa in nekaj navpičnega oblazinjenja, tako da bo logotip lahko prosto "dihal".
Logotip (obroba na vrhu: 4 slikovne pike polne #648880; oblazinjenje: 40 slikovnih pik 0 22 slikovnih pik 0; lebdenje: levo; )
Ker smo naredili element
poenostavljeno, želimo vsebino nastaviti tako, da lebdi. Neposredni starš za je element zato mu bomo dodali skupinski razred. To bo zanj uporabilo sloge clearfix, ki smo jih nastavili prej.
Element dobi obliko, zato si poglejmo element . Podobno kot smo storili z , bomo nastavili float za naše avtorske pravice kot levo znotraj in pustite, da vsi drugi elementi tečejo okoli njega v desno.
Za razliko od elementa vendar pa razreda ne bomo uporabili neposredno za lebdeči element. Tokrat bomo dodali razred nadrejenemu elementu float in uporabili edinstven izbirnik CSS, da izberemo element in mu nato dodelimo float.
Začnimo z dodajanjem razreda primarne noge elementu . Ker vemo, da bomo v notranjosti imeli poenostavljene elemente , potem bi morali dodati razred skupine, ko smo že pri tem.
Zdaj, ko je razred primarne noge nastavljen na element , lahko uporabimo ta razred za specifično izbiro elementa z z uporabo CSS . Želimo mu dati lebdenje kot levo. Ne pozabite ustvariti novega razdelka v naši datoteki main.css za slog glavne noge.
/* ========================================= Glavna klet ====== ==================================== */ .primary-footer small ( float: left; ) Za preverjanje - tukaj izberemo element , ki mora biti znotraj elementa z vrednostjo atributa razreda primarni-footer, kot je naš element
Nazadnje bomo dodali malo oblazinjenja na vrh in dno elementa. , ga boste tako nekoliko ločili od preostale strani. To lahko naredimo neposredno z uporabo razreda primarne noge.
Primarna-noga (oblazinjenje-spodnje: 44px; oblazinjenje-zgoraj: 44px; )
Ob upoštevanju vseh teh sprememb v elementih in , jih moramo vključiti na vsako stran, ne le na stran index.html.
riž. 5.01. Uporaba več lebdečih elementov in na glavni strani Styles Conference delati skupaj
Pozicioniranje prek inline-bloka Poleg uporabe float lahko vsebino pozicioniramo še z uporabo lastnosti display v kombinaciji z vrednostjo inline-block. Metoda inline-block, o kateri bomo razpravljali kasneje, je predvsem uporabna za postavitev strani ali za postavitev elementov v vrstico enega poleg drugega.
Spomnimo se, da vrednost vgrajenega bloka za lastnost prikaza prikazuje elemente v vrstici in jim omogoča, da prevzamejo vse lastnosti modela škatle, vključno z višino, širino, oblazinjenjem, obrobo in robom. Uporaba inline-block nam omogoča, da v celoti izkoristimo bločni model, ne da bi morali skrbeti, da bi odstranili vse lebdeče elemente.
inline-block v praksi Oglejmo si naš primer s tremi stolpci od začetka. Začeli bomo s shranjevanjem našega HTML-ja tako:
Zdaj namesto float za naše tri elemente spremenili bomo njihovo prikazno vrednost v inline-block in zapustili lastnosti marže in širina sta enaki kot prej. Posledično bo naš CSS videti takole:
Razdelek (zaslon: blok v vrstici; rob: 0 1,5 %; širina: 30 %; )
Na žalost samo ta koda ni dovolj za izvedbo trika in zadnjega elementa je potisnjen v novo vrstico. Ne pozabite, ker so elementi v vrstičnem bloku prikazani v vrstici drug poleg drugega, vključujejo en sam presledek med njimi. Ko se velikost vsakega posameznega prostora doda vrednosti širine in vodoravnega roba vseh elementov v vrsti, postane skupna širina prevelika in potisne zadnji element v novo vrstico. Za prikaz vseh elementov v eni vrstici odstranite prazen prostor med vsakim
Demonstracija inline-block elementov s presledkom Odstranjevanje prostora med elementi bloka v vrstici Obstaja več načinov za odstranjevanje prostora med elementi v vrstičnem bloku in nekateri so bolj zapleteni od drugih. Najbolj se bomo posvetili dvema preproste metode , od katerih se vsak pojavi znotraj HTML.
Prva rešitev je, da vsakemu novemu začetnemu elementu dodamo oznako v isti vrstici kot zaključna oznaka prejšnjega elementa . Namesto uporabe nova vrstica za vsak element na koncu začnemo elemente v isti vrstici. Naš HTML je lahko videti takole:
Pisanje blokovnih elementov v vrstici na ta način zagotavlja, da med takimi elementi v HTML ni presledka. Zato presledek ne bo prikazan, ko je stran prikazana.
Predstavitev blokovnih elementov brez presledkov Druga metoda za odstranitev presledka med elementi bloka v vrstici je odpiranje komentarja HTML takoj za zaključno oznako elementa. Nato zaprite komentar tik pred začetno oznako naslednjega elementa. To omogoča, da se elementi inline-block začnejo in končajo v ločenih vrsticah v HTML-ju in bodo "komentirali" morebiten presledek med elementi. Končna koda bo videti takole:
Nobena od teh možnosti ni popolna, so pa uporabne. Ponavadi podpiram uporabo komentarjev za boljšo organizacijo, toda katero možnost boste izbrali, je v celoti odvisno od vas.
Ustvarite postavitve za večkratno uporabo Ko gradite spletno mesto, je vedno najbolje napisati modularne sloge, ki jih je mogoče ponovno uporabiti drugje, postavitve za večkratno uporabo pa so na vrhu seznama kode za večkratno uporabo. Postavitve je mogoče ustvariti z lebdečimi elementi ali blokovnimi elementi v vrstici, toda katera deluje najbolje in zakaj?
Vprašanje, ali so za strukturo strani boljši lebdeči ali vgrajeni elementi, je odprto za razpravo. Moj pristop je uporaba blokovnih elementov za ustvarjanje mreže ali postavitve strani in nato uporaba lebdečega, ko želim, da vsebina teče okoli elementa (za kar so bili lebdeči zasnovani pri delu s slikami). Na splošno menim, da je delo z elementi inline-block lažje.
Vendar pa uporabite tisto, kar vam najbolj ustreza. Če ste z enim pristopom bolj seznanjeni kot z drugim, ga uporabite.
V pripravi so nove specifikacije CSS – zlasti lastnosti flex in grid – ki vam bodo pomagale pri odločitvi, kako najbolje postaviti svoje strani. Bodite pozorni na te metode, ko se začnejo pojavljati.
Na praksi S trdnim razumevanjem postavitev za večkratno uporabo je čas, da jih uvedemo na našem spletnem mestu Styles Conference.
Za spletno stran Styles Conference bomo ustvarili postavitev s tremi stolpci z uporabo blokovnih elementov. To bomo storili tako, da bomo dobili tri stolpce enake širine ali dva stolpca, katerih skupna širina bo razdeljena na 2/3 za enega in 1/3 za drugega.
Najprej bomo ustvarili razrede, ki določajo širino teh stolpcev. Ta dva razreda bomo imenovali col-1-3 za eno tretjino in col-2-3 za dve tretjini. V razdelku Mreža naše datoteke main.css pojdimo naprej in definirajmo te razrede in njihove ustrezne širine.
Col-1-3 (širina: 33,33 %; ) .col-2-3 (širina: 66,66 %; )
Želimo, da sta oba stolpca prikazana kot vgrajena elementa bloka. Prav tako se moramo prepričati, da je njihova navpična poravnava nastavljena na vrh vsakega stolpca.
Ustvarimo dva nova izbirnika, ki si delita prikaz in navpično poravnavo.
Col-1-3, .col-2-3 ( display: inline-block; vertical-align: top; )
Ponovno si oglejte CSS. Ustvarili smo dva izbirnika razreda col-1-3 in col-2-3, ločena z vejico. Vejica na koncu prvega izbirnika pomeni, da mu sledi drug izbirnik. Za drugim izbirnikom je odprt zavit oklepaj, ki označuje, da se začne opis sloga. Z uporabo vejice za ločevanje izbirnikov lahko en slog povežemo z več izbirniki hkrati.
Med stolpce želimo dati nekaj prostora, da bi razbili vsebino. To lahko storite tako, da vsakemu stolpcu dodate vodoravno oblazinjenje.
To dobro deluje, vendar, ko sta dva stolpca postavljena drug poleg drugega, bo širina prostora med njima dvakrat širša od prostora od zunanjega roba. Da bi to uravnotežili, bomo vse naše stolpce postavili v mrežo in ji dodali enako oblazinjenje.
Uporabimo razred mreže, da definiramo našo mrežo, nato pa damo enako vodoravno oblazinjenje razredom mreže, col-1-3 in col-2-3. Z vejicami, ki spet ločujejo naše izbirnike, je naš CSS videti takole:
Mreža, .col-1-3, .col-2-3 (padding-left: 15px; padding-desno: 15px; )
Ko postavljamo vodoravno oblazinjenje, moramo biti previdni. Ne pozabite, da smo v zadnji lekciji ustvarili vsebnik z razredom vsebnika, da bi vso našo vsebino postavili na sredino strani s širino 960 slikovnih pik. IN ta trenutek , če bi element z razredom mreže postavili znotraj elementa z razredom vsebnika, bi se njihovo vodoravno oblazinjenje seštelo in naši stolpci ne bi bili prikazani sorazmerno s širino preostale strani.
To bomo storili tako, da stari nabor pravil vsebnika razdelimo na naslednje:
Vsebnik, .grid ( rob: 0 samodejno; širina: 960 slikovnih pik; ) .vsebnik ( oblazinjenje-levo: 30 slikovnih pik; oblazinjenje-desno: 30 slikovnih pik; )
Zdaj bo vsak element z razredom vsebnika ali mreže širok 960 slikovnih pik in se nahaja na sredini strani. Poleg tega smo ohranili obstoječe vodoravno oblazinjenje za kateri koli element z razredom vsebnika, tako da smo ga premaknili v nov, ločen nabor pravil.
V redu, ves najtežji del nastavitve mreže je končan. Zdaj je čas, da delamo z našim HTML in vidimo, kako ti razredi delujejo.
Začeli bomo z dražljivkami na domači strani, v datoteki index.html, poravnanimi v treh stolpcih. Trenutno so dražljivke zavite v element s kontejnerskim razredom. Razred vsebnika želimo spremeniti v mrežo, da lahko začnemo vanj postavljati stolpce.
...
...
...
...
In končno, ker je vsak od naših stolpcev blokovni element v vrstici, se moramo prepričati, da med njimi odstranimo prazen prostor. Da bi to naredili, bomo uporabili komentarje in vsakemu razdelku dodali nekaj dokumentacije za boljšo organizacijo kode.
...
...
...
Da bi preverili, smo v vrstici 3 pustili komentar, v katerem smo identificirali razdelek »Zvočniki«, ki mu sledi. Na koncu 7. vrstice takoj za zaključno oznako odpremo komentar. Znotraj tega komentarja v 9. vrstici definiramo naslednji razdelek »Razpored«. Nato zaprite komentar na začetku 11. vrstice, tik pred začetno oznako . Podobna struktura komentarja se pojavi v vrsticah od 13 do 17 med obema elementoma , tik pred razdelkom Prizorišče. Na splošno smo komentirali vse morebitne prazne prostore med stolpci, hkrati pa uporabili iste komentarje za identifikacijo naših razdelkov.
Zdaj imamo mrežo s tremi stolpci za večkratno uporabo, ki podpira različne postavitve z uporabo 1/3 in 2/3 širine stolpcev. Naša domača stran zdaj vsebuje tri stolpce, ki ločujejo vse dražljivke.
riž. 5.02. Domača stran Styles Conference zdaj vključuje postavitev s tremi stolpci
Demo in izvorna koda Spodaj si lahko ogledate spletno stran Styles Conference v trenutnem stanju in jo tudi prenesete vir mesto v tem trenutku.
Edinstveno pozicioniranje elementov Prej ali slej bo vsakdo želel natančno pozicionirati element, vendar lebdeči ali inline-block elementi ne dopuščajo takšnega trika. Lebdeči elementi, ki odstranijo element iz poteka strani, pogosto povzročijo neželene rezultate, ker se okoliški elementi ovijejo okoli lebdečega elementa. Elementi blokov v vrstici, razen če ustvarjamo stolpce, so lahko precej težavni, ko gre za pravilno pozicioniranje. Za takšne situacije lahko uporabimo lastnost položaja v kombinaciji z lastnostmi odmika bloka.
Lastnost položaja določa, kako je element postavljen na strani in ali bo prikazan v običajnem toku dokumenta. Uporablja se v povezavi z lastnostmi odmika bloka zgoraj, desno, spodaj in levo, ki določajo, kje točno bo element postavljen s premikanjem elementa v različnih smereh.
Privzeto je vrednost položaja vsakega elementa nastavljena na statično, kar pomeni, da element obstaja v običajnem toku dokumenta in ne prevzema nobenih lastnosti za njegovo pozicioniranje. Statična vrednost je najpogosteje prepisana z relativno ali absolutno vrednostjo, ki si jo bomo ogledali v nadaljevanju.
Relativno pozicioniranje Če nastavite lastnost položaja na relativno, omogočite elementom, da se prikažejo v normalnem toku strani, s čimer rezervirajo prostor za element, kot je predvideno, in preprečijo drugim elementom, da tečejo okoli njega. Vendar pa vam omogoča tudi spreminjanje položaja elementa z uporabo lastnosti odmika. Na primer, upoštevajte ta HTML in CSS:
...
...
...
Div (višina: 100 slikovnih pik; širina: 100 slikovnih pik; ) .offset (levo: 20 slikovnih pik; položaj: relativno; zgoraj: 20 slikovnih pik; )
Demonstracija relativnega pozicioniranja Tukaj za drugi element
z razredom odmika je vrednost položaja nastavljena na relativno, kot tudi dve lastnosti odmika - levo in zgoraj. To ohranja prvotni položaj elementa in drugim elementom ni dovoljeno premikanje v to območje. Poleg tega lastnosti odmika premaknejo element tako, da ga potisnejo 20 slikovnih pik od leve in 20 slikovnih pik od vrha prvotne lokacije.
Pri relativno pozicioniranih elementih je pomembno vedeti, da lastnosti odmika bloka določajo, kam bo element premaknjen glede na prvotni položaj. Tako leva lastnost z vrednostjo 20 slikovnih pik dejansko potisne element v desno za 20 slikovnih pik. Zgornja lastnost z vrednostjo 20 slikovnih pik bo nato element potisnila navzdol za 20 slikovnih pik.
Ko postavimo element z uporabo lastnosti odmika, element prekriva element pod njim, namesto da ga potisne navzdol, kot to storijo lastnosti roba ali oblazinjenja.
Absolutno pozicioniranje Absolutna vrednost za lastnost položaja se razlikuje od relativne vrednosti v tem, da se absolutno pozicioniran element ne pojavi v normalnem toku dokumenta, prvotni prostor in položaj absolutno pozicioniranega elementa pa nista rezervirana.
Poleg tega se absolutno pozicionirani elementi premaknejo glede na svoj najbližji relativno pozicioniran nadrejeni element. Če relativno pozicioniran nadrejeni element ne obstaja, bo absolutno pozicioniran element postavljen glede na element
. To je majhen podatek; poglejmo, kako deluje v neki kodi:
Razdelek ( položaj: relativno; ) div ( položaj: absolutno; desno: 20 slikovnih pik; zgoraj: 20 slikovnih pik; )
Demonstracija absolutnega pozicioniranja V tem primeru element je postavljen glede na, vendar ne vključuje nobenih lastnosti odmika. Zato se njegov položaj ne spremeni. Element z razredom odmika vključuje vrednost položaja kot absolutno. Od elementa
je najbližji relativno pozicioniran nadrejeni element , nato element
bo postavljen glede na element
.Za relativno pozicionirane elemente lastnosti odmika določajo, v katero smer bo element premaknjen glede na samega sebe. Za absolutno pozicionirane elemente lastnosti odmika določajo, v katero smer bo element premaknjen glede na svojega najbližjega relativnega pozicioniranega starša.
Kot rezultat lastnosti desne in zgornje je element
bo prikazan 20 slikovnih pik od desne in 20 slikovnih pik od zgoraj znotraj
.Od elementa
postavljen absolutno, ni nameščen v normalnem toku strani in bo prekrival vse elemente, ki ga obkrožajo. Še več, začetni položaj
ni shranjen in to mesto lahko zasedejo drugi elementi. Na splošno se lahko večina pozicioniranja izvede brez uporabe lastnosti položaja in lastnosti odmika, vendar so v nekaterih primerih lahko zelo koristne.
Povzetek Naučiti se pozicionirati vsebino v HTML in CSS je velik korak k obvladovanju teh jezikov. Če temu dodamo blokovni model, smo na dobri poti, da postanemo front-end razvijalci.
Ta učni članek bo posvečen zelo pomembni temi, ki je povezana s pozicioniranjem elementov na strani, od vas bo zahtevala največjo pozornost. Spoznali boste naslednje vrste pozicioniranja elementov: absolutno , relativno , fiksno in statična .
Pozicioniranje vam bo omogočilo, da ta ali tisti element postavite na mesto, kjer ga potrebujete, namen tega članka je razumeti, po katerih pravilih se to zgodi, katere lastnosti CSS je treba uporabiti in zakaj.
Vrste pozicioniranja elementov
Osnove Lastnost CSS Tista, ki vam omogoča nadzor nad položajem elementov na strani, je lastnost položaja, ki brskalniku pove, kakšno vrsto položaja se uporablja za element ( statična -statična relativno - sorodnik, absolutno – absolutno , oz fiksno - fiksno).
Če želite v celoti razumeti, kako so elementi nameščeni na kateri koli strani, morate podrobno preučiti vse vrste pozicioniranja. Ta članek z vadnicami vam bo ponudil takšno priložnost; zdaj bomo ločeno govorili o vsaki vrsti pozicioniranja in analizirali, kako in glede na kaj pride do premika elementov v dokumentu.
Absolutno pozicioniranje
Kot ste opazili, elementi, ki imajo absolutno pozicioniranje , ločeno od toka glavne strani , kar lahko povzroči nalaganje elementov drug na drugega. Še en odtenek delo z elementi, ki imajo absolutno pozicioniranje , to so ne more lebdeti . Plavajoči elementi so lahko le elementi, ki imajo statično pozicioniranje (statična), torej tista, ki je privzeto nastavljena za element. O metodah dela s plavajočimi elementi smo razpravljali v članku učbenika "".
Relativno pozicioniranje
Naslednja vrsta pozicioniranja, ki si jo bomo ogledali, je relativno pozicioniranje (položaj: relativni) so premaknjeni (postavljeni), ali z drugimi besedami.
Pojdimo naravnost na primer in nato spregovorimo o vseh niansah, ki se bodo pojavile pri delu z
</span> Relativno pozicioniranje elementov
statična
class = "relative" > relativno
class = "statičen" > statična
Torej, kaj smo storili v tem primeru:
Za bloke (elemente ), ki imajo
statično pozicioniranje (privzeto) nastavite višino na 50 slikovnih pik in barvo ozadja na -
rdeča .
Postavili smo element z relativno pozicioniranje (položaj: relativno), nastavite njegovo višino na 100 slikovnih pik in barvo ozadja zelena . Poleg tega je bilo navedeno, da je on premakne glede na trenutni položaj od zgornjega roba za 50 slikovnih pik in od levega roba za 100 slikovnih pik, kar povzroči prelivanje dokumenta.
Rezultat našega primera:
Iz tega primera je treba poudariti tudi, da za razliko od absolutno pozicioniranje drugi elementi v dokumentu reagirajo na elemente z relativno pozicioniranje . Kljub temu, da smo brskalniku dali ukaz za premik elementa, je brskalnik rezerviral prostor za element in pustil prazen prostor, kjer naj bi bil element na začetku pred premikanjem.
V praksi vam najverjetneje ne bo treba premikati elementov, ki so relativno pozicioniranje . glavna ideja relativno pozicioniranje ni, da element nekam premaknete, ampak ustvarite "vsebnik" za element, ki ima absolutno pozicioniranje
. Z drugimi besedami, ugnezdeni elementi ne bodo zamaknjeni glede na rob okna brskalnika, temveč glede na ta element, ki bo imel relativno pozicioniranje in se nahaja v glavni niti dokumenta . To točko bomo podrobneje obravnavali pozneje v tem članku z vadnicami.
Fiksno pozicioniranje
Tretjič vrsta pozicioniranja, ki si jo bomo ogledali, je fiksno pozicioniranje element se premika glede na dani rob okna brskalnika . Posebnost To pozicioniranje je tisto, ko se premikate po strani element ostane na enem mestu , to je, grobo rečeno, se pomika skupaj s stranjo (element je fiksen).
Mislim, da ste med potovanjem po internetu pogosto naleteli na navigacijske menije, stranske vrstice ali celo gumbe »na vrhu strani«, ki so pritrjeni na enem mestu. Vse to postane mogoče zahvaljujoč fiksno pozicioniranje .
Oglejmo si primer, v katerem bomo oblikovali fiksno stransko vrstico.
</span> Fiksno pozicioniranje elementov
fiksno
razred = "vsebnik" >
Poglejmo, kaj smo naredili v tem primeru:
Set za elemente in višina enaka 100%, to nam bo omogočilo, da nastavimo višino v odstotkih za našo stransko vrstico. Poleg tega smo odstranili robove za te elemente, to je potrebno za odstranitev vgrajenih slogov brskalnika.
Za našo stransko vrstico nastavite višino na nadrejeni element (100 %), nastavite širino na 15 % nadrejenega elementa in nastavite barvo ozadja rdeča . Poudaril tudi, da ima naša stranska vrstica fiksno pozicioniranje , zaradi česar se zdi, da se drži zaslona. Da se naša plošča prikaže na desni strani, nastavimo desno vrednost na 0 (odmik pozicioniranega elementa od desnega roba okna brskalnika).
Za demonstracijo fiksno pozicioniranje ustvarili smo vsebnik z višino 2000 slikovnih pik. Zdaj, če se pomaknemo po strani, bo naša stranska vrstica ostala na mestu, vendar se bo pomikala vsebina vsebnika (glavna vsebina).
Rezultat našega primera:
Statično pozicioniranje
No, zadnja vrsta pozicioniranja je statično pozicioniranje (statično), s tabo sva že večkrat govorila o tem. Statično pozicioniranje to je klasika v potoku HTML dokument
Rad bi vas opozoril na eno dejstvo, da zgoraj obravnavanih lastnosti, ki so odgovorne za premik elementov, ni mogoče uporabiti za elemente, ki imajo statično pozicioniranje , to pomeni, da imajo pozicioniranje, ki je privzeto nastavljeno.
Napredno absolutno pozicioniranje
Preden preidete na napredne aplikacije absolutno pozicioniranje , želim vas opozoriti na dejstvo, da če ne navajaj vrednost navpičnega položaja elementa z absolutno pozicioniranje (zgoraj ali spodaj) ali obratno v vodoravni položaj (levo ali desno). brskalnik bo pustil element na istem mestu na strani, kjer je v splošnem toku (bo postavljeno na vrh vsebine, če obstaja).
Naučili smo se že, da element z absolutno pozicioniranje (položaj: absolutno) postavljen glede na dani rob svojega prednika , prednik pa mora imeti položaj vrednosti drugačen od privzetega -statična drugače štetje (premik). glede na določen rob okna brskalnika . Čas je, da si ogledamo tak primer:
</span> Absolutno pozicioniranje glede na prednika
relativno
razred = "vsebnik" > posoda
razred = "absolutno" > absolutno
Oglejmo si podrobneje, kaj smo storili v tem primeru:
Za začetek smo postavili blok (element ), kateri ima
relativno pozicioniranje . Določili smo mu notranji rob od vrha (margin-top), ki je enak 100 pikslov, nastavili širino, višino in barvo ozadja.
Nato je bil vanjo postavljen blok element (element ), ki ima višino 100 slikovnih pik in barvo ozadja
rumena . Kot razumete, ima ta element
statično pozicioniranje (privzeta vrednost) od vrednosti lastnosti položaja
ni podedovano , in ni podedoval od nadrejenega bloka
relativno pozicioniranje .
Nato smo v našo posodo postavili z statično pozicioniranje element, ki ima absolutno pozicioniranje . Nastavite njegovo širino in višino na 50 slikovnih pik ter barvo ozadja rdeča . Najpomembnejša točka je, da ta element ni pozicioniran glede na okno brskalnika, ne glede na nadrejeni element, ampak glede na svojega prednika, ki ima položaj, ki ni statični! Posledično smo naš element postavili v zgornji desni kot njegovega prednika z relativno pozicioniranje .
Rezultat našega primera:
Povzemimo, kaj smo se naučili v tej vadnici o pozicioniranju elementov:
Statično pozicioniranje to je klasika postavitev elementov od zgoraj navzdol (predmeti so prikazani v vrstnem redu, kot so navedeni v toku dokumenta HTML ), velja za privzeto vrednost za vse elemente.Element je nameščen glede na okno brskalnika če ima fiksno pozicioniranje (element je fiksiran pri premikanju dokumenta).
Element je nameščen glede na okno brskalnika če ima absolutno pozicioniranje , in je niso ugnezdeni znotraj elementa, ki ima drug položaj kot statična
.
Element, za katerega je nastavljen relativno pozicioniranje izmene glede na položaj v dokumentnem toku (glede na njegov trenutni položaj ).
Element je nameščen glede na stranice drugega elementa v primeru, da on ima prednika ali starša z absolutno , relativno oz fiksno pozicioniranje .
Vprašanja in naloge na temo
Preden preidete na naslednjo temo, dokončajte vadbeno nalogo:
2016-2019 Denis Bolshakov, komentarje in predloge na spletnem mestu lahko pošljete na [email protected]
Kako poravnati sliko na desno
Dolg odstavek z več stavki. Vsebuje besedilo, ki opisuje označeno lastnost, in sliko, ki jo je treba pritisniti na rob desne strani.
Element vzame iz toka in ga potisne na rob leve ali desne strani starša. Elementi in besedilo, ki se nahajajo v kodi za elementom float, tečejo okoli njega na nasprotni strani.
Ni podedovano, velja za vse elemente. vzame element iz toka in ga postavi na vrh preostale vsebine. Lahko se premakne glede na meje njegovega nadrejenega, ki ima vrednost položaja, ki ni statična, z uporabo lastnosti top, right, bottom, left. Ko je smer: ltr; lastnost left ima prednost pred lastnostjo right, razen če je lastnost left nastavljena na auto.
Dolg odstavek z več stavki.
Vsebuje besedilo, ki opisuje označeno lastnost, in sliko, ki jo je treba pritisniti na rob desne strani.
Lastnina
poravnava besedila podedovano, uporabljeno za blokovne elemente.
Vodoravno poravna vse vsebovane elemente v vrstici in besedilo. Ne premakne elementa samega ali premakne blokov in ne deluje, če je dodeljen elementu v vrstici. Ima več pomenov, med drugim
prav, ki vam omogoča premikanje vsebine v desno.
Lastnina
rob-levo ni podedovano, velja za vse elemente.
Ima pomen
avto, ki element bloka poravna vodoravno. namreč
rob-levo: samodejno; potisne element na desni rob nadrejenega. Ta položaj lahko spremeni nepremičnina
margin-desno..html">Kdaj
rob-levo: samodejno; in
rob-desno: samodejno; element je postavljen na sredini širine prednika.
Lastnina
lebdi ni podedovano, velja za vse elemente.
Element vzame iz toka in ga potisne na rob leve ali desne strani starša. Elementi in besedilo, ki se nahajajo v kodi za elementom float, tečejo okoli njega na nasprotni strani.
Lastnina
položaj ni podedovano, velja za vse elemente.
položaj: absolutno; vzame element iz toka in ga postavi na vrh preostale vsebine. Lahko se premakne glede na meje nadrejenega, katerega vrednost
položaj drugačen od
statična, z uporabo lastnosti
vrh,
prav,
dno,
levo. pri
smer: ltr; premoženje
levo ima prednost pred lastnino
prav, razen kadar premoženje
levo ima pomen
avto.
Lastnina zaslon ni podedovano, velja za vse elemente..html">tag tabela, A tabela-celica — td.
Nasvet: na
v tem primeru Zanimivo je videti, kako se slika obnaša, ko se velikost okna brskalnika zmanjša.
Kako poravnati besedilo na desno
Kratko besedilo na desni
Kratko besedilo na desni
Sorodni materiali:
posodobljena horizontalna poravnava html html utemeljitev želite posodobiti
Kako poravnati blok v desno
Element ne vpliva na višino ali širino nadrejenega elementa, niti ne povzroči njegovega prelivanja.
Element ne vpliva na višino nadrejenega elementa, razen če je plovec počiščen.
Kako poravnati več blokov na desno
marža: 0 100 % 0 -100 %;
/* ni vam treba dodati drugega ovoja, vendar v prejšnjem slogu določite transformacijo: translate(-100%, 0); */ ozadje:zeleno; )
CSS obravnava postavitev dokumenta HTML kot drevo elementov. Pokliče se edinstven element, ki nima nadrejenega elementa korenina element. Modul CSS Positioning opisuje, kako je mogoče katerega koli od elementov postaviti ne glede na vrstni red dokumenta (tj. vzeti iz "toka").
V CSS2 vsak element v drevesu dokumentov ustvari nič ali več polj po modelu škatle. Modul CSS3 dopolnjuje in razširja shemo pozicioniranja. Lokacija teh blokov je urejena:
velikost in vrsta elementa,
shema pozicioniranja (normalni pretok, pretok in absolutno pozicioniranje),
razmerja med elementi v dokumentnem drevesu,
zunanje informacije (na primer velikost vidnega polja, notranje dimenzije slike itd.).
Sheme pozicioniranja
V CSS je blok elementa mogoče postaviti v skladu s tremi shemami pozicioniranja:
1. Normalni pretok
Običajni potek vključuje kontekst oblikovanja blokov (elementi s prikaznim blokom, elementom seznama ali tabelo), kontekst oblikovanja v vrstici (elementi z vgrajenim prikazom, blokom v vrstici ali tabelo v vrstici) ter relativno in lepljivo pozicioniranje elementov na ravni bloka in vrstice.
2. Pretok okoli
V tokovnem modelu se blok odstrani iz običajnega toka in postavi na levo ali desno. Vsebina se ovije okoli desne strani elementa s float: left in leve strani elementa s float: right.
3. Absolutno pozicioniranje
V modelu absolutnega pozicioniranja je blok popolnoma odstranjen iz običajnega toka in ima položaj glede na blok, ki ga vsebuje. Absolutno pozicioniranje se izvaja z uporabo vrednosti position: absolute; in položaj: fiksno; .
Element "izven toka" je lahko float, absolutno pozicioniran element ali korenski element.
Na splošno je vsebni blok blok, ki vsebuje drug element. V primeru običajnega toka je korenski element html vsebni blok za element body, ta pa vsebni blok za vse svoje podrejene elemente in tako naprej. V primeru pozicioniranja je vsebni blok v celoti odvisen od vrste pozicioniranja.
Za nekorenski element s položajem: static; ali položaj: relativno; blok, ki ga vsebuje, tvori rob območja vsebine najbližjega nadrejenega bloka na ravni bloka, celice tabele ali bloka na ravni vrstice.
Za nekorenski element s položajem: absolutno; blok, ki ga vsebuje, je nastavljen na najbližji nadrejeni element z vrednostjo položaja, ki ni statična, kot je ta:
če je prednik element na ravni bloka, bo vsebovalni blok področje vsebine in oblazinjenje elementa;
če je prednik element na ravni vrstice, bo vsebni blok področje vsebine;
če ni prednikov, je blok, ki vsebuje element, definiran kot začetni blok, ki vsebuje.
Pri "lepljivem" bloku je blok, ki ga vsebuje, najbližji prednik drsljivega ali vidnega polja, drugače.
2. Izbira sheme pozicioniranja: lastnost položaja
Lastnost položaja določa, kateri algoritem za določanje položaja se uporablja za izračun položaja bloka.
Nepremičnina se ne deduje.
položaj
Pomen:
statična
Blok je nameščen glede na normalni pretok. Lastnosti top , right , bottom in left niso uporabljene. Privzeta vrednost.
relativno
Položaj bloka se izračuna glede na normalni pretok. Blok je nato odmaknjen od svojega običajnega položaja in v vseh primerih, vključno z elementi tabele, ne vpliva na položaj naslednjih blokov. Vendar lahko tak zamik povzroči prekrivajoče se bloke in drsni trak, če pride do prelivanja. Relativno postavljen blok ohrani svoje dimenzije, vključno s prelomi vrstic in prvotno rezerviranim prostorom zanj.
Relativno pozicioniran blok ustvari nov vsebni blok za svoje absolutno pozicionirane otroke.
Vplivni položaj: relativni; na elementih tabele je definiran na naslednji način:
absolutno
Položaj (in po možnosti velikost) bloka je določen z lastnostmi top , right , bottom in left . Te lastnosti definirajo eksplicitni odmik glede na blok, ki ga vsebuje. Absolutno pozicionirani bloki so popolnoma odstranjeni iz običajnega toka, ne da bi to vplivalo na postavitev sestrskih elementov. Robovi absolutno pozicioniranih blokov se ne sesedejo.
Absolutno pozicioniran blok ustvari nov vsebni blok za otroke normalnega toka in otroke s položajem: absolutno; .
Vsebina absolutno pozicioniranega elementa se ne more oviti okoli drugih blokov. Absolutno pozicioniran blok lahko skrije vsebino drugega bloka (ali pa je sam skrit), odvisno od vrednosti z-indeksa prekrivajočih se blokov.
lepljivo
Položaj bloka se izračuna glede na normalni pretok. Blok je nato zamaknjen glede na najbližjega drsnega prednika ali vidno polje, če nobeden od prednikov nima drsenja. Lepljivi blok lahko prekriva druge bloke in ustvari drsne trakove, če se prelije.
Lepljivi blok ohrani svoje dimenzije, vključno s prelomi vrstic in prostorom, ki je bil prvotno rezerviran zanj.
Lepljivi blok ustvari nov vsebni blok za absolutno in relativno pozicionirane otroke.
fiksno
Fiksno pozicioniranje je podobno absolutnemu pozicioniranju, le da je vidno okno nastavljeno za vsebovalni blok. Takšen blok je popolnoma odstranjen iz toka dokumenta in nima položaja glede na kateri koli del dokumenta. Fiksni bloki se med pomikanjem po dokumentu ne premikajo. V tem pogledu so podobni fiksnim slikam ozadja. Pri tiskanju se fiksni bloki ponavljajo na vsaki strani, pri čemer jim vsebni blok določa območje strani. Bloki s fiksnim položajem, ki so večji od površine strani, so obrezani.
začetnica
Nastavi vrednost lastnosti na privzeto vrednost.
dedovati
Podeduje vrednost lastnosti od nadrejenega elementa.
Sintaksa
Položaj: statičen; položaj: relativni; položaj: absolutno; položaj: lepljiv; položaj: fiksno; položaj: začetni; položaj: dedovati;
3. Odmik bloka: lastnosti zgoraj, desno, spodaj, levo
Element se šteje za pozicioniranega, če je njegova lastnost položaja nastavljena na nekaj drugega kot statično. Pozicionirani elementi ustvarjajo pozicionirane bloke in jih je mogoče pozicionirati glede na naslednje štiri fizične lastnosti:
Sintaksa
Zgoraj: 10 slikovnih pik; zgoraj: 2em; zgoraj: 50 %; zgoraj: avto; zgoraj: dedovati; zgoraj: začetnica;
Lastnost top določa razdaljo, na kateri je zgornji rob absolutno pozicioniranega bloka (odvisno od njegovega roba) zamaknjen pod zgornji rob vsebujočega bloka. Za relativno pozicionirane bloke podaja odmik glede na zgornji rob samega bloka (to pomeni, da blok dobi položaj v običajnem toku in nato odmik od tega položaja v skladu s to lastnostjo).
Sintaksa
Desno: -10px; desno: .5em; desno: -10 %; desno: avto; desno: dedovati; desno: začetnica;
Lastnost desno določa razdaljo, na kateri je desni rob absolutno pozicioniranega bloka (ob upoštevanju njegovega roba) zamaknjen v levo od desnega roba vsebujočega bloka. Za relativno pozicionirane bloke definira odmik glede na desni rob samega bloka.
Sintaksa
Spodaj: 50px; spodaj: -3em; spodaj: -50%; spodaj: avto; spodaj: dedovati; spodaj: začetnica;
Lastnost bottom določa razdaljo, na kateri je spodnji rob bloka zamaknjen navzgor glede na spodnji rob vsebujočega bloka. Za relativno pozicionirane bloke definira odmik glede na spodnji rob samega bloka.
Sintaksa
Levo: 50px; levo: 10em; levo: 20 %; levo: samodejno; levo: dedovanje; levo: začetnica;
Lastnost levo določa razdaljo, na kateri je levi rob zamaknjen v desno od levega roba vsebnega bloka. Za relativno pozicionirane bloke definira odmik glede na levi rob samega bloka.
Pozitivne vrednosti premaknejo element znotraj vsebnega bloka, negativne vrednosti pa ga premaknejo izven vsebnega bloka.
4. Ovijanje: lastnost float
Ovijanje omogoča, da bloki lebdijo levo ali desno v trenutni vrstici. "Plavajoči blok" se premika levo ali desno, dokler se njegov zunanji rob ne dotakne roba bloka, ki ga vsebuje, ali zunanjega roba drugega plavajočega bloka. Če obstaja linijska enota, zunanja zgornji del plavajoči blok je poravnan z vrhom trenutnega linearnega bloka.
Pri uporabi lastnosti float na elementih je priporočljivo nastaviti širino. To bo ustvarilo prostor za drugo vsebino v brskalniku. Če za lebdeči element ni dovolj vodoravnega prostora, bo ta potisnjen navzdol, dokler se ne prilega. V tem primeru ga bodo drugi elementi na ravni bloka prezrli, elementi na ravni vrstice pa se bodo premaknili v desno ali levo, sprostili prostor zanj in se obkrožali.
Pravila, ki urejajo obnašanje plavajočih strani, so opisana z lastnostjo float.
Nepremičnina se ne deduje.
Sintaksa
Lebdeč: levo; lebdi: desno; float: noben; float: podedovati;
Lebdeči blok prevzame dimenzije svoje vsebine ob upoštevanju oblazinjenja in robov. Zgornji in spodnji rob plavajočih elementov se ne strneta.
Plavajoči elementi lahko uporabljajo negativne robove, da se premaknejo izven področja vsebine svojega nadrejenega elementa.
Lastnost samodejno spremeni izračunano (v brskalniku prikazano) vrednost lastnosti prikaza za prikaz: blok za naslednje vrednosti: inline , inline-block , table-row , table-row-group , table-column , table-column-group , celica-tabele .napis-tabele, skupina-glav-tabel, skupina-nog-tabel. Vrednost inline-table se spremeni v tabelo.
Lastnost ne vpliva na elemente z display: flex in display: inline-flex. Ne velja za absolutno pozicionirane elemente.
riž. 3. Ovijte elemente
5. Nadzor pretoka okoli lebdečih elementov: lastnost Clear
Lastnost clear določa, katere strani blokov elementa ne smejo biti poleg lebdečih blokov nad njim v izvornem dokumentu. V CSS2 in CSS 2.1 lastnost velja samo za nelebdeče elemente na ravni bloka.
Nepremičnina se ne deduje.
Sintaksa
Jasno: brez; jasno: levo; jasno: desno; jasno: oboje; jasno: podedovati;
Če želite preprečiti prikaz ozadja ali obrob pod plavajočimi elementi, uporabite pravilo (overflow: hidden;).
6. Definiranje prekrivnega konteksta: lastnost z-index
V CSS ima vsak blok položaj v treh dimenzijah. Poleg vodoravnih in navpičnih položajev so bloki zloženi drug na drugega vzdolž osi Z. Položaj vzdolž osi Z je še posebej pomemben, ko se bloki med seboj vizualno prekrivajo.
riž. 1. Položaj elementov vzdolž osi Z
Vrstni red, v katerem je drevo dokumenta narisano na zaslonu, je opisano z prekrivni kontekst . Vsak blok pripada enemu prekrivnemu kontekstu. Vsak blok v danem prekrivnem kontekstu ima celoštevilsko raven, ki je njegov položaj na osi Z glede na druge bloke v istem prekrivnem kontekstu.
Bloki z višjimi nivoji se vedno pojavijo pred bloki z nižjimi nivoji, bloki z enakim nivojem pa so razvrščeni od spodaj navzgor glede na vrstni red elementov v izvornem dokumentu. Polje elementa ima enak položaj kot nadrejeno polje, razen če mu lastnost z-index ne dodeli drugačne ravni.
Lastnost z-index vam omogoča spreminjanje načina nalaganja elementov drug na drugega.
Nepremičnina se ne deduje.
Sintaksa
Z-indeks: samodejno; z-indeks: 0; z-indeks: 5; z-indeks: 999; z-indeks: -1; z-indeks: dedovanje; z-indeks: začetni;
Svet brezplačnih programov in koristnih nasvetov
