Un element bloc în HTML este un element care, implicit, ocupă întreaga lățime a elementului părinte. Elementul părinte poate fi un alt element de bloc sau o fereastră de browser. Puteți seta lățimea și înălțimea unui element de bloc folosind proprietățile CSS. Poziționarea elementelor bloc este procesul de poziționare a acestora în fereastra browserului și în raport cu ele folosind proprietățile CSS poziție, stânga, sus, dreapta și jos. Proprietatea de poziție CSS este concepută pentru a seta unul dintre cele patru tipuri de poziționare disponibile: statică (implicit), absolută, fixă ​​și relativă. Proprietățile CSS rămase, și anume stânga , sus , dreapta și jos , sunt folosite pentru a seta distanțe relativ la marginile din stânga, sus, dreapta și jos ale elementului părinte. De asemenea, atunci când setați anumite proprietăți, elementele bloc se pot suprapune unele pe altele, iar această caracteristică poate fi folosită și pe site-uri web.

Dacă nu ați specificat o poziție pentru un element bloc sau ați specificat static , care este același lucru, atunci elementele bloc sunt aranjate în ordine. Mai mult, următorul bloc (de exemplu: roșu) este situat pe o linie nouă. De asemenea, această poziționare nu este afectată de setarea distanțelor stânga, sus, dreapta și jos.

În cazul poziționării absolute, poziția unui element este specificată în raport cu marginile ferestrei browser folosind distanțele specificate de proprietățile stânga, sus, dreapta și jos. Dacă specificați distanțele stânga și dreapta în același timp și acestea sunt în conflict între ele, atunci se acordă preferință stânga , același lucru este valabil și pentru sus și jos , în care distanța de sus are prioritate. Poziționarea absolută este foarte des folosită împreună cu poziționarea relativă în scopuri de proiectare, atunci când este necesar să se plaseze diferite elemente unul față de celălalt, poate fi folosită și pentru a crea meniuri derulante, aspectul site-ului etc.

Poziționarea fixă ​​este diferită de alte tipuri de poziționare și nu se mișcă odată cu conținutul pe măsură ce derulați pagina. Elementele de bloc cu poziție fixă ​​sunt ancorate folosind proprietățile din stânga, sus, dreapta și jos la marginile ferestrei browserului. Poziționarea fixă ​​este utilizată pentru a crea interfețe cadru (fereastra browserului este împărțită în mai multe zone), un meniu fix, un subsol fix al site-ului și blocuri „permanente” (listă de linkuri, butoane sociale etc.).

Poziționarea relativă este specificată prin specificarea distanțelor stânga, sus, dreapta și jos în raport cu poziția sa curentă.

Cu toate acestea, această poziție de bloc poate fi creată și folosind proprietatea marjă.

Poziționarea relativă nu este distractiv de folosit singură, este folosită în mare parte împreună cu poziționarea absolută.

Să luăm în considerare opțiunile:

Mai sus am vorbit despre cum puteți poziționa elementele paginii folosind tabele. Dar acest lucru se poate face și folosind stiluri. Printre parametrii de stil există proprietăți speciale pentru poziționare:

• stânga - pentru a seta distanța în pixeli de la marginea din stânga a ferestrei (coordonată x);
• top - pentru a seta distanța în pixeli de la marginea de sus a ferestrei (coordonată y);
• z-index - pentru a indica ordinea în care elementele se vor suprapune; aceasta este o dimensiune nouă, elementele cu un z-index mai mare vor apărea deasupra elementelor cu un z-index mai mic.

Desigur, utilizarea acestor trei proprietăți nu creează efectul de spațiu tridimensional, dar acesta este ceva mai mult decât o suprafață plană. În acest caz vorbim despre spațiu 2,5-dimensional.
Pe lângă proprietățile de coordonate, avem nevoie de proprietatea poziției, care, în combinație cu proprietățile din stânga și de sus, ne permite să instalăm elemente în poziții specifice ale ferestrei. Proprietatea poziție poate lua trei valori:

