Tipul de casetă aplicat unui element este definit de valorile proprietăților de afișare, cum ar fi bloc și inline și se referă la exterior valoarea de afișare.

Deoparte: tipuri de afișare interioare și exterioare

În acest moment, ar fi bine să explicăm și noi interiorși exterior tipuri de afișare. După cum sa menționat mai sus, casetele din CSS au un exterior tipul de afișare, care detaliază dacă caseta este blocată sau inline.

Cutiile au și un interior tipul de afișare, totuși, care dictează modul în care sunt așezate elementele din interiorul acelei casete. În mod implicit, elementele din interiorul unei casete sunt așezate în debit normal, ceea ce înseamnă că se comportă la fel ca orice alte elemente bloc și inline (după cum s-a explicat mai sus).

Cu toate acestea, putem schimba tipul de afișare interioară utilizând valori de afișare precum flex . Dacă setăm afișaj: flex; pe un element, tipul de afișare exterior este bloc , dar tipul de afișare interior este schimbat în flex . Orice copii direcți ai acestei cutii vor deveni articole flexibile și vor fi așezați conform regulilor stabilite în specificațiile Flexbox, despre care veți afla mai târziu.

Notă: Pentru a citi mai multe despre valorile afișajului și cum funcționează casetele în aspectul bloc și în linie, aruncați o privire la ghidul MDN pentru aspectul bloc și inline.

Când treceți să aflați mai detaliat despre CSS Layout, veți întâlni flex și diverse alte valori interioare pe care casetele dvs. le pot avea, de exemplu grid.

Cu toate acestea, aspectul bloc și în linie este modul implicit în care se comportă lucrurile de pe web - așa cum am spus mai sus, uneori este denumit debit normal, deoarece fără alte instrucțiuni, cutiile noastre sunt așezate ca cutii bloc sau în linie.

Exemple de diferite tipuri de afișare

Să trecem mai departe și să aruncăm o privire la câteva exemple. Mai jos avem trei elemente HTML diferite, toate având un tip de afișare exterior de bloc . Primul este un paragraf, care are un chenar adăugat în CSS. Browserul redă acest lucru ca un caseta bloc, astfel încât paragraful începe pe o linie nouă și se extinde la toată lățimea disponibilă pentru acesta.

A doua este o listă, care este prezentată folosind afișajul: flex . Acest lucru stabilește un aspect flexibil pentru articolele din interiorul containerului, totuși lista în sine este o casetă bloc și - ca și paragraful - se extinde la întreaga lățime a containerului și se întrerupe pe o nouă linie.

Sub acesta avem un paragraf la nivel de bloc, în interiorul căruia sunt două elemente. Aceste elemente ar fi în mod normal inline , totuși unul dintre elemente are o clasă de bloc și am setat-o ​​să afișeze: bloc .

Putem vedea cum se comportă elementele inline în acest exemplu următor. The E-urile din primul paragraf sunt implicite în linie și, prin urmare, nu forțați rupturile de linie.

Avem și un

care este setat să afișeze: inline-flex , creând o casetă inline în jurul unor elemente flex.

În cele din urmă avem două paragrafe ambele setate să fie afișate: inline . Containerul flexibil inline și paragrafele rulează împreună pe o singură linie, mai degrabă decât să se rupă pe linii noi, așa cum ar proceda dacă ar fi afișate ca elemente la nivel de bloc.

În exemplu, puteți schimba afișarea: inline pentru a afișa: bloc sau afișare: inline-flex pentru a afișa: flex pentru a comuta între aceste moduri de afișare.

Veți întâlni lucruri precum aspectul flexibil mai târziu în aceste lecții; Principalul lucru de reținut pentru moment este că modificarea valorii proprietății de afișare poate schimba dacă tipul de afișare exterior al unei casete este bloc sau inline, ceea ce schimbă modul în care se afișează alături de alte elemente din aspect.

