Elementul bloc din structura este indicat de eticheta div.
Cum se deosebește div de p?
Se recomandă utilizarea acestui cod pentru paragraful din întregul proiect. Nimic altceva nu este necesar, cu excepția, poate, creșterea fontului și modificarea culorii textului pentru unele blocuri:
Nu este necesar să setați proprietățile blocului în afișarea proprietății CSS: bloc - acesta este motivul pentru care îi mulțumim capacului.
Poziție pentru DIV
Ei bine, acum cel mai interesant este poziționarea. Când unitatea este plasată pe o pagină, ea are parametrii standard: lățimea 100% a părintelui, poziționarea statică. În această poziționare, blocul din pagină, ca și în geam: mutați-l - tot ce se mișcă sub el (sau deasupra acestuia dacă treceți de jos).
Este posibil să adăugați o proprietate float la blocul: stânga (dreapta). În acest caz, blocul în dimensiune este redus la dimensiunea conținutului său, iar tot ceea ce merge mai jos - curge în jurul acestuia în dreapta sau în stânga.
Blocați părintele, în interiorul căruia există div c float: stânga sau dreapta, își pierde înălțimea. În acest caz, trebuie să adăugați un pseudo-element în el în CSS.
Dacă nu înregistrați un pseudo-element, atunci linia de jos nu va funcționa.
poziția relativă
Dacă elementul este atribuit proprietății poziției: css, atunci se comportă după cum urmează:
- elementul implicit își ia locul în "sticla" paginii, lățimea și înălțimea acesteia.
- Elementul poate fi mutat cu proprietățile stânga, dreapta, sus, jos - va fi mutat ca și cum nu este pe pagină. Odată cu sosirea elementelor vecine.
- Cu proprietățile margini, elementul se va deplasa fără a "suprapune" elementele vecine
poziția absolută
Este foarte important să înțelegem activitatea acestei valori. Este fundamental pentru structura bloc a paginilor html. Dacă unui element îi este atribuită această proprietate în css, acesta este afișat de browser ca și cum nu ar fi fost în coada comună. Controlarea poziției elementului se face cu ajutorul butoanelor stânga, dreapta, sus, jos. Numărătoarea este de la granițele unității părinte. Blocul părinte este primul bloc în care poziția noastră este poziționată: absolută și a cărei proprietate a poziției este setată la relativă, absolută sau fixă. Dacă nu există astfel de blocuri în arborele html de marcare, contorul va merge din colțul din stânga sus al paginii.
Nu vă surprindeți faptul că blocul de coduri adăugat în subsol:
va fi undeva în antet, deși ar trebui să fie în subsol, 10 pixeli din colțul din stânga sus. Situația va corecta o linie:
De asemenea, este foarte important ca proprietățile de poziționare să poată fi date valori negative, adică ele pot plasa elemente dincolo de limitele blocului la o anumită distanță. Acest lucru este relevant pentru închiderea popup-urilor, pentru pictogramele de lângă elementele de meniu și alte elemente de design diferite ale site-ului.
Specificați numele clasei bloc astfel încât să fie clar ce este în bloc. Dacă știrile, atunci .news, conținutul - .content, etc.
poziția fixă
Când poziția unității este fixă, fereastra se derulează în afara acțiunii. Poziționarea determină poziția sa de la marginea ferestrei, iar derularea paginii nu afectează poziția acesteia. Elementul poate fi mutat cu proprietățile stânga, dreapta, sus, jos. O caracteristică foarte utilă cu care puteți face ferestre pop-up, diferite marcaje, ferestre, panouri.
Dacă setați blocul cu poziția: fixați proprietățile de sus și de jos la 25px și nu setați înălțimea - acesta va fi calculat automat de către browser, la marginile de jos și de sus ale ferestrei cu indentare de 25px
Articole similare
Trimiteți-le prietenilor: