Fungsi Matematika CSS

Fungsi matematika CSS memungkinkan ekspresi matematika digunakan sebagai nilai atribut. Bab ini akan menggambarkan calc(),max() dan min() Fungsi.

Fungsi calc()

calc() Fungsi melaksanakan perhitungan dan menggunakan hasil sebagai nilai atribut.

Syarat CSS

calc(expression)
Nilai Deskripsi
expression Wajib. Ekspresi matematika. Hasil akan digunakan sebagai nilai. Dapat menggunakan operator berikut: +, -, *, /

Kami lihat contoh:

Contoh

Menggunakan calc() Hitung lebar elemen <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Coba Sendiri

Fungsi max()

max() Fungsi menggunakan nilai terbesar dalam daftar nilai yang dipisahkan koma sebagai nilai atribut.

Syarat CSS

max(value1, value2, ...)
Nilai Deskripsi
value1, value2, ... Wajib. Daftar nilai yang dipisahkan koma - pilih nilai terbesar.

Kami lihat contoh:

Contoh

Menggunakan max() Set width #div1 to 50% or the larger value of 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Coba Sendiri

Fungsi min()

min() Fungsi min() menggunakan nilai terkecil dalam daftar nilai yang dipisahkan dengan koma sebagai nilai atribut.

Syarat CSS

min(value1, value2, ...)
Nilai Deskripsi
value1, value2, ... Diperlukan. Daftar nilai yang dipisahkan dengan koma—memilih nilai terkecil

Kami lihat contoh:

Contoh

Menggunakan min() Mengatur lebar #div1 menjadi 50% atau nilai yang lebih kecil dari 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Coba Sendiri

Referensi Fungsi CSS

Untuk daftar lengkap fungsi CSS, kunjungi Panduan Referensi Fungsi CSS.