• absolut - proprietățile din stânga și de sus specificate vor plasa elementul într-un punct cu coordonatele x și y relativ la colțul din stânga sus al containerului (obiectul care conține acest element). Dacă sunt definite pentru un element din afara containerului, atunci originea coordonatelor va fi colțul din stânga sus al paginii. Rețineți că poziția unui element nu depinde de poziția etichetei sale în documentul HTML;
• relativ - elementul va fi instalat în conformitate cu locul în care se află în textul sursă; această valoare este setată implicit. De exemplu, dacă un element se află la trei linii de la începutul selecției sale în textul documentului, atunci în mod implicit se presupune că proprietatea poziției este relativă, iar proprietățile coordonatelor din stânga și de sus sunt considerate zero. Valorile diferite de zero ale proprietăților din stânga și de sus specifică deplasarea elementului în raport cu poziția sa inițială;
• static - elementul va fi plasat într-o anumită poziție față de fundal și nu se va mișca la derularea paginii.

Următorul exemplu arată utilizarea proprietății z-index. Deși în textul programului imaginea este descrisă deasupra celorlalte elemente, prin atribuirea unui index cu un număr mare, aceasta este mutată deasupra primului text. Astfel, utilizarea proprietății z-index te eliberează de cătușele ordinii firești de a menționa elementele în textul unui program HTML.

Poziționare




nepBbiu pozitionat text

Orez. 666. Utilizarea proprietății i-index vă permite să schimbați ordinea naturală a elementelor din textul unui document HTML

La poziționarea elementelor, se poate dovedi că dimensiunile elementului depășesc dimensiunile fragmentului (zona alocată specificată în exemplul nostru de etichetă). De exemplu, textul sau o imagine nu se încadrează complet în dreptunghiul alocat pentru aceasta. În acest caz, există proprietatea overwlow. Proprietatea overflow poate avea trei valori:

• none (nimic) - dacă elementul depășește fragmentul (spațiul alocat acestuia), acesta va fi în continuare afișat;
• clip - părțile elementului care ies dincolo de limitele fragmentului vor fi tăiate;
• scroll - se va folosi derularea.

Următorul exemplu utilizează proprietatea overflow pentru a crea un mecanism de defilare pentru primul text.

Poziționare




textul poziționat riepBbiM

Textul poziționat al doilea

Orez. 667. Mecanism de defilare a textului implementat utilizând proprietatea overflow

Desigur, paginile inestetice din desenele anterioare au fost create doar pentru a demonstra capacitatea limbajului de a poziționa elemente. Tu decizi singur ce instrumente vei folosi și în ce scop pe pagina ta web.

Folosind proprietățile de poziționare, este ușor să creați un efect tridimensional pentru etichetele dvs. Ideea este de a afișa texte cu același conținut ușor deplasate unul față de celălalt și colorate în culori diferite. Încercați să scrieți un program corespunzător ca exercițiu. Imaginea arată aproximativ ce ar trebui să se întâmple. Sub figură se află una dintre versiunile posibile ale programului care creează o inscripție „tridimensională”.

Orez. 668. Exemplu de creare a textului 3D folosind CSS

efect 3d

P (familie font: "sans-serif"; dimensiune font: 96, -culoare: roșu)
P. evidențiere (culoare: argintiu)
P. umbră (culoare: roșu închis)

Text volumetric"

Text volumetric

Text volumetric

Vă rugăm să rețineți că această metodă de a crea titluri eficiente este mult mai economică decât utilizarea fișierelor grafice cu conținut similar.