În restul lecției ne vom concentra asupra tipului de afișaj exterior.

Ce este modelul casetei CSS?

Modelul complet de casete CSS se aplică casetelor bloc, casetele inline utilizează doar o parte din comportamentul definit în modelul casetei. Modelul definește modul în care diferitele părți ale unei casete - margine, chenar, umplutură și conținut - funcționează împreună pentru a crea o casetă pe care o puteți vedea pe pagină. Pentru a adăuga o complexitate suplimentară, există un model de cutie standard și unul alternativ.

Părți ale unei cutii

Alcătuind o casetă de bloc în CSS avem:

• Caseta de conținut: zona în care este afișat conținutul dvs., care poate fi dimensionată folosind proprietăți precum lățimea și înălțimea .
• Cutie de umplutură: Umplutura se află în jurul conținutului ca spațiu alb; dimensiunea sa poate fi controlată folosind umplutură și proprietățile aferente.
• Cutie de chenar: caseta de chenar cuprinde conținutul și orice umplutură. Mărimea și stilul acestuia pot fi controlate folosind chenar și proprietățile aferente.
• Caseta de marjă: Marginea este stratul cel mai exterior, împachetând conținutul, umplutura și chenarul ca spațiu alb între această casetă și alte elemente. Dimensiunea sa poate fi controlată folosind marginea și proprietățile aferente.

Diagrama de mai jos prezintă aceste straturi:

Modelul standard de casetă CSS

În modelul de cutie standard, dacă dați unei casete o lățime și o înălțime, aceasta definește lățimea și înălțimea caseta de conținut. Orice umplutură și chenar sunt apoi adăugate la acea lățime și înălțime pentru a obține dimensiunea totală preluată de casetă. Acest lucru este arătat în imaginea de mai jos.

Dacă presupunem că caseta are următorul CSS care definește lățime, înălțime, margine, chenar și umplutură:

Casetă ( lățime: 350 px; înălțime: 150 px; margine: 25 px; umplutură: 25 px; chenar: 5 px negru solid; )

Spațiul ocupat de cutia noastră folosind modelul standard de cutie va fi de fapt 410px (350 + 25 + 25 + 5 + 5), iar înălțimea de 210px (150 + 25 + 25 + 5 + 5), deoarece umplutura și chenarul sunt adăugat la lățimea utilizată pentru caseta de conținut.



Notă: Marja nu este luată în considerare la dimensiunea reală a casetei - asigurați-vă că afectează spațiul total pe care îl va ocupa caseta pe pagină, ci doar spațiul din afara casetei. Zona cutiei se oprește la margine - nu se extinde în margine.

Modelul alternativ de casetă CSS

S-ar putea să credeți că este destul de incomod să trebuie să adăugați chenarul și căptușeala pentru a obține dimensiunea reală a cutiei și ați avea dreptate! Din acest motiv, CSS a avut un model alternativ de cutie introdus la ceva timp după modelul standard de cutie. Folosind acest model, orice lățime este lățimea casetei vizibile de pe pagină, prin urmare lățimea zonei de conținut este acea lățime minus lățimea pentru umplutură și chenar. Același CSS ca cel folosit mai sus ar da rezultatul de mai jos (lățime = 350 px, înălțime = 150 px).



În mod implicit, browserele folosesc modelul de casetă standard. Dacă doriți să activați modelul alternativ pentru un element, faceți acest lucru setând box-sizing: border-box pe el. Făcând acest lucru, îi spuneți browserului să ia caseta de chenar ca zonă definită de orice dimensiune pe care o setați.

Cutie (dimensiunea casetei: border-box; )

Dacă doriți ca toate elementele dvs. să folosească modelul de casetă alternativ și aceasta este o alegere comună printre dezvoltatori, setați proprietatea de dimensiune a casetei pe element, apoi setați toate celelalte elemente să moștenească acea valoare, așa cum se vede în fragmentul de mai jos. Dacă doriți să înțelegeți gândirea din spatele acestui lucru, consultați articolul Trucuri CSS despre dimensiunea casetei .

