Agar biz div 100px kengligi va balandligi 100px boʻlsa, toʻldirish uchun 10px va chegara 10px qoʻshilgan boʻlsa, natijada 100x100 kvadrat emas, balki 140 x 140 piksel boʻladi: Lekin baʼzida div har qanday toʻldirish va toʻldirish uchun belgilangan kenglik boʻlishi talab qilinadi
chegara qiymatlari. CSS3 da box-sizing xususiyati bizga yordam beradi.
Box o‘lchamidan foydalanish
Bu xususiyat ikkita qiymatga ega:
content-box - sukut bo‘yicha, div ichidagi tarkib eski tarzda ko‘rsatiladi, ya’ni yuqoridagi misolda bo‘lgani kabi: 100x100 o‘rniga 140x140 bo‘ladi
chegara qutisi to‘ldirish va chegara qiymatlarini qutining kengligi va uzunligidan olib tashlashga imkon beradi, ya'ni. bizning misolimizda div sobit bo‘lib qoladi, lekin kontent 60x60 piksel bo‘lib qoladi
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #eaeaea;
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
Brauzerni qo‘llab-quvvatlash
Box-sizing xususiyati ko‘pgina zamonaviy brauzerlarni qo‘llab-quvvatlaydi: Firefox 3.6+, Safari 3+, Opera 8.5+ va Internet Explorer 8+. Eng so‘nggi ma'lumotlarni caniuse.com saytida ko‘rish mumkin .
Amaliy misol
Box-sizing xususiyatidan foydalanishning hayotiy misolini ko‘rib chiqaylik. Menyu beshta elementdan iborat:
<ul>
<li><a href="#">Menu 1a>li>
<li><a href="#">Menu 2a>li>
<li><a href="#">Menu 3a>li>
<
Dostları ilə paylaş: |
