Sifat lebar CSS mentakrifkan lebar kawasan kandungan elemen. Kawasan ini ialah ruang antara sempadan, padding dan jidar elemen. Selain itu, sifat lebar CSS dengan nilai ' muat-kandungan ” akan melaraskan lebar elemen mengikut kandungan.
Kajian ini akan menerangkan sifat lebar CSS dengan kandungan nilai muat.
Bagaimana Menggunakan Harta Lebar CSS Dengan Nilai kandungan yang sesuai?
Untuk tujuan menggunakan sifat lebar CSS dengan nilai kandungan muat, lihat sintaks yang diberikan:
lebar: muat-kandungan
Contoh
Dalam HTML, tambahkan tiga elemen div dengan nama kelas yang sama “ kotak ” dan tiga kelas berbeza “ warna-1 ”, “ warna-2 ”, dan “ warna-3 ”, masing-masing. Tambahkan elemen
di dalam setiap div untuk menambah kandungan pada halaman web:
< div kelas = 'warna kotak-1' >
< hlm > Kandungan muat lebar CSS hlm >
div >
< div kelas = 'warna kotak-2' >
< hlm > Hai dunia ! hlm >
div >
< div kelas = 'warna kotak-3' >
< hlm > Kerja berpasukan bermula dengan membina kepercayaan. Kami adalah satu pasukan yang bekerja untuk misi bersama. hlm >
div >
Berikut ialah output kod HTML:
Setakat ini, kami telah membincangkan halaman HTML. Sekarang, dalam bahagian seterusnya, kami akan menggunakan gaya CSS yang berbeza pada elemen HTML untuk menjadikannya kelihatan lebih baik. Dalam contoh yang berterusan, kami akan menyemak kelakuan ' lebar 'harta yang mempunyai nilai' muat-kandungan ” dalam CSS.
Gaya 'kotak' div
.kotak {lebar: muat-kandungan;
ketinggian: 50px;
warna: ghostwhite;
padding: 6px;
jidar: 2px;
saiz fon: 18px;
}
' .kotak ” merujuk kepada kotak kelas div. Berikut adalah sifat-sifat yang digunakan untuknya:
-
- “ lebar ” harta dengan nilai “ muat-kandungan ” menggunakan ruang yang ada, tetapi ia tidak akan melebihi kandungan.
- “ ketinggian ” ialah sifat yang menentukan ketinggian unsur.
- “ warna ” mentakrifkan warna fon elemen.
- “ padding ” harta menghasilkan ruang di dalam sempadan elemen atau di sekeliling kandungan.
- “ margin ” menentukan ruang di sekeliling elemen.
- “ Saiz huruf sifat ” menentukan saiz fon.
Gaya 'warna-1' div
.warna- 1 {warna latar belakang: #00ABB3;
}
' warna latar belakang harta ” ditetapkan kepada “ .warna-1 ” div.
Gaya 'warna-2' div
.warna- 2 {warna latar belakang: #083AA9;
}
Gaya 'warna-3' div
warna latar belakang: #4C6793;
}
Ia boleh diperhatikan bahawa lebar elemen ditetapkan sama dengan kandungan:
Itu bagus! Kami telah berjaya mempelajari penggunaan CSS ' lebar ” harta dengan nilai “ muat-kandungan ”.
Kesimpulan
Sifat lebar CSS membolehkan kami menggunakan beberapa nilai. Nilai ini adalah dalam peratusan, piksel atau lebih. Untuk menetapkannya mengikut kandungan, ' muat-kandungan nilai ” boleh ditetapkan. Siaran ini telah menerangkan sifat lebar CSS dengan kandungan nilai muat dengan demonstrasi praktikal.