Proprietatea CSS width definește lățimea zonei de conținut a elementului. Această zonă este spațiul dintre marginea, umplutura și marginea unui element. Mai mult, proprietatea CSS width cu valoarea „ potrivire-conținut ” va ajusta lățimea elementului în funcție de conținut.
Acest studiu va explica proprietatea CSS width cu valoarea fit-content.
Cum să utilizați proprietatea CSS width cu valoarea fit-content?
În scopul utilizării proprietății de lățime CSS cu valoarea fit-content, verificați sintaxa dată:
lățime: potrivire-conținut
Exemplu
În HTML, adăugați trei elemente div cu același nume de clasă „ cutie ” și trei clase diferite ” culoare-1 ”, “ culoare-2 ', și ' culoare-3 ”, respectiv. Adăugați elementul
în interiorul fiecărui div pentru a adăuga conținut pe pagina web:
< div clasă = „culoarea casetei-1” >
< p > Lățimea CSS se potrivește conținutului p >
div >
< div clasă = „culoare cutie-2” >
< p > Salut Lume ! p >
div >
< div clasă = „culoarea casetei-3” >
< p > Munca în echipă începe prin construirea încrederii. Suntem o echipa de lucru pentru o misiune comună. p >
div >
Iată rezultatul codului HTML:
Până acum, am discutat despre pagina HTML. Acum, în secțiunea următoare, vom aplica diferite stiluri CSS elementelor HTML pentru a le face să arate mai bine. În exemplul în curs, vom verifica comportamentul „ lăţime „proprietate având valoarea „ potrivire-conținut ” în CSS.
Stil „cutie” div
.cutie {lățime: potrivire-conținut;
înălțime: 50px;
culoare: alb fantomă;
umplutură: 6px;
marginea: 2px;
dimensiunea fontului: 18px;
}
„ .cutie ” se referă la caseta de clasă div. Mai jos sunt proprietățile care îi sunt aplicate:
-
- „ lăţime „proprietate cu valoarea „ potrivire-conținut ” folosește spațiul disponibil, dar nu va depăși conținutul.
- „ înălţime ” este proprietatea care determină înălțimea elementului.
- „ culoare ” definește culoarea fontului elementului.
- „ umplutura ”proprietatea produce spațiu în interiorul graniței elementului sau în jurul conținutului.
- „ marginea ” determină spațiul în jurul elementului.
- „ marimea fontului ”determină dimensiunea fontului.
Stil „culoare-1” div
.culoare- 1 {culoare de fundal: #00ABB3;
}
„ culoare de fundal ” proprietatea este setată la ” .culoare-1 ” div.
Stil „culoare-2” div
.culoare- 2 {culoare de fundal: #083AA9;
}
Stil „culoare-3” div
culoare de fundal: #4C6793;
}
Se poate observa că lățimea elementului este setată egală cu conținutul:
Grozav! Am învățat cu succes utilizarea CSS-ului „ lăţime „proprietate cu valoarea „ potrivire-conținut ”.
Concluzie
Proprietatea CSS width ne permite să folosim mai multe valori. Aceste valori sunt exprimate în procente, pixeli sau mai mult. Pentru a seta în funcție de conținut, „ potrivire-conținut ” valoarea poate fi setată. Această postare a descris proprietatea CSS width cu value fit-content cu o demonstrație practică.