Etichete bloc și inline. HTML - Elemente în linie și bloc

20.04.2019 Sfat

In acest capitol:

Sintaxa elementului

element HTML este unitatea structurală principală a unei pagini web, scrisă în limbaj HTML... Imaginea de mai jos demonstrează sintaxa elementelor. Pentru majoritatea etichetelor, sintaxa elementului va arăta la fel, cu excepția etichetelor individuale.

Toate elementele din HTML urmează același format:

Elementul începe cu o etichetă de pornire.
Elementul se termină cu o etichetă de închidere.
Conținutul unui element este totul între etichetele de deschidere și de închidere.
Unele elemente nu au conținut (elemente goale).
Majoritatea elementelor pot conține atribute

Notă: nu uitați să puneți „ / „, îi spune browserului că elementul tău s-a încheiat și că ceea ce va fi scris după el este deja un alt element.

Elemente goale

Există mai multe elemente în HTML care nu au o etichetă de final, de exemplu sau
... Astfel de elemente sunt numite gol deoarece nu conțin niciun conținut și nu au o etichetă finală.

Elemente imbricate

Toate documentele HTML sunt compuse din elemente imbricate. Cele mai multe dintre ele pot conține fie alte elemente, fie ele însele pot fi imbricate în alte elemente, în timp ce adâncimea de imbricare a elementelor nu este limitată.

Următorul exemplu are trei elemente, dintre care două sunt imbricate:

Primul meu paragraf

Când imbricați un element în altul, aveți grijă să vă asigurați că elementul imbricat începe și se termină în același element. Deci, următorul exemplu este incorect:

Acest foarte

interesant

Elementele bloc și inline se completează perfect reciproc în timpul amenajării, fiecare ocupând propria nișă specifică. Dar există cazuri când caracteristicile acestor elemente sunt în mod clar insuficiente. Galeria foto prezentată în fig. 3.28 este format din secțiuni, care includ o imagine cu o legendă, în timp ce secțiunile sunt aliniate orizontal, ocupând întreaga lățime disponibilă. Când fereastra browserului este redusă, secțiunile se deplasează pe o altă linie.

Orez. 3.28. Galerie foto

Dacă utilizați eticheta

ca element de bloc, va începe de fiecare dată pe o linie nouă. Pentru elementele inline, nu puteți seta culoarea de fundal a întregii secțiuni și nu puteți seta dimensiunile acesteia. Cea mai populară soluție în astfel de cazuri este utilizarea proprietățile plutitoare despre care se va discuta în secțiunea următoare... Între timp, mă voi concentra pe elementele inline-block, care combină avantajele elementelor inline și bloc.

Nu există nicio etichetă în HTML care să se refere la elementele inline-block, aceasta poate fi definită setând proprietatea de afișare la inline-block pe element.

Div (afișare: bloc inline;)

Caracteristicile acestor elemente sunt următoarele.

Este permisă plasarea elementelor text, inline sau bloc în interiorul elementelor inline-block.
Înălțimea elementului este calculată automat de browser în funcție de conținutul blocului.
Lățimea este egală cu conținutul plus valorile de umplutură, marjă și chenar.
Mai multe elemente la rând sunt situate pe o linie și se înfășoară pe o altă linie dacă este necesar.
Poate fi aliniat vertical folosind proprietatea vertical-align.
Permis să setați lățimea și înălțimea.
Efectul de colaps nu funcționează.

Pentru a crea galeria prezentată în fig. 3.28 pentru o etichetă

ar trebui să setați valoarea de afișare ca bloc inline și în interiorul acesteia adăugați o imagine și o legendă prin etichetă

(exemplul 3.18).

Exemplul 3.18. Folosind afișajul

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Galerie

Catedrala Sofia

biserica poloneza

Clubul Comercianților

Monumentul Sf. Vladimir

Deoarece toate fotografiile au aceeași dimensiune, lățimea blocului este setată în mod explicit și este egală cu 150px, dar înălțimea nu este specificată, prin urmare, cu o legendă lungă la figură, înălțimea secțiunilor va diferi (Fig. 3.29). ).

Orez. 3.29. Înălțimi de secțiuni diferite

Aceasta nu este o problemă, deoarece secțiunile vor fi afișate într-un rând ordonat, în ciuda diferitelor înălțimi. În același timp, puteți modifica tipul de aliniere prin vertical-align, adăugând această proprietate la clasa foto. Dacă specificați valoarea top, atunci afișarea secțiunilor se va schimba (Fig. 3.30).

Orez. 3.30. Alinierea de sus

Problema principală este browserul IE până la versiunea 7.0 inclusiv. Acest browser aplică valoarea inline-block numai pentru elementele inline și nu funcționează corect cu elementele bloc. Pentru a convinge acest browser să redea exemplul nostru corect, trebuie să folosim inline în loc de inline-block și să setăm proprietatea hasLayout. Adăugarea inline va distruge aspectul în alte browsere, deci decizia corectă va profita de comentarii condiționate(exemplul 3.19).

Exemplul 3.19. Stilul IE

