Css - Lecția 11
este necesar să se stabilească proprietatea poziție cu un bloc de poziționare relativă: deplasarea relativă și proprietățile. Deplasarea în acest caz nu va avea loc pe elementul „mamă“ (ca o poziționare absolută) și în raport cu blocul în fluxul normal. Acest lucru va fi mai clar cu un exemplu. Să avem o pagina HTML cu trei div-uri:
Să ne cerem dimensiunea foii de stil și limitele acestor blocuri:
Acum, pagina noastră în browser-ul arata ca acest lucru:
Acum, să schimbe poziția celui de al doilea bloc pe această pagină a adăuga o regulă de stil:
Acum, pagina noastră va arăta astfel:
Blocul nostru a doua mutat în jos și spre dreapta în raport punctul în care el a fost în fluxul normal. Restul unităților au rămas în locurile lor. Aproape de poziționare relativă este folosit foarte des, așa că nu vom să acorde mai multă atenție la ea și ia în considerare blocuri plutitoare.
Aceste blocuri nu pot fi poziționate cu o precizie de un pixel, la fel ca în schemele anterioare, dar acest lucru este poziționarea circuitului este foarte frecvente. Fără flotoare administrează un site rar, să nu mai vorbim face un „cauciuc“ aspect al site-ului, fără chiar imposibil.
Astfel de blocuri se pot deplasa liber în jurul paginii, în acest fel se comporta imagini in HTML, aliniate cu parametrul pomoschyu Align.
Unități plutitoare sunt determinate de proprietatea float. care determină dacă unitatea plutitoare și în ce direcție se va mișca. Există trei opțiuni:- stânga - bloc este presat la stânga, celelalte elemente curg în jurul ei spre dreapta.
- dreapta - bloc este presat la dreapta, celelalte elemente curg în jurul ei de pe partea stângă.
- none - unitatea nu este deplasată și poziționat în funcție de proprietatea poziție.
Să ne uităm la un exemplu. Să avem o pagina HTML cu următorul cod:
Doar câteva elemente pe pagină. Acest lucru poate fi text simplu, link-uri, liste, imagini, etc.
Și pagina style.css cu următorul cod:
Acum, pagina noastră în browser-ul arata ca acest lucru:
Să facem unitatea noastră plutitoare, și împingeți-l la marginea din stânga:
Acum, pagina noastră în browser-ul arata ca acest lucru:
Acum, să Strângeți blocul la dreapta:
Acum, pagina noastră în browser-ul arata ca acest lucru:
Și ce se va întâmpla în cazul în care plutește pe câteva pagini ale blocurilor? Sa adaugam nostru pagina HTML alt bloc:
Doar câteva elemente pe pagină. Acest lucru poate fi text simplu, link-uri, liste, imagini, etc.
Și cere-le la valori diferite ale proprietăților float.
Acum, pagina noastră în browser-ul arata ca acest lucru:
Și dacă au aceeași valoare? De exemplu:
Apoi, al doilea bloc presează marginea din dreapta a primei unități:
O situație similară va fi aceleași valori dreapta.
Vă rugăm să rețineți: în primul rând la marginea din dreapta se va apăsa unitate 1, și a-l apăsat pe blocul 2.
Și ce să facem dacă vrem să facem blocuri au fost presate la dreapta, dar ar fi localizat una deasupra celeilalte. Pentru a face acest lucru, există o proprietate clară. care determină care parte a unității plutitoare nu pot coexista cu alte unități plutitoare. În proprietățile ETOG ale unuia dintre cele patru valori pot fi setate:- stânga - bloc trebuie să fie situate sub toate blocurile din stânga.
- dreapta - bloc trebuie să fie situate sub toate blocurile din dreapta.
- ambele - blocul trebuie să fie situate sub toate blocurile plutitoare.
- none - fără limite, acest lucru este implicit.
Acum sa întâmplat, așa cum a vrut: un bloc dintr-un alt:
In tutorialul anterior, folosim de poziționare absolută a face doar o astfel de pagină:
Să vedem cum se poate face cu ajutorul unor blocuri plutitoare. Deci, cele mai multe dintre codul paginii este după cum urmează: