Tinutukoy ng CSS width property ang lapad ng content area ng elemento. Ang lugar na ito ay ang espasyo sa pagitan ng hangganan, padding, at margin ng isang elemento. Bukod dito, ang CSS width property na may value na “ akma-nilalaman ” ay ayusin ang lapad ng elemento ayon sa nilalaman.
Ipapaliwanag ng pag-aaral na ito ang CSS width property na may value na fit-content.
Paano Gamitin ang CSS width na Ari-arian na May Halaga ng Nilalaman?
Para sa layunin ng paggamit ng CSS width property na may fit-content value, tingnan ang ibinigay na syntax:
lapad: fit-content
Halimbawa
Sa HTML, magdagdag ng tatlong elemento ng div na may parehong pangalan ng klase ' kahon 'at tatlong magkakaibang klase' kulay-1 ”, “ kulay-2 ”, at “ kulay-3 ”, ayon sa pagkakabanggit. Magdagdag ng
elemento sa loob ng bawat div upang magdagdag ng nilalaman sa web page:
< div klase = 'kulay ng kahon-1' >
< p > CSS width fit content p >
div >
< div klase = 'kulay ng kahon-2' >
< p > Hello Mundo ! p >
div >
< div klase = 'kulay ng kahon-3' >
< p > Nagsisimula ang pagtutulungan sa pamamagitan ng pagbuo ng tiwala. Kami ay isang pangkat na nagtatrabaho para sa isang karaniwang misyon. p >
div >
Narito ang output ng HTML code:
Sa ngayon, napag-usapan na natin ang HTML page. Ngayon, sa susunod na seksyon, ilalapat namin ang iba't ibang mga estilo ng CSS sa mga elemento ng HTML upang gawing mas mahusay ang mga ito. Sa patuloy na halimbawa, titingnan natin ang pag-uugali ng ' lapad ' ari-arian na may halaga ' akma-nilalaman ” sa CSS.
Estilo 'kahon' div
.kahon {lapad: fit-content;
taas: 50px;
kulay: ghostwhite;
padding: 6px;
margin: 2px;
laki ng font: 18px;
}
Ang ' .kahon ” ay tumutukoy sa div class box. Nasa ibaba ang mga katangian na inilalapat dito:
-
- “ lapad ' ari-arian na may halaga ' akma-nilalaman ” ay gumagamit ng magagamit na espasyo, ngunit hindi ito lalampas sa nilalaman.
- “ taas ” ay ang ari-arian na tumutukoy sa taas ng elemento.
- “ kulay ” ay tumutukoy sa kulay ng font ng elemento.
- “ padding ” ang pag-aari ay gumagawa ng espasyo sa loob ng hangganan ng elemento o sa paligid ng nilalaman.
- “ margin ” tumutukoy sa espasyo sa paligid ng elemento.
- “ laki ng font Tinutukoy ng property ang laki ng font.
Istilo 'kulay-1' div
.kulay- 1 {kulay ng background: #00ABB3;
}
Ang ' kulay ng background 'Ang ari-arian ay nakatakda sa ' .kulay-1 ” div.
Style 'color-2' div
.kulay- 2 {kulay ng background: #083AA9;
}
Istilo 'kulay-3' div
kulay ng background: #4C6793;
}
Mapapansin na ang lapad ng elemento ay nakatakdang katumbas ng nilalaman:
Iyan ay mahusay! Matagumpay naming natutunan ang paggamit ng CSS ' lapad ' ari-arian na may halaga ' akma-nilalaman ”.
Konklusyon
Ang CSS width property ay nagbibigay-daan sa amin na gumamit ng ilang value. Ang mga halagang ito ay nasa porsyento, mga pixel, o higit pa. Upang itakda ito ayon sa nilalaman, ang ' akma-nilalaman ” halaga ay maaaring itakda. Inilarawan ng post na ito ang CSS width property na may value fit-content na may praktikal na demonstrasyon.