Construcția înseamnă aplicarea codului specificat pentru browserul IE versiunea 7.0 și mai jos. Alte browsere îl iau ca un comentariu și îl ignoră. În ceea ce privește proprietatea zoom, aceasta nu este standard și are scopul de a seta proprietatea hasLayout, care nu poate fi setată direct.

De asemenea, este convenabil să utilizați elemente de bloc inline pentru diverse cataloage de produse care se găsesc în magazinele online. De obicei, acestea sunt afișate cu o imagine și o legendă la aceasta. Toate acestea sunt similare cu galeria de mai sus, așa că tot ce rămâne este să-i modificați codul pentru a ține cont de alinierea la înălțime și de comportamentul IE (exemplul 3.20).

Exemplul 3.20. Catalog

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Catalog

Video 1856

Fotografii 315

Dispozitive mobile 2109

Calculatoare și echipamente de birou 4296

Aparate de uz casnic 731

Rezultat acest exemplu prezentată în fig. 3.31.

Orez. 3.31. Catalog

Pentru a nu întreba fiecare etichetă

, dintre care pot fi destul de multe, clasa proprie, în exemplul introdus

cu catalogul de id și stilul este aplicat etichetelor din interiorul acestuia.

Există două categorii principale de elemente HTML care corespund tipurilor de conținut și comportamentului lor în structura unei pagini web - blocatși elemente inline... Cu elementele bloc puteți crea structura unei pagini web, elementele inline sunt folosite pentru formatare fragmente de text(excluzând articolele și ).

Împărțirea elementelor în bloc și inline este utilizată în specificația HTML înainte de versiunea 4.01. În HTML5, aceste concepte sunt înlocuite cu un set mai complex, care necesită ca fiecare element HTML să respecte reguli care determină ce conținut este acceptabil pentru acesta.

Model de formatare vizuală CSS

1. Model de formatare vizuală

Modelul de formatare vizuală CSS este un algoritm care procesează un document HTML și îl afișează pe ecranul dispozitivului. Acest model transformă fiecare element din document astfel încât să genereze zero sau mai multe casete dreptunghiulare în conformitate cu modelul casetei CSS. Poziția acestor casete pe pagină este determinată de următorii factori:
- dimensiunea elementului (ținând cont dacă sunt setate explicit sau nu);
- tipul elementului (linie sau bloc);
- schema de pozitionare (debit normal, elemente pozitionate sau plutitoare);
- relaţiile dintre elementele din DOM;
- dimensiunile interne ale imaginilor continute;
- informații externe (de exemplu, dimensiunea ferestrei browserului).

Poziția și dimensiunile casetei(lor) fiecărui element sunt calculate în raport cu marginile cutiei dreptunghiulare, așa-numitele „Blocul care conține”(bloc care conține). Dimensiunea cutiei nu este limitată de dimensiunea blocului care conține, prin urmare, în anumite condiții, poate depăși limitele sale.

2. Modelul bloc

În modelul cutie, un element este tratat ca un container dreptunghiular cu o zonă de conținut și margini și umplutură opționale (interioare și exterioare). Proprietatea de afișare determină tipul de container al elementului. Există o valoare implicită de browser pentru fiecare articol.

Orez. 1. Modelul bloc al unui element

Zona de continut Este conținutul unui element, cum ar fi text sau imagine.

Captuseala interioara stabilit de proprietatea padding. Umplutura este distanța dintre conținutul principal și marginea acestuia (cadru). Dacă setați un fundal pentru un element, atunci acesta se va aplica și câmpurilor elementului. Căptușeala nu poate fi negativă, spre deosebire de căptușeală.

Captuseala exterioara stabilit de proprietatea marginii. Acesta adaugă spațiu în exteriorul unui element de la marginea exterioară a chenarului la elementele adiacente, separând astfel elementele din pagină. Căptușeala exterioară rămâne întotdeauna transparentă și arată fundalul elementului părinte.

Valorile de umplutură și marjele sunt specificate în următoarea ordine: sus, dreapta, jos și stânga.

Granita, sau chenarul elementului, setat folosind proprietatea border. Dacă nu este specificată nicio culoare a marginii, aceasta ia culoarea conținutului principal al elementului, cum ar fi textul. Dacă chenarul are goluri, atunci fundalul elementului va apărea.

Umplutura, umplutura și chenarul elementului sunt opționale, implicit sunt setate la zero. Cu toate acestea, unele browsere adaugă valori implicite pozitive acestor proprietăți pe baza foilor de stil. Puteți șterge stilurile de browser pentru toate elementele folosind selectorul universal:

* (marja: 0; umplutură: 0;)

3. Elemente bloc și containere bloc

Elemente de bloc- elemente de nivel superior care sunt formatate vizual ca blocuri, poziționate vertical pe pagină din fereastra browserului. Afișează valorile proprietăților, cum ar fi blocul, elementul din listă și tabelul, fac elementele asemănătoare blocurilor. Elementele de bloc generează un bloc principal care conține doar blocul de elemente. Elemente setate pentru afișare: item-list generează casete marcatoare suplimentare care sunt poziționate în raport cu caseta principală.