,

,

,

. Etichetă
destul de des folosit în aspectul site-urilor web moderne pentru a crea grile și înseamnă pur și simplu un fel de bloc sau container. Este, de asemenea, posibil să cuibăriți și alte etichete în el, ceea ce nu este posibil cu toate elementele bloc, deci
convenabil de utilizat. Blocurile sunt de obicei stivuite unul peste altul și nu sunt inserate în elementele inline. Elementele HTML inline sunt text, iar CSS este folosit pentru stil.
Având în vedere o lățime de conținut, lățimea totală a blocului este suma valorilor de umplutură din dreapta și din stânga, marjă, chenar și lățime. La o înălțime dată - de la umplutura de sus și de jos, margini, margini și înălțime. Textul din elementele bloc este aliniat la stânga în mod implicit. Dacă unul dintre ele conține elemente inline împreună cu elemente bloc, atunci se creează un bloc anonim în jurul elementelor inline. I se va aplica stilul implicit. De asemenea, va moșteni stilul specificat atribuit părintelui său.
Fluxul documentelor
Fluxul se referă la ordinea în care sunt afișate elementele paginii, determinată de proprietățile specificate în CSS. În acest caz, în mod implicit, blocurile sunt aliniate de sus în jos, iar dacă nu există suficient spațiu, etichetele inline sunt mutate pe o nouă linie și aranjate de sus în jos și de la stânga la dreapta. Locația unui element pe pagină depinde de locul său în cod: cu cât este mai sus, cu atât este localizat mai devreme. Fiecare dintre elementele blocului arată ca un dreptunghi care își împinge vecinii. Puteți modifica acest comportament folosind proprietăți speciale. Alinierea anumitor blocuri la centrul sau laturile unui container în CSS se numește poziționare.
Elemente de poziționare
Amplasarea blocurilor poate fi controlată folosind poziționarea absolută și relativă. Poziționarea este folosită pentru a oferi secțiunilor mari ale unei pagini o locație specifică, pentru a crea interfețe complexe, ferestre pop-up și elemente decorative. Proprietatea principală folosită pentru poziționarea blocurilor în CSS este poziția. Are patru proprietăți principale:
• relativ;
• absolut;
• fix;
• static.
Cu ajutorul lor, puteți schimba modurile de aspect specificând unul dintre cei patru parametri: sus, dreapta, jos sau stânga. Există, de asemenea, o proprietate pentru ordonarea straturilor - z-index. Poziționarea cu proprietatea statică nu este utilizată în mod obișnuit, deoarece denotă poziționarea implicită a blocurilor. Prin urmare, utilizarea oricăror parametri nu îl afectează în niciun fel. Celelalte trei proprietăți sunt folosite pentru aspect: relativă, absolută, fixă.
Poziționare relativă
Poziționare relativă blocuri în CSS, adică proprietatea poziție: relativă înseamnă că elementul poate fi mutat și poziția inițială schimbată. Un astfel de bloc rămâne încă în flux. De fapt, nu el însuși este deplasat, ci copia lui. Valorile proprietăților sunt setate pentru a indica exact cât de mult se va mișca blocul într-o direcție sau alta. Ele sunt cel mai adesea măsurate în pixeli. Dar este acceptabil să folosiți alte unități.

Utilizarea proprietăților pentru poziționarea relativă
Proprietatea de sus mută o copie a unui anumit bloc în sus sau în jos cu numărul de pixeli specificat în proprietate. Atunci când îl utilizați, elementele situate dedesubt sau deasupra rămân la locul lor, deoarece, de fapt, blocul care este deplasat nu se mișcă nicăieri.
Proprietatea de jos mută blocul în direcția opusă proprietății de sus. O valoare pozitivă ajută la mutarea acesteia în sus, iar o valoare negativă ajută la mutarea acesteia în jos. Proprietățile dreapta și stânga mută elementul la dreapta și, respectiv, la stânga. Combinându-le pe toate, puteți seta locația exactă a blocului pe pagină, deplasându-l de-a lungul axelor de coordonate verticale și orizontale. Dacă măriți indentațiile, acestea vor fi calculate nu de la marginea blocului în sine, ci de la deplasarea copiei în lateral.

Poziționare absolută
Poziționarea absolută a blocurilor în CSS este specificată de valoarea proprietății de poziție absolută. Un element care este poziționat cade absolut din fluxul de documente, iar locul lui este luat de blocurile învecinate. Lățimea unui astfel de element este întinsă în funcție de conținutul său și îl puteți deplasa specificând anumite valori proprietăți sus, stânga, dreapta, jos. Poziționarea absolută a blocurilor în CSS este utilă pentru titluri. Dar poziție: absolute funcționează nu numai pentru cele bloc, ci și pentru elemente inline.
Alinierea elementelor la centru
Un element pozitionat absolut inline se va comporta exact la fel ca un element inline. Prin urmare, poziționarea poate fi folosită și pentru a controla textul în CSS. Puteți aplica câteva proprietăți noi, de exemplu, modificați înălțimea și lățimea. Centrarea și alinierea verticală în CSS utilizează o combinație de mai multe proprietăți. Controlează alinierea verticală a proprietății de sus. Dacă doriți să centrați un bloc în CSS, containerul principal ar trebui să fie poziționat relativ, iar elementul aliniat să fie poziționat absolut. Containerul trebuie să seteze proprietatea de sus: 50% și pentru a muta elementul la jumătate din înălțimea sa, utilizați proprietatea translate cu valoarea „0, -50%”. Elementele poziționate absolut pot fi distinse în tip nou, deoarece au proprietăți care nu sunt disponibile pentru alte tipuri de poziționare.

