Înțelegerea proprietății afișajului CSS

Sep 14, 2025

să

E miezul nopții și asta div Pe site-ul dvs. încă arată ca pieptul unui copil al copilului. Toate elementele sunt o mizerie nemișcată și de fiecare dată când te joci Css. S. afişa proprietate, se rearanjează într-un pic de nonsens complet diferit.

Dacă sunteți ca mine, veți rezolva probabil acest lucru prin mormăind sub respirație și deveniți în mod constant mai agresiv cu tastatura dvs. Și, deși această strategie a lucrat pentru mine înainte, am plecat recent să găsesc o modalitate mai bună de a înțelege afişa proprietate.

Se pare că elementele de bază ale afişa sunt mult mai simple decât am crezut inițial. De fapt, ei folosesc aceleași principii ca și ambalarea unei valize. Mă voi acoperi Afișaj: Block. , Inline-bloc și in linie . Dacă ați aranjat o valiză într-un mod ordonat înainte, veți vedea paralel. Dacă sunteți un fel de persoană care vă bateți toată îmbrăcămintea într-o manieră întâmplătoare - bine, există doar atât de mult încât pot face pentru dvs.

Valiza noastră va conține trei tipuri de îmbrăcăminte:

Delicatează, ca o cămașă colatară
Tricouri care pot fi rulate
Șosete sau lenjerie de corp care pot fi umplute în goluri

Pentru referință, dacă am modelat valiza în HTML, ar arăta astfel:

 & Lt; Div clasa = "valiză" & gt;
    & Lt; Div clasa = 'delicat "& gt; / lt; / div & gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    "Sosete de clasă Div =" Sosete "& gt; / div & gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
    & Lt; Div Clasa = 'Tshirt' & GT; / Lt; / Div & Gt;
& lt; / div & gt;

Elementele delicate deasupra

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — Cămașa colară se află pe o grămadă de haine sub ea. Este singurul element care ocupă propriul strat

Afișaj: Block. este implicit pentru majoritatea elementelor HTML. Ceea ce înseamnă că elementul ocupă întregul spațiu orizontal în interiorul recipientului său div . Dacă se află lângă alte elemente de frate, acesta va începe o nouă linie și să nu permită alte elemente pe linia sa. Este similar cu elementele delicate pe care le-ai pus în partea de sus a valizei tale. Acestea sunt articole delicate sau inteligente, cum ar fi cămăși colorate. Nu vrei ca ei să fie încrețiți, așa că vă asigurați că nu sunt împinși împotriva altor bucăți de îmbrăcăminte.

Acest lucru aduce una dintre cele mai dificile părți ale lui Afișaj: Block. . Observați modul în care tricoul colier nu ocupă întreaga lățime a valizei? Asta nu înseamnă că alte elemente vor sări până la nivelul acestuia. Să spunem că această cămașă este de 60% din lățimea valizei; Încă ar bloca alte elemente să se alăture la nivelul superior.

De aceea există o margine portocalie în imagine. A Afișaj: Block. Elementul va adăuga automat o marjă în jurul acestuia dacă nu ocupă întregul spațiu orizontal.

Tricouri ambalate frumos

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Aici putem vedea rândurile de sus și de jos ale tricourilor, cu patru cămăși în fiecare

Cea mai mare parte a valizei dvs. este probabil plină de restul îmbrăcămintei pentru călătoria dvs. Din motive de simplitate, vom tăia acest lucru până la tricouri. Există o mare dezbatere pe internet cu privire la faptul dacă plierea sau rularea este mai eficientă. Sunt un fel de persoană pliabilă.

Oricum, pentru a se potrivi celor mai multe articole, vă aliniați tricourile una lângă alta. Acesta este exact ceea ce Afișaj: Inline-bloc este destinat. Aceste elemente pot sta alături unul de celălalt pe aceeași linie, precum și lângă Afișaj: Inline elemente.

