boxSizing
Misol
boxSizing xususiyatini o‘zgartiring:
document.getElementById("myDIV").style.boxSizing = "border-box";O‘zingiz sinab ko‘ring »
Tavsif
boxSizing xususiyati muayyan elementlarni ma’lum bir sohaga ma’lum tarzda moslashtirib belgilash imkonini beradi.
Masalan, ikkita chegarali qutini yonma-yon joylashtirmoqchi bo‘lsangiz, bunga boxSizing ni "border-box" ga o‘rnatish orqali erishish mumkin. Bu brauzerni qutini ko‘rsatilgan kenglik va balandlik bilan render qilishga hamda chegara va ichki bo‘shliqni (padding) quti ichiga joylashtirishga majbur qiladi.
Sintaksis
boxSizing xususiyatini qaytarish:
object.style.boxSizing
boxSizing xususiyatini o‘rnatish:
object.style.boxSizing = "content-box|border-box|initial|inherit"
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| content-box | Standart qiymat. Bu CSS2.1 da belgilangan width va height xatti-harakati. Ko‘rsatilgan kenglik va balandlik (hamda min/max xususiyatlari) mos ravishda elementning kontent qutisi (content box) kengligi va balandligiga qo‘llaniladi. Elementning ichki bo‘shlig‘i (padding) va chegarasi ko‘rsatilgan kenglik va balandlikdan tashqarida joylashtiriladi va chiziladi |
| border-box | Bu elementda ko‘rsatilgan kenglik va balandlik (hamda min/max xususiyatlari) elementning chegara qutisini (border box) belgilaydi. Ya’ni elementga berilgan har qanday ichki bo‘shliq (padding) yoki chegara shu ko‘rsatilgan kenglik va balandlik ichida joylashtiriladi va chiziladi. Kontent kengligi va balandligi ko‘rsatilgan 'width' va 'height' xususiyatlaridan tegishli tomonlarning chegara va ichki bo‘shliq kengliklarini ayirish orqali hisoblanadi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Texnik tafsilotlar
| Standart qiymat: | content-box |
|---|---|
| Qaytariladigan qiymat: | Elementning box-sizing xususiyatini ifodalovchi String |
| CSS versiyasi | CSS3 |
Tegishli sahifalar
CSS ma’lumotnomasi: box-sizing xususiyati
Brauzerlarda qo‘llab-quvvatlash
boxSizing — CSS3 (1999) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!