html (dimensiunea casetei: border-box; ) *, * ::înainte după(box-sizing: mostenesc; )

Notă: Un fragment interesant de istorie - Internet Explorer obișnuia să folosească implicit modelul de cutie alternativă, fără niciun mecanism disponibil pentru comutare.

Joacă-te cu modelele de cutie

În exemplul de mai jos, puteți vedea două casete. Ambele au o clasă de .box, care le oferă aceeași lățime, înălțime, margine, chenar și umplutură. Singura diferență este că a doua cutie a fost setată să folosească modelul alternativ de cutie.

Puteți modifica dimensiunea celei de-a doua casete (adăugând CSS la clasa .alternate) pentru a se potrivi cu prima casetă în lățime și înălțime?

Utilizați browserul DevTools pentru a vizualiza modelul cutiei

Pentru a seta lățimea, culoarea și stilul fiecărei părți în mod individual, puteți utiliza:

Pentru a seta culoarea, stilul sau lățimea tuturor laturilor, utilizați următoarele:

Pentru a seta culoarea, stilul sau lățimea unei singure părți, puteți utiliza una dintre cele mai granulare proprietăți de mână lungă:

În exemplul de mai jos am folosit diverse scurtături și mâini lungi pentru a crea borduri. Joacă-te cu diferitele proprietăți pentru a verifica dacă înțelegi cum funcționează. Paginile MDN pentru proprietățile chenarului vă oferă informații despre diferitele stiluri de chenar din care puteți alege.

La prima vedere, poziționarea blocurilor în CSS poate părea o sarcină simplă. Dar, în practică, totul se dovedește a fi mai complicat. Prin urmare, înainte de lecțiile practice de aspect, înțelegeți temeinic teoria.

Model de bloc și poziționare

Un pic de repetare. Articolul menționa că toate elementele blocului au formă dreptunghiulară. Ele sunt situate pe pagina web una sub alta - această ordine a elementelor bloc se numește flux general. Să ne uităm la locația blocului ca exemplu. e-mail în fluxul general:






container div


• Element din listă

Și așa arată în browser:



Pentru blocuri, indicați dimensiunile marginilor și indentărilor. Se determină și granița dintre ele, care va fi și cadrul blocului în sine. Aceste căptușeli și dimensiuni de chenar modifică lungimea și lățimea inițială a blocului.

Ordinea de poziționare în CSS este determinată de proprietatea poziției. Proprietatea poziție are cinci valori:

• static - aplicat implicit și nu este eliminat din fluxul general al documentului web. Parametrii de sus, dreapta, jos și stânga nu se aplică blocurilor cu această valoare de poziționare.
• moștenire - setează blocul la valorile elementului părinte
• relativă - poziție relativă
• absolut - poziție absolută
• fix - poziție fixă ​​- e

Sarcinile de poziționare sunt de a plasa un element bloc într-un loc strict specificat și de a determina influența acestuia asupra altor elemente situate în jurul lui.

Poziționare relativă
Poziționarea relativă implică schimbarea poziției unui element bloc în funcție de locația sa inițială. Cu alte cuvinte, punctul de plecare pentru calcularea parametrilor de mișcare a blocului sunt coordonatele sale originale.

Dar locul doar lăsat de element nu este îndepărtat din fluxul general. După ce sa mutat într-o altă poziție, blocul afectează în continuare structurile web învecinate ca și cum ar fi rămas pe loc.
Sugerez să ne uităm la efectul poziției: relativ; proprietate. De exemplu. A fost folosit codul anterior, cu lățimea tuturor blocurilor fiind adăugată la 150px, toate umpluturile și marginile implicite au fost, de asemenea, resetate și următoarele au fost adăugate pentru eticheta div:

