CSS pločio ypatybė apibrėžia elemento turinio srities plotį. Ši sritis yra tarpas tarp elemento kraštinės, užpildymo ir paraštės. Be to, CSS pločio ypatybė su reikšme tinkamas turinys “ pakoreguos elemento plotį pagal turinį.
Šis tyrimas paaiškins CSS pločio ypatybę su verte fit-content.
Kaip naudoti CSS pločio nuosavybę su tinkamumo turinio verte?
Norėdami naudoti CSS pločio ypatybę su fit-content reikšme, patikrinkite nurodytą sintaksę:
plotis: tinkamas turinys
Pavyzdys
HTML pridėkite tris div elementus su tuo pačiu klasės pavadinimu ' dėžė “ ir trys skirtingos klasės “ spalva - 1 “, „ spalva - 2 “ ir „ spalva - 3 “, atitinkamai. Pridėkite
elementą kiekviename div, kad įtrauktumėte turinį į tinklalapį:
< div klasė = 'dėžutės spalva-1' >
< p > CSS pločio tinkamas turinys p >
div >
< div klasė = 'dėžutės spalva-2' >
< p > Labas pasauli ! p >
div >
< div klasė = 'dėžutės spalva-3' >
< p > Komandinis darbas prasideda nuo pasitikėjimo kūrimo. Mes dirbame komanda dėl bendra misija. p >
div >
Štai HTML kodo išvestis:
Iki šiol aptarėme HTML puslapį. Dabar kitame skyriuje mes pritaikysime skirtingus CSS stilius HTML elementams, kad jie atrodytų geriau. Dabartiniame pavyzdyje patikrinsime, kaip elgiasi „ plotis „turtas, turintis vertę“ tinkamas turinys “ CSS.
Stilius 'dėžutė' skyr
.dėžė {plotis: tinka-turinys;
aukštis: 50px;
spalva: ghostwhite;
pamušalas: 6px;
paraštė: 2 pikseliai;
šrifto dydis: 18 pikselių;
}
„ .dėžė “ nurodo div klasės langelį. Žemiau pateikiamos jam taikomos savybės:
-
- “ plotis „turtas, kurio vertė“ tinkamas turinys “ išnaudoja laisvą erdvę, tačiau ji neviršys turinio.
- “ aukščio “ yra savybė, kuri lemia elemento aukštį.
- “ spalva “ apibrėžia elemento šrifto spalvą.
- “ kamšalas “ savybė sukuria erdvę elemento kraštinėje arba aplink turinį.
- “ marža “ nustato erdvę aplink elementą.
- “ šrifto dydis “ ypatybė nustato šrifto dydį.
Stilius „spalva-1“ skyr
.spalva- 1 {fono spalva: #00ABB3;
}
„ fono spalva ypatybė nustatyta į „ .spalva-1 “ dal.
Stilius 'spalva-2' skyr
.spalva- 2 {fono spalva: #083AA9;
}
Stilius 'spalva-3' skyr
fono spalva: #4C6793;
}
Galima pastebėti, kad elemento plotis yra lygus turiniui:
Tai puiku! Mes sėkmingai išmokome naudotis CSS plotis „turtas, kurio vertė“ tinkamas turinys “.
Išvada
CSS pločio ypatybė leidžia naudoti kelias reikšmes. Šios vertės nurodytos procentais, pikseliais ar daugiau. Norėdami nustatyti jį pagal turinį, „ tinkamas turinys “ reikšmę galima nustatyti. Šiame įraše buvo aprašyta CSS pločio ypatybė su verte fit-content ir praktinis demonstravimas.