Conţinut
- Eticheta DIV și proprietatea float
- Proprietatea clară
- Indentări în aspectul blocului
Orice pagină web constă din elemente situate pe ea, iar div-ul de aspect al blocurilor este aproape întotdeauna responsabil pentru plasarea lor. Desigur, există și un aspect tabelar folosind etichete
| , și există chiar dispute despre care este mai bine să folosiți un sistem bloc sau tabelar. Cu toate acestea, în realitate, în prezent, nu veți întâlni niciunul dintre site-urile moderne, populare și convenabile care folosesc doar un aspect tabelar. În cel mai bun caz, este folosit numai pentru ceea ce este destinat - adică pentru crearea de tabele, dar nu pentru formarea structurii site-ului în sine. |
Faptul este că aspectul div al site-ului vă permite să setați multe proprietăți css care nu sunt disponibile pentru tabele. În plus, principalul dezavantaj al sistemului de tabele este că tabelul nu va fi afișat pe ecran până când nu este încărcat complet de browser. Dacă întregul site este realizat într-un tabel, atunci acesta va apărea pe afișaj numai după ce întregul cod html al paginii este încărcat complet.
Eticheta DIV și proprietatea float
Baza sistemului de blocuri este o etichetă, care este un container pentru conținut. Poate conține și alte recipiente.
Utilizarea unei etichete DIV nu este mai complicată decât editarea etichetelor MP3. De regulă, structura standard a site-ului este formată după cum urmează: există un container principal (deseori i se atribuie o clasă numită wrapper, container, main etc.). În interiorul acestui container se află blocurile meniului, partea tematică și bara laterală.
În mod implicit, fiecare bloc nou este plasat pe o linie nouă. Pentru a plasa un bloc la stânga sau la dreaptaaltfel (de exemplu, pentru a poziționa bara laterală în dreapta), este folosită proprietatea float. În mod implicit, are valoarea „niciun”, dar puteți seta și valorile „stânga” și „dreapta”.
Luați în considerare această proprietate folosind un exemplu cu două blocuri.
Blocați pentru conținut Bloc pentru bara laterală
Acest cod va produce următoarea ieșire:
Proprietatea clară
Este important de luat în considerare că proprietatea float se aplică nu numai blocului în sine, în care este scris, ci și următorului element care va urma acest bloc. Adică, dacă adăugăm un alt bloc celor două blocuri descrise mai sus, fără a-i specifica proprietăți, atunci acesta nu va fi situat pe o linie nouă, ci va începe în dreapta celui de-al doilea bloc.
Pentru a evita acest lucru, bloc layout-ul div folosește proprietatea clear, care trebuie setată pentru blocul pe care dorim să îl plasăm dintr-o linie nouă. Cel mai adesea, pentru aceasta, este setată la valoarea „ambele”, dar puteți seta și valoarea „stânga” sau „dreapta” dacă dorim nu numai să plasăm blocul pe o linie nouă, ci și să setăm alinierea acestuia. .
Să adăugăm un nou element la exemplul de mai sus:
Blocați pentru conținut Bloc pentru bara laterală Un bloc nou situat mai jos
Rezultat:
Indentări în aspectul blocului
Pe lângă amplasarea blocurilor, este importantă alocarea indentărilor atât între blocuri, cât și în interiorul acestora. Pentru aceasta, se folosesc, respectiv, proprietățile de margine și de umplutură.
Indentațiile sunt setate separat pentru părțile de sus, dreapta, jos și stânga ale elementului. Ele pot fi specificate într-o singură linie prin enumerarea a patru valori:
marjă: 20px 10px 0 40px
Un bloc cu astfel de parametri va fi situat la 20 de pixeli sub cel mai înalt element, la zece pixeli de elementul în picioare,va avea zero padding în partea de jos și va avea o marjă de 40px în stânga.
Dacă în proprietatea padding sunt specificați aceiași indicatori, atunci acestea vor fi indentările interne ale conținutului în raport cu limitele blocului în care este situat.
De asemenea, puteți seta proprietăți individuale pentru fețele individuale folosind margine-sus margine-jos, margine-stânga, margine-dreapta (și în mod similar pentru umplutură). În acest caz, dacă una dintre laturi nu este specificată, atunci indentația de pe latura sa va fi zero sau va fi determinată de proprietățile generale css specificate pentru blocurile de pe pagină.