U HTML-u svi se elementi mogu podijeliti na blokove i male. Blok elementi obično su prikazani kao pravokutna područja s određenom količinom informacija. Uz njihovu pomoć, konstruirana je mreža stranice. Takvi elementi zauzimaju sav raspoloživi prostor na širini, a prije i poslije njih obično postoji prijenos linije. Blokovi se mogu namjestiti kao uvlake, horizontalne i vertikalne veličine.

Značajke blok elemenata

Blok sadrži oznake koje dodjeljuju veliku količinu tekstualnih informacija :,

,,

,

. Oznaka se često koristi u izgledu modernih web-mjesta za stvaranje mreža i jednostavno znači blok ili spremnik. Dopušteno je umetanje drugih oznaka, koje možda nisu sa svim elementima bloka, tako da je zgodan za korištenje. Blokovi se obično nalaze jedan iznad drugog i nisu umetnuti u elementarne elemente. HTML je niz HTML elemenata, a CSS se koristi za njegovo oblikovanje.


Za zadanu širinu sadržaja, ukupna širina bloka sastoji se od vrijednosti desnog i lijevog otiska, polja, granica i širine. Na određenoj visini - od gornje i donje uvučene, polja, granice i visine. Tekst u elementima bloka je prema zadanim postavkama poravnat na lijevom rubu. Ako jedan od njih sadrži elementarne elemente zajedno s blokovima, onda se oko velikih stvara anonimni blok. Za njega će se primijeniti zadani stil. Također, slijedit će zadani stil koji mu je dodijeljenotac.

Struja dokumenta

Stream se odnosi na redoslijed prikazivanja elemenata stranice, koji je određen svojstvima navedenima u CSS-u. U isto vrijeme, blokovi su postupno poredani od vrha, a male oznake s nedostatkom prostora prenose se na novu liniju i nalaze se od vrha do dna i slijeva nadesno. Položaj elemenata na stranici ovisi o njegovom mjestu u kodu: što je veći, to se ranije nalazi. Svaki od blokovskih elemenata izgleda kao pravokutnik koji gura susjedne elemente. Ovo ponašanje možete promijeniti s posebnim svojstvima. Poravnanje u CSS određenih blokova ili u središtu stranica spremnika naziva se pozicioniranje.

Pozicioniranje elemenata

Položaj blokova može se upravljati s apsolutnim i relativnim pozicioniranjem. Pozicioniranje se koristi za postavljanje velikih odjeljaka na stranici za određeno mjesto za stvaranje složenih sučelja, skočnih prozora i dekorativnih elemenata. Glavno svojstvo koje se koristi za pozicioniranje blokova u CSS-poziciji. Ima četiri glavna svojstva:

relativni;

apsolutni;

fiksno;

statički.

Pomoću njih možete prebaciti načine pozicije postavljanjem jednog od četiri parametra: gore, desno, dolje ili lijevo. Tu je i svojstvo za uređenje slojeva - z-indeks. Pozicioniranje sa statičkim svojstvom se obično ne koristi, jer podrazumijeva lokaciju blokova prema zadanim postavkama. Zbog toga, korištenje bilo kojih parametara ne utječe na njega. Za korišteni izgledostala tri svojstva: relativna, apsolutna, fiksna.

Relativno pozicioniranje

Relativno pozicioniranje blokova u CSS-u, to jest, pozicija svojstva: relativna, znači da se stavka može premjestiti, promijeniti njezino izvorno mjesto. Takav blok još uvijek ostaje u potoku. Zapravo, on se ne trese, već svoju kopiju. Određuje vrijednosti svojstava za točnu naznaku kako će se blok pomaknuti u jednom ili drugom smjeru. Mjere se češće u pikselima. Ali upotrijebimo i druge jedinice.

Korištenje svojstava u relativnom pozicioniranju

Vrh svojstva pomiče kopiju bloka gore ili dolje prema broju piksela specificiranih u svojstvu. Kada se koriste, elementi smješteni ispod ili iznad ostaju na svojim mjestima, jer se u stvarnosti ni premješteni blok ne pomiče. Dno imovine pomiče blok u suprotnom svojstvu gornjeg smjera. Pozitivna vrijednost pomaže pomicanju gore, a negativna je dolje. Svojstva i lijevo-desno pomiču element u desno odnosno lijevo. Kombinirajući ih, možete blok postaviti točnu lokaciju na stranici, pomičući je po vertikalnoj i horizontalnoj koordinatnoj osi. Ako povećate uvlake, oni se neće izračunati od ruba samog bloka, nego od njegove raseljene strane do kopije.

Apsolutno pozicioniranje

Apsolutno pozicioniranje blokova u CSS-u postavljeno je na apsolutnu vrijednost položaja položaja. Stavka koja se nalazi u potpunosti pada iz toka dokumenta, a njezino mjesto zauzimaju susjedni blokovi. Širina ovogaElement se rasteže ovisno o sadržaju i može se ukloniti postavljanjem određenih vrijednosti na gornja, lijeva, desna, donja. Apsolutno pozicioniranje blokova u CSS-u pogodno je za zaglavlja. Ali aktivira položaj: apsolutni ne samo za blok, već i za elementarne elemente.

Poravnanje elemenata u središtu

Potpuno orijentirani linearni element ponašat će se točno na isti način kao i niz. Stoga pomoću pozicioniranja možete kontrolirati CSS i tekst. Možete primijeniti neka nova svojstva, na primjer, za promjenu visine i širine. Za centriranje i poravnavanje vertikalno u CSS, koristi se kombinacija nekoliko svojstava. Upravlja poravnanjem gornje vertikalne osobine. Ako želite postaviti blok u CSS u sredini, glavni spremnik bi trebao biti relativno pozicioniran, a poravnati element - apsolutno pozicioniran. Spremnik mora postaviti gornje svojstvo: 50% i koristiti svojstvo translate s vrijednošću "0 -50%" za pomicanje elementa na pola njegove visine. Apsolutno pozicionirani kao elementi mogu se dodijeliti novom tipu, jer se primjenjuju na svojstva koja nisu dostupna za druge vrste pozicioniranja.