Poziționarea blocurilor CSS este una dintre cele mai importante etape ale layout-ului, deoarece aceasta este ceea ce afectează adaptabilitatea site-ului sau posibilitatea implementării acestuia în viitor (dacă nu este necesară în prezent), și are, de asemenea, un impact semnificativ asupra extinderea în continuare a site-ului. Nu este neobișnuit ca „proiectenții de layout” să facă un astfel de aspect încât, în cele din urmă, să fie mai ușor să îl arunci decât să schimbi ceva, dar în același timp poate arăta complet în conformitate cu aspectul. Această situație apare din cauza lipsei de înțelegere a unde și când să folosiți acest sau acel tip de poziționare. Astăzi vom încerca să înțelegem această problemă. Și astfel, în CSS există o proprietate de poziție. Această proprietate poate lua 5 valori, dar le vom lua în considerare 4 principale:

• absolut
• static
• relativ
• fix

Prima metodă de poziționare din lista noastră este absolută. La atribuirea acestei proprietăți, blocul devine o unitate în sine, iar alte elemente ale paginii nu îi afectează locația și nici nu afectează alte elemente. Mărimea blocului este determinată de proprietățile de lățime și înălțime, iar locația pe pagină este determinată de proprietățile de sus. stânga, dreapta și jos acești parametri specifică umplutura de la marginile de sus, stânga, dreapta și inferioară. Dacă blocul nu are un element părinte și, de asemenea, dacă poziționarea elementului părinte este diferită de static, atunci proprietățile de sus, stânga, jos, dreapta setează indentările de la începutul paginii, în caz contrar de la marginile paginii. element părinte.

Cel mai adesea, acest tip de poziționare este utilizat atunci când blocul trebuie apăsat spre marginea dreaptă sau inferioară. Să luăm în considerare acest aspect.

Pentru comoditate, blocurile au fost evidențiate cu un cadru multicolor. Markup-ul va arăta astfel:

XHTML

Relație (poziția: relativă; ) .galben (poziția: absolut; dreapta: 10px; jos: 10px; )

În acest exemplu, am folosit proprietățile din dreapta și de jos pentru a seta decalajul față de marginile din dreapta și de jos. Aceste valori de proprietate sunt echivalente cu valorile de sus: Înălțimea elementului - 10px și stânga: Lățimea elementului - 10px.

De asemenea, poziționarea absolută este uneori folosită atunci când este necesar să „impactezi” un element pe altul.

Cel mai comun tip de poziționare care apare pe fiecare pagină și este de obicei setat pentru majoritatea elementelor este static, scris în css ca static. Pentru majoritatea etichetelor HTML, această valoare este definită implicit, adică dacă poziția nu este specificată în mod explicit, valoarea va fi statică. Cu această aranjare, elementele sunt aliniate unul sub celălalt iar coordonatele din fereastra fiecărui element depind de elementele cele mai apropiate cu poziție: static sau poziție: relativă. Proprietățile de sus, stânga, dreapta, jos nu vor funcționa cu această poziționare, poziția este modificată din cauza proprietății marginii.

Acest tip de poziționare este foarte asemănătoare cu poziționarea statică, cu excepția faptului că poziția elementului poate fi schimbată cu proprietățile sus, stânga, dreapta, jos și margine.

Poziționarea fixă ​​este similară cu poziționarea absolută în ceea ce privește modul în care sunt specificate coordonatele, dar locația este calculată nu în raport cu pagina HTML, ci în raport cu fereastra browserului, de exemplu. cu proprietatea top: 10px, veți seta marginea superioară la 10px DIN FEREASTRA BROWSERULUI și indiferent de nivelul de derulare a paginii la care vă aflați, acest element va urma întotdeauna ecranul dvs.

Utilizat de obicei pentru elementele de navigare, astfel încât utilizatorul să aibă întotdeauna la vedere informații importante sau link-uri către pagini interesante.

După cum probabil știți deja, puteți configura un site web folosind tabele, caz în care pagina este împărțită în celule. De asemenea, puteți utiliza blocuri în aceste scopuri atunci când o pagină de site web constă din elemente individuale.

