Blocuri de poziționare Css, web-sprinturi

Acasă »Make-up» blocuri de poziționare CSS

Blocuri de poziționare Css una dintre cele mai importante etape ale layout-ul, deoarece aceasta este ceea ce afectează capacitatea de adaptare a site-ului sau posibilitatea punerii sale în aplicare în viitor (în cazul în care nu este necesar în prezent), precum și având un impact semnificativ asupra scalarea în continuare a site-ului. Nu este mai puțin frecvente în cazul în care „de munte cu aspect“ fac acest aspect, astfel încât este mai ușor să arunce decât să schimbe ceva, dar ar putea să arate complet, în conformitate cu structura. Această situație rezultă din a nu înțelege unde și când să utilizeze un anumit tip de poziționare. Astăzi încercăm să înțelegem această problemă. Și astfel, există în proprietatea poziția css. Această proprietate poate lua 5 valori, dar vom lua în considerare patru cele mai importante:







Blocuri de poziționare absolută (absolut)

Prima pe lista noastră, metoda de poziționare - este o necesitate absolută. În numirea proprietăților, blocul devine o unitate independentă și celelalte elemente ale paginii nu afectează locația, precum și nu afectează alte elemente. Mărimea blocului este determinată de lățimea și înălțimea proprietăți, dar o locație pe pagină - proprietăți de top. stânga, dreapta și de jos, acești parametri definesc liniuțe de sus, stânga, dreapta marginile de jos și. Dacă unitatea nu are nici un element de bază, precum și în cazul în care poziționarea părintelui este diferit de statică, în partea de sus, stânga, jos, proprietăți de dreapta specifica compensările de la începutul paginii, în caz contrar de la marginea elementului părinte.

Cel mai adesea acest tip de poziționare este utilizat atunci când unitatea este necesar să apăsați pe marginea din dreapta sau de jos. Luați în considerare acest aspect.







Pentru comoditatea de blocuri au fost alocate în diferite culori cadru. Marcajul va fi după cum urmează:

În acest exemplu, am folosit proprietățile potrivite și de jos pentru care ar stabili liniuță din dreapta și marginile de jos. Aceste valori de proprietate sunt echivalente cu valori de vârf: înălțime Element - 10px și stânga: Lățime Element - 10px.

Doar poziționare absolută este folosit uneori, atunci când este necesar să se facă o „coliziune“ de un element la altul.

poziționare statică (static)

Cel mai frecvent tip de poziționare care apare pe fiecare pagină și este dat de obicei pentru majoritatea elementelor - statice, în css este scris ca statică. Pentru majoritatea tag-uri HTML valoarea definită în mod implicit, și anume, în cazul în care poziția nu este specificat în mod explicit, valoarea va fi statice. Cu acest aranjament, elementele sunt dispuse sub ele și coordonatele fiecărui element în fereastra depinde de elementele cele mai apropiate de poziția: statică sau poziția: relativă. Proprietățile sus, stânga, dreapta, jos nu va funcționa cu această poziționare, schimba locația proprietăților se datorează marjei.

Poziționarea relativă (relativă)

Acest tip de poziție este foarte asemănătoare cu o statică cu excepția faptului că locația elementului puteți schimba proprietățile sus, stânga, dreapta, jos, și marja.

poziționare fixă ​​(fix)

Caracteristicile fixe de poziționare care specifică coordonatele, cum ar fi absolut, dar locația nu este calculată în raport cu o pagină HTML, și în raport cu fereastra browser-ului, și anume atunci când partea de sus de proprietate: 10px, setați marginea superioară egală cu 10px din browser-ul ferestrei și indiferent de ce nivel sunt defilare pagina, elementul va urmări întotdeauna televizorul.

De obicei utilizate pentru elementele de navigare care au utilizatorul a fost întotdeauna în minte informații sau linkuri către pagini de interes importante.

înregistrări similare

  • HTML-tag img adăugarea de imagini
  • Blocuri de poziționare Css, web-sprinturi
    Tag-uri și atribute HTML. Partea a 2.
  • HTML-formă și elementele sale de bază