CSS matematik funksiyalari
CSS Math funksiyalari
CSS matematik funksiyalari xususiyat qiymatlari sifatida matematik ifodalardan foydalanish imkonini beradi.
Bu bobda quyidagi matematik funksiyalarni tushuntirib beramiz:
calc()max()min()clamp()
CSS calc() funksiyasi
calc() funksiyasi xossa qiymati sifatida ishlatiladigan matematik hisob-kitobni bajaradi.
calc() funksiyasi qo‘shish (+), ayirish (-), ko‘paytirish (*) va bo‘lish (/) amallarini qo‘llab-quvvatlaydi va piksel hamda foiz kabi turli birliklarni birlashtirishi mumkin.
CSS sintaksisi
calc(expression)
| Qiymat | Tavsif |
|---|---|
| expression | Majburiy. Matematik ifoda. Natija qiymat sifatida ishlatiladi |
Bir misolga qaraylik:
Misol
<div> elementining kengligi va balandligini hisoblash uchun calc() dan foydalanish:
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
O‘zingiz sinab ko‘ring »
CSS max() funksiyasi
max() funksiyasi vergul bilan ajratilgan qiymatlar ro‘yxatini oladi va ro‘yxatdagi eng katta qiymatni xossa qiymati sifatida ishlatadi.
CSS sintaksisi
max(value1, value2, ...)
| Qiymat | Tavsif |
|---|---|
| value1, value2, ... | Majburiy. Vergul bilan ajratilgan qiymatlar ro‘yxati |
Bir misolga qaraylik:
Misol
#div1 kengligini eng katta qiymatga — 50% yoki 300px — o‘rnatish uchun max() dan foydalanish:
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
O‘zingiz sinab ko‘ring »
CSS min() funksiyasi
min() funksiyasi vergul bilan ajratilgan qiymatlar ro‘yxatini oladi va ro‘yxatdagi eng kichik qiymatni xossa qiymati sifatida ishlatadi.
CSS sintaksisi
min(value1, value2, ...)
| Qiymat | Tavsif |
|---|---|
| value1, value2, ... | Majburiy. Vergul bilan ajratilgan qiymatlar ro‘yxati |
Bir misolga qaraylik:
Misol
#div1 kengligini eng kichik qiymatga — 50% yoki 300px — o‘rnatish uchun min() dan foydalanish:
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding:
10px;
}
O‘zingiz sinab ko‘ring »
CSS clamp() funksiyasi
clamp() funksiyasi viewport o‘lchamiga qarab minimal qiymat, afzal ko‘rilgan qiymat va maksimal qiymat o‘rtasida moslashuvchan tarzda o‘zgaradigan qiymat belgilash uchun ishlatiladi.
clamp() funksiyasida uchta parametr bor: minimal qiymat, afzal ko‘rilgan qiymat va maksimal qiymat:
- Agar afzal ko‘rilgan qiymat min va max qiymatlar orasida bo‘lsa, afzal ko‘rilgan qiymat ishlatiladi
- Agar afzal ko‘rilgan qiymat min qiymatdan kichik bo‘lsa, min qiymat ishlatiladi
- Agar afzal ko‘rilgan qiymat max qiymatdan katta bo‘lsa, max qiymat ishlatiladi
CSS sintaksisi
clamp(min, preferred, max)
| Qiymat | Tavsif |
|---|---|
| min | Ixtiyoriy. Ruxsat berilgan eng kichik qiymat |
| preferred | Majburiy. Afzal qiymat |
| max | Ixtiyoriy. Eng katta ruxsat etilgan qiymat |
Bir misolga qaraylik:
Misol
<h2> elementining shrift o‘lchamini 5vw qilib belgilang, lekin hech qachon 1.5rem dan kichik yoki 3rem dan katta bo‘lmasin.
<div> elementining shrift o‘lchamini 2.5vw qilib belgilang, lekin hech qachon 1rem dan kichik yoki 2rem dan katta bo‘lmasin. Shuningdek, div konteynerni 50% kenglikda belgilang, lekin hech qachon 200px dan kichik yoki 600px dan keng bo‘lmasin:
h2 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
div {
border: 1px solid green;
padding: 10px;
font-size: clamp(1rem, 2.5vw, 2rem);
width:
clamp(200px, 50%, 600px);
}
O‘zingiz sinab ko‘ring »
CSS funksiyalari ma’lumotnomasi
Barcha CSS funksiyalarining to‘liq ro‘yxati uchun CSS funksiyalari ma’lumotnomasi sahifasiga tashrif buyuring.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!