Probabil că nu mă voi înșela dacă spun că o problemă serioasă pentru mulți webmasteri începători este sarcina de a plasa blocuri într-un anumit loc pe o pagină web.

Una dintre principalele dificultăți atunci când dispuneți folosind blocuri este poziționarea (alinierea) acestor blocuri.

Cred că mulți dintre voi ați auzit despre un strat. Și, de regulă, un strat este înțeles ca un bloc specificat de etichetă. De fapt, totul este puțin diferit.

Nu există straturi în HTML. Este doar o metaforă. Când vorbim despre straturi, ele înseamnă un anumit container (element) html care poate fi plasat într-un anumit loc pe o pagină web.

A doua concepție greșită este de a clasifica doar blocul specificat de etichetă ca straturi. Nici acest lucru nu este adevărat. Acestea pot include, de asemenea, paragrafe (

), liste (

) și alte elemente.
Și acum cam ah.

După cum am menționat mai sus, puteți seta locația oricărui element HTML. Nu este nevoie să folosiți întotdeauna eticheta pentru aceasta. De asemenea, utilizarea acestei etichete nu vă obligă să îi acordați vreo poziție pe pagina web.

Semnificația utilizării unui bloc specificat de o etichetă se reduce la mărire. La urma urmei, puteți plasa și alte elemente în interiorul acestuia (paragrafe, imagini etc.). Acest lucru creează un bloc mare cu conținut variat, care este mult mai ușor de poziționat pe o pagină web decât fiecare element separat.

Poziţionarea elementelor.

Există patru tipuri principale de poziționare:

1. Static
2. Absolut
3. Fix
4. Relativ

Static

Folosit ca locație implicită. În acest caz, browserul se uită la codul HTML, îl împarte în elemente și compune o pagină din acestea. Rezultatul este o succesiune de un număr de elemente. Sunt afișate în ordinea în care sunt indicate în codul html.

Aplicarea parametrilor stânga, sus, dreapta și jos nu produce niciun rezultat.

Poziționarea statică trebuie avută în vedere atunci când este utilizată poziționarea relativă.

Absolut

Folosind poziționarea absolută, sunt specificate coordonatele colțului din stânga sus al blocului. În acest caz, coordonatele sunt numărate relativ la locația elementului părinte. Dacă elementul părinte este o fereastră de browser, atunci blocul este aliniat în raport cu acesta. Dacă există un alt element în care se află blocul, atunci alinierea are loc în raport cu acest element.

Fix

Deja din nume devine clar că în acest caz elementul este fix. Se află într-un anumit loc de pe pagina web și nu se mișcă nicăieri. Această aliniere este adesea folosită pentru ferestre pop-up, unde sunt centrate și nu se mișcă în timp ce derulați pagina.

Relativ

Acest tip de poziționare poate fi dificil. Numele său nu este pe deplin potrivit. Mulți oameni confundă poziționarea relativă și absolută a elementelor. Poate părea că alinierea este relativă la elementul părinte. Și în cazul poziționării absolute - în raport cu fereastra browserului. Dar asta nu este adevărat.

Este necesar să înțelegem că locația elementului în acest caz are loc relativ la locul său într-o poziție statică. Acesta este ceea ce s-a menționat mai sus.

Mai simplu spus, îi spui browserului să mute un element atât de mulți pixeli față de locul în care se află în mod implicit.

Mai este un punct dificil. Ce se întâmplă dacă elementul părinte are o poziție relativă, dar elementul imbricat are o poziție absolută? În acest caz, coordonatele elementului copil vor fi numărate relativ la elementul părinte, ținând cont de decalajul acestuia, dacă este cazul.

Rezuma.

Deci, există o proprietate de poziție. Această proprietate poate lua 4 valori Static, Absolut, Fix și Relativ. Valoarea implicită este Statică.