poziție:relativă;
sus: 30px;
stânga: 80px;

Acum uită-te la captura de ecran.



După cum puteți vedea, div-ul s-a mutat la dreapta și în jos în raport cu coordonatele sale anterioare. Blocul de li rămâne în același loc. Particularitatea valorii relative menționate mai sus îl împiedică să urce la locul vacant. Dar mai există o caracteristică a poziționării relative.

Blocul div a suprapus o parte a elementului de jos, acest lucru a fost făcut intenționat pentru claritate. Această caracteristică vă permite să suprapuneți un element de design peste altul. Acest articol a analizat doar poziționarea relativă. Restul valorilor proprietăților de poziție CSS vor fi prezentate în următoarea postare.

Aspectul bloc este adesea folosit la crearea unui site web sau blog. Ca o consecință a acestui fapt, este adesea necesară indentarea blocurilor. Din acest motiv, aproximativ cum să indentați în CSS descrisă în detaliu în această lecție. Pentru browser, fiecare etichetă este un container care are conținut, umplutură, margini exterioare și o chenar. În această lecție vom învăța cum să facem indentări interne și externe și să luăm în considerare principalii lor parametri.

Figura de mai jos arată clar parametrii de indentare a blocului:

După cum puteți vedea, liniuțele pot fi făcute în patru direcții: liniuță de sus (sus), liniuță de jos (jos), liniuță din stânga (stânga) și liniuță din dreapta (dreapta). Unitățile de măsură pot fi pixeli, procente și alte unități CSS - aflați mai multe despre ele. Acest tutorial folosește pixeli.

Blocuri de umplutură

Proprietatea responsabilă pentru completarea în CSS este căptușeală. Deci, să ne uităm la un exemplu de setare a umpluturii interne pentru un bloc:

padding-top: 5px; /*padding-ul de sus*/ padding-left: 8px; /*padding stânga*/ padding-dreapta: 8px; /*padding dreapta*/ padding-bottom: 5px; /*căptușeală inferioară*/

În acest exemplu, umplutura este setată separat pentru fiecare parte a blocului. În plus, există mai multe moduri de a seta indentarea în CSS:

margine: 5px 8px 5px 8px; /*margini sus, dreapta, jos, stânga*/ margine: 5px 8px 5px; /*descrie marginile de sus, stânga, dreapta, jos*/ margine: 5px 8px; /*descrie marginile de sus și de jos, din dreapta și din stânga*/ margine: 7px; /*descrie toate marginile interne de 7px*/

Este mai ușor să vă amintiți prima și ultima metodă. În primul caz, indentațiile sunt plasate în sensul acelor de ceasornic (sus, dreapta, jos, stânga) - putem specifica orice cantitate de indentare; în cel din urmă caz, indentațiile de pe toate părțile vor fi aceleași.

Blocați marginile

Proprietatea responsabilă pentru marjele în CSS este marginea. Exemple de marje în CSS:

margine-sus: 5px; /*margine de sus*/ margine-stânga: 10px; /*marginea din stânga*/ marginea-dreapta: 10px; /*margine din dreapta*/ margine-jos: 5px; /*marginea de jos*/

umplutură: 5px 10px 5px 10px; /*margini sus, dreapta, jos, stânga*/ padding: 5px 10px 5px; /*descrie umplutura de sus, stânga și dreapta, de jos*/ padding: 5px 10px; /*descrie umplutura de sus și de jos, dreapta și stânga*/ padding: 7px; /*descrie toate marginile de 7px*/

Prin urmare, cum să indentați în CSS- întrebarea nu este dificilă, dar foarte relevantă. Pentru a înțelege mai bine informațiile descrise mai sus, ar trebui să rețineți că există două proprietăți: padding - indentări interne și margine - indentări externe. De asemenea, după cum știți deja, există mai multe moduri de a seta indentări, le puteți utiliza.