Poziționare în raport cu colțul din stânga sus al browserului
Proprietățile stânga, sus, dreapta și jos funcționează diferit pe elementele poziționate absolut și relativ. Pentru elementele relative, aceste proprietăți stabilesc decalajul relativ la locul în care se află elementul. Cele absolut poziționate ocupă un loc relativ la un anumit sistem coordonate legate de dimensiunea ferestrei browserului. Punctele de plecare ale acestui sistem sunt colțurile ferestrei. Când utilizați proprietatea stângă, indentarea va fi numărată din partea stângă a browserului, dar nu va exista nicio bară de defilare. Proprietatea de sus, când este poziționată în mod absolut, specifică decalajul de la partea de sus a browserului la partea de sus a elementului la care este aplicată. Prin combinarea ambelor proprietăți, elementul poate fi mutat în raport cu colțul din stânga sus al browserului.

Poziționare în raport cu colțul din dreapta sus al browserului
În mod similar, folosind proprietățile din dreapta și de sus, puteți apăsa un element în partea dreaptă a ferestrei browserului și puteți modifica poziția verticală, deplasându-l spre dreapta colțul de sus. Dacă proprietatea dreaptă este setată la o valoare negativă, blocul se va muta în afara graniței ferestrei. După aceasta, ar trebui să apară o bară de defilare. Pentru a muta un element în jos, utilizați proprietatea de jos. Specifică indentarea de la marginea de jos a ferestrei browserului până la partea de jos a blocului. Dacă valoarea sa este negativă, apare și o bară de defilare, deoarece elementul este mutat dincolo limita inferioara fereastra browserului.
Sistem de coordonate pentru poziționare absolută
În mod implicit, toate elementele cărora li se oferă o poziționare absolută sunt legate de un sistem de coordonate - fereastra browserului. Dar poate fi schimbat dând o poziționare relativă a elementului părinte. Apoi blocul copil își va schimba locația în funcție de părinte. Dacă printre elementele părinte există mai multe cu poziționare relativă, atunci numărarea se efectuează din cel mai apropiat dintre ele. În acest caz, poziționarea implicită va fi cea specificată în eticheta corporală.

Punct de referință pentru un element poziționat absolut
Înainte ca unui element să i se dea o poziționare absolută, acesta a fost numit într-un loc origine implicită. Dacă unui astfel de bloc nu i se dau proprietăți, nu se va muta. Îl puteți deplasa setând proprietatea marjei. Acesta va funcționa similar cu proprietățile de poziționare. Dacă nu definiți valoarea proprietății din stânga și toate celelalte, atunci aceasta va fi egală cu auto. De asemenea, puteți utiliza automat pentru a readuce elementele în locurile lor originale.

Poziționare fixă
O altă valoare este fixă. Proprietatea poziție ancorează un element într-o anumită locație. Poziționarea fixă ​​este adesea folosită pentru a crea meniuri în CSS. Este similar cu absolutul, dar blocul fix cade din flux. Chiar și atunci când derulați pagina, un astfel de element va rămâne pe loc, așa că este convenabil să îl utilizați pentru a crea un meniu în CSS. Punctul de pornire va fi legat de fereastra browserului. Dacă există mai multe blocuri poziționate, acestea sunt ordonate folosind proprietatea z-index. Cu ajutorul lui, puteți suprapune blocuri relative cu cele absolute dacă le oferiți indicele corespunzător, exprimat ca număr întreg. Cu cât este mai mare, cu atât blocul va fi mai mare.
Unul dintre cele mai bune părți Ceea ce face CSS este că stilurile ne oferă capacitatea de a poziționa conținutul și elementele pe o pagină în aproape orice mod imaginabil. Acest lucru adaugă structură designului nostru și ajută la creșterea vizuală a conținutului.
Sunt cateva tipuri diferite poziționarea în CSS, fiecare dintre aceste tipuri are propriul domeniu de aplicare. În acest capitol, vom analiza câteva cazuri de utilizare diferite — crearea de aspecte reutilizabile și poziționarea unică a elementelor de unică folosință — și vom descrie câteva metode pentru a face acest lucru.
Poziționare prin plutitor
O modalitate de a poziționa elementele pe o pagină este prin proprietatea float. Această proprietate este destul de versatilă și poate fi folosită în multe moduri diferite.
În esență, proprietatea float preia un element, îl elimină din fluxul normal al paginii și îl poziționează la stânga sau la dreapta element părinte. Toate celelalte elemente de pe pagină se vor înfăşura în jurul unui astfel de element. De exemplu, paragrafele se vor înfăşura în jurul unei imagini dacă elementul proprietatea float este setată.
Când proprietatea float este aplicată la mai multe elemente simultan, face posibilă crearea unui aspect cu elemente flotante lângă sau opus unul altuia, așa cum se arată într-un aspect cu mai multe coloane.
Proprietatea float ia mai multe valori, cele două cele mai populare fiind stânga și dreapta, care permit elementului să plutească la stânga sau la dreapta părintelui său.
Imag (float: stânga; )
plutește în practică
Să creăm un aspect general al paginii cu un antet în partea de sus, două coloane în centru și un subsol în partea de jos. În mod ideal, această pagină ar trebui să fie marcată cu elemente
,
,