Când specificați coordonatele pentru un element, trebuie să spuneți și browserului cum ar trebui să calculeze acele coordonate. Trebuie să-i dăm un punct de plecare.

Nu uitați că dacă proprietatea poziției este absentă, coordonatele nu vor fi luate în considerare, blocul va rămâne în același loc, în poziția sa statică.


Acum să vedem cum sunt setate coordonatele.

În aceste scopuri, sunt utilizate patru tipuri de proprietăți:

1. Sus
2.Stânga
3. Corect
4. De jos

Top - o valoare pozitivă (de exemplu, 20px) mută blocul cu 20 pixeli în jos. O valoare negativă (-20px) mută elementul cu 20 de pixeli în sus. Toate acestea se întâmplă relativ la colțul din stânga sus.

Stânga - deplasați la stânga sau la dreapta, în funcție de semn. Relativ la colțul din stânga sus.

Dreapta - deplasați la dreapta și la stânga, în funcție de semn. Relativ la colțul din dreapta sus.

De jos - comutați în sus sau în jos, în funcție de semn. Apare relativ la colțul din stânga jos.

Iată codul HTML:









Și acesta este CSS-ul:

#1 {
poziție:relativă;
sus:100px;
stânga: 100px;
lățime: 500px;
înălțime: 500px;
culoare de fundal:#CCCCCC;
}

#11 {
culoare de fundal:#003399;
poziție: absolut;
jos: -30px;
dreapta: -50px;
lățime: 100px;
înălțime: 100px;
}

#2 {
culoare de fundal:#990066;
lățime: 200px;
înălțime: 300px
}

Practică.

În timp ce scriam, mi-am dat seama.

18.02.15 21.4K

Dacă tăiați orice site web creat pe baza html, atunci veți vedea o anumită structură stratificată. Mai mult, aspectul său va fi asemănător cu un tort stratificat. Dacă ți se pare așa, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:

Avantajele aspectului folosind o etichetă

Există două tipuri principale de structură a site-ului web:

• Tabular;
• Bloc.

Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt lungimea codului și viteza scăzută de încărcare.

Când utilizați aspectul tabelului, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce utilizați blocuri div, elementele sunt afișate imediat.

Pe lângă viteza mare de încărcare, blocarea unui site web vă permite să reduceți de mai multe ori cantitatea de cod HTML. Inclusiv prin utilizarea claselor CSS.

Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.

Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.

Ajutoare pentru poziționare

În aspectul bloc, este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni
Unde:

• stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
• dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
• nici unul – împachetarea nu este permisă;
• inherit – moștenește valoarea elementului părinte.

Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:

#stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta




Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:




Dar nici aceasta nu este cea mai bună opțiune. Când fereastra este redusă în dimensiune, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul. Straturi de centrare

În exemplul următor, vom folosi un strat container în care vom plasa elementele rămase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginile de la marginea superioară și automat pe părțile laterale (marja: 0 auto):

#container ( lățime: 600px; margine: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; flotant: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; flotant : stânga; fundal: rgb(0,255,153); #center (lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); )




Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:

După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:




În exemplul următor, am folosit o serie de proprietăți CSS noi pentru a centra straturile în interiorul unui container:

#container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )




O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div într-un div:
• display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
• vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
• margin-left – setează marginea din stânga.
Cum se face o legătură dintr-un strat

Oricât de ciudat ar suna, acest lucru este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Să ne uităm la un exemplu practic de implementare a unui strat de legătură:

#layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ; ) Link către site-ul nostru




În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%. Ascunderea și afișarea elementelor de bloc

Elementele bloc oferă mai multe oportunități de extindere a funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.

Acest lucru este valabil mai ales pentru pagina principală, costul publicității pe care este cel mai mare. Prin urmare, se pune problema unde să „împingă” un alt banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!

O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:

#layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Acesta este butonul magic. Făcând clic pe el, va ascunde sau afișa blocul de ascundere.