CSS quti modeli
CSS quti modeli
CSS’da "quti modeli" (box model) atamasi veb-dizayn va maket haqida gapirganda ishlatiladi.
CSS quti modeli asosan har bir HTML element atrofini o‘rab turuvchi qutidir.
Har bir quti to‘rt qismdan iborat: kontent, padding, chegaralar va marginlar.
Quyidagi rasm CSS quti modelini tushuntiradi:
Har xil qismlarning tushuntirishi (eng ichki qismdan eng tashqi qismgacha):
- Content — quti kontenti, matn va rasmlar shu yerda ko‘rinadi
- Padding — kontent atrofidagi maydonni tozalaydi. Padding shaffof
- Border — padding va kontentni o‘rab turuvchi chegara
- Margin — chegara tashqarisidagi maydonni tozalaydi. Margin shaffof
Quti modeli elementlar atrofiga chegara qo‘shish va elementlar orasidagi bo‘shliqni belgilash imkonini beradi.
Misol
Quti modelining namoyishi:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
O‘zingiz sinab ko‘ring »
Elementning kengligi va balandligi
Elementning kengligi va balandligini barcha brauzerlarda to‘g‘ri belgilash uchun quti modelining qanday ishlashini bilish kerak.
Muhim: Elementning width va height xossalarini CSS bilan belgilaganda, siz faqat kontent maydonining kengligi va balandligini belgilaysiz. Elementning umumiy kengligi va balandligini hisoblash uchun padding va chegaralarni ham hisobga olishingiz kerak.
Misol
Bu <div> elementining umumiy kengligi 350px va umumiy balandligi 80px bo‘ladi:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
O‘zingiz sinab ko‘ring »
Mana hisob-kitob:
Elementning umumiy kengligi mana bunday hisoblanishi kerak:
Total element width = width + left padding + right padding + left border + right border
Elementning umumiy balandligi mana bunday hisoblanishi kerak:
Total element height = height + top padding + bottom padding + top border + bottom border
Eslatma: margin xossasi quti sahifada egallaydigan umumiy maydonga ta’sir qiladi, lekin margin qutining haqiqiy o‘lchamiga kirmaydi. Qutining umumiy kengligi va balandligi chegara bilan tugaydi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!