CSS Box Modeli

CSS Box Modeli


CSS Block Model

Barcha HTML elementlari bloklar sifatida ko'rilishi mumkin. CSS da "bloklar modeli" termini dizayn va joylashuv uchun ishlatiladi.

CSS bloklar modeli bu har bir HTML elementini orab turuvchi blok. U margin, border, padding va content qismlaridan tashkil topgan.

Quyidagi rasm bloklar modelini tasvirlaydi:

Model qismlarining tavsifi:

  • Content - blokning kontenti yani matn va rasmlar joylashadigan qismi.
  • Padding - Content atrofidagi sohani tozalovchi shaffof qism.
  • Border - Content va Padding atrofidagi hoshiya.
  • Margin - Border atrofidagi sohani tozalovchi shaffof qism.

bloklar modeli yordamida elementlar atrofiga chegara qoshishimiz va elementlar orasidagi masofani belgilashimiz mumkin

Namuna:

O'zingni Sinab Ko'r
div {
width: 300px;
padding: 25px;
border: 25px solid green;
margin: 25px;
}

Elementning eni va balandligi

Barcha brauzerlarda to'g'ri bo'ladigan element boyi va balandligini kiritish uchun bloklar modeli qanday ishlashini bilib olishingiz kerak

...  CSS da elementning eni va balandligini kiritganda siz faqat elementning content qismining o'lchasmlarini belgilagan bo'lasiz. Elementning to'liq o'lchamini hisoblash uchun padding, border va margin larning qiymatlarini kiritishingiz shart.

<div> elementining umumiy enini 350 pikselga teng deb belgilamoqchimiz:

Namuna:

O'zingni Sinab Ko'r
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Hisob kitob:

320px (eni)
+ 20px (chap va o'ng padding lar)
+ 10px (chap va o'ng border lar)
+ 0px (chap va o'ng margin lar)
= 350px

Elementning to'liq eni quyidagicha hisoblanishi kerak:

To'liq eni = width + 2 * padding + 2 * border + 2 * margin

Elementning to'liq boyi quyidagicha hisoblanishi kerak:

To'liq eni = width + 2 * padding + 2 * border + 2 * margin

...  Internet Explorer 8 va eskiroq versiyalarida width xususiyati padding va border ni o'z ichiga oladi. Buni to'g'irlash uchun HTML faylga <!DOCTYPE html> ni qo'shib qo'ying.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017