Spre deosebire de Afișaj: Inline elemente, an Inline-bloc Elementul se va deplasa la următoarea linie dacă nu se potrivește în conținutul său div alături de cealaltă Inline-bloc elemente. Pentru a avea o lovitură de tricou pe următorul rând, ar trebui să o tăiați în jumătate și să utilizați jumătatea rămasă pentru a începe un nou rând. Inline-bloc Elementele nu sunt lăsate să se împartă în jumătate dacă nu se potrivesc pe o linie.

Șosetele care completează golurile

The socks are inline elements, which means they will fill the gaps around the T-shirts — Șosetele sunt elemente inline, ceea ce înseamnă că vor umple golurile din jurul tricourilor

Verificați înapoi la HTML original și veți observa că există un șosete & Lt; div & gt; între cele opt tricouri. Dar aruncați o privire la viziunea orizontală a valizei din dreapta. Dacă există un șosete & Lt; div & gt; , cum se poate încheia rândul de mijloc și începe rândul de jos? Acesta este scopul Afișaj: Inline Fotografiile!

Un in linie elementul se va vărsa la următoarea linie dacă depășește lățimea div (în acest fel este diferit de Inline-bloc sau bloc ). De la șosetele noastre div Este plin de șosete care sunt umplute în mod întâmplător în goluri, poate începe cu ușurință umplerea decalajului din partea dreaptă a rândului de mijloc și se pot vărsa pentru a începe rândul de jos.

Nu vor trebui să fie tăiate șosete în jumătate pentru ca acest lucru să se întâmple. De aceea pot deveni in linie , în timp ce tricourile pot fi doar Inline-bloc . Dacă tricourile de pe rândul de mijloc au crescut doar 60% din lățime, șosetele & Lt; div & gt; se va deplasa pentru a umple întregul spațiu pe restul rândului.

Drum bun

Acesta este ultimul CSS pentru valiza noastră:

 .delicat {
    Afișaj: bloc;
    Lățime: 60%;
}

.tricou{
    Afișaj: Inline-bloc;
    Lățime: 20%;
}

.Socks {
    Afișaj: Inline;
}

Iată câteva scenarii alternative pentru a ilustra diferitele utilizări ale afișajului. Dacă delicatele deasupra au avut Afișaj: Inline-bloc , s-ar potrivi în dreapta alături de tricouri. Unele dintre tricouri s-ar mișca până la linia de sus, iar restul ar fi ajustat în consecință. Nu ar exista un tampon confortabil în stânga și la dreapta tricoului colier.

Dacă fiecare tricou a avut Blocul de afișare , ai avea un teanc masiv de tricouri deasupra celuilalt, unul pe linie. Dacă șosetele au avut Afișaj: Inline-bloc , toți s-ar sta pe rândul de jos, mai degrabă decât să curgă între cele două rânduri. Unele tricouri ar fi împinse pe un alt rând, formând o a patra linie. Ar exista un decalaj din partea dreaptă a rândului mijlociu al tricourilor.

Cu metoda pe care am subliniat-o aici, ajungem la o valiză înclinată, care utilizează cel mai bine spațiul disponibil.

Acest articol a apărut inițial în revista netă Ediția 289; Cumpărați-l aici Fotografiile!

Articole similare:

5 dintre cele mai bune resurse pentru învățarea HTML și CSS
Construiți layout-uri complexe cu PostCss-Flexbox
28 Exemple remarcabile de CSS

Înțelegerea proprietății afișajului CSS

Elementele delicate deasupra

Tricouri ambalate frumos

Șosetele care completează golurile

Drum bun

să - Cele mai populare articole

Cum să trageți un gât și umeri

Creați un efect de fundal paralax controlat de șoarece

Utilizați creier.js pentru a construi o rețea neurală

Recree un clasic manga

3 sfaturi pentru crafting Material promoțional tipărit

Fă-ți caracterele pop cu culoare și lumină

Cum de a gestiona clasele CSS cu JavaScript

Cum se îmbunătățește performanța site-urilor de comerț electronic

Categorii