La propietat d'amplada CSS defineix l'amplada de l'àrea de contingut de l'element. Aquesta àrea és l'espai entre la vora, el farciment i el marge d'un element. A més, la propietat d'amplada CSS amb el valor ' contingut d'ajust ” ajustarà l'amplada de l'element segons el contingut.
Aquest estudi explicarà la propietat d'amplada CSS amb el valor fit-content.
Com utilitzar la propietat d'amplada CSS amb un valor de contingut d'ajust?
Amb el propòsit d'utilitzar la propietat d'amplada CSS amb el valor de contingut d'ajust, consulteu la sintaxi donada:
amplada: contingut d'ajust
Exemple
A HTML, afegiu tres elements div amb el mateix nom de classe ' Caixa ' i tres classes diferents ' color-1 ”, “ color-2 ”, i “ color-3 ”, respectivament. Afegeix l'element
dins de cada div per afegir contingut a la pàgina web:
< div classe = 'color de la caixa-1' >
< pàg > Contingut ajustat a l'amplada CSS pàg >
div >
< div classe = 'caixa color-2' >
< pàg > Hola món ! pàg >
div >
< div classe = 'caixa color-3' >
< pàg > El treball en equip comença per generar confiança. Som un equip de treball per una missió comuna. pàg >
div >
Aquí teniu la sortida del codi HTML:
Fins ara, hem parlat de la pàgina HTML. Ara, a la següent secció, aplicarem diferents estils CSS als elements HTML per fer-los veure millor. En l'exemple en curs, comprovarem el comportament del ' amplada 'propietat que té el valor' contingut d'ajust ” al CSS.
Estil 'caixa' div
.Caixa {amplada: contingut d'ajust;
alçada: 50px;
color: blanc fantasma;
farciment: 6px;
marge: 2px;
mida de la lletra: 18px;
}
El ' .Caixa ” es refereix al quadre de classe div. A continuació es mostren les propietats que se li apliquen:
-
- “ amplada 'propietat amb el valor' contingut d'ajust ” utilitza l'espai disponible, però no superarà el contingut.
- “ alçada ” és la propietat que determina l'alçada de l'element.
- “ color ” defineix el color de lletra de l'element.
- “ farciment La propietat produeix espai dins de la vora de l'element o al voltant del contingut.
- “ marge ” determina l'espai al voltant de l'element.
- “ mida de la font ” La propietat determina la mida del tipus de lletra.
Estil 'color-1' div
.color- 1 {color de fons: #00ABB3;
}
El ' color de fons ', la propietat s'estableix en ' .color-1 ” div.
Estil 'color-2' div
.color- 2 {color de fons: #083AA9;
}
Estil 'color-3' div
color de fons: #4C6793;
}
Es pot observar que l'amplada de l'element s'estableix igual al contingut:
Això és genial! Hem après amb èxit l'ús del CSS ' amplada 'propietat amb el valor' contingut d'ajust ”.
Conclusió
La propietat d'amplada CSS ens permet utilitzar diversos valors. Aquests valors estan en percentatge, píxels o més. Per configurar-lo segons el contingut, el ' contingut d'ajust ” es pot configurar el valor. Aquesta publicació ha descrit la propietat d'amplada CSS amb el valor fit-content amb una demostració pràctica.