Назария

Модели блокӣ

Ин барои чӣ лозим аст

Ҳар унсур дар саҳифа — росткунҷа аст, ҳатто агар мудаввар намояд. Корти мол, тугма, сархат — ҳамаи инҳо қуттиҳо мебошанд. Барои идора кардани он ки онҳо чӣ қадар ҷой мегиранд ва аз ҳамдигар чӣ қадар дур меистанд, модели блокӣ (box model)-ро фаҳмидан лозим аст. Ин асоси ҳар тартибдиҳии саҳифа аст: бе он на тугмаи зебо сохтан мумкин, на тӯри ҳамвор.

Қуттӣ аз чӣ иборат аст

Аз дарун ба берун:

content — мундариҷа (матн, расм); андозаи он — width ва height;
padding — фосилаи дохилӣ, «ҳошияи холӣ» байни мундариҷа ва ҳошия; замина ба ин ҷо ҳам медарояд;
border — ҳошия;
margin — фосилаи берунӣ, масофа то ҳамсояҳо; он ҳамеша шаффоф аст.

Монандӣ: расм дар чорчӯба. Матоъ — content, паспарту — padding, чорчӯба — border, масофа то расми ҳамсоя дар девор — margin.

Андозаҳо

.box {
  width: 300px;
  height: 100px;
  background: lightblue;
}

Натиҷа: росткунҷаи осмонии 300×100 пиксел.

Одатан height-ро намедиҳанд — бигзор баландӣ ба матн мутобиқ шавад, вагарна матни дароз аз блок берун мебарояд. Ба ҷои он min-height ва max-width ҳастанд: «на камтар аз» ва «на зиёдтар аз».

padding, border, margin

.button {
  padding: 10px 20px;
  border: 2px solid navy;
  margin: 15px;
  background: skyblue;
}

Натиҷа: тугмаи осмонӣ бо ҳошияи кабуди торик; матн аз ҳошия 10px аз боло/поён ва 20px аз паҳлӯҳо дур аст; гирди тугма 15px ҷои холӣ.

Навишти кӯтоҳ — бо самти ақрабаки соат, аз боло оғоз карда:

Навишт	Маъно
`padding: 10px;`	ҳамаи чор тараф 10px
`padding: 10px 20px;`	боло/поён 10px, чап/рост 20px
`padding: 5px 10px 15px;`	боло 5, чап/рост 10, поён 15
`padding: 1px 2px 3px 4px;`	боло, рост, поён, чап

Ҳамин барои margin ҳам кор мекунад. Як тарафро додан мумкин: padding-left: 8px;, margin-top: 0;.

Ҳошия бо се калима навишта мешавад: ғафсӣ, услуб, ранг. Услубҳо: solid (яклухт), dashed (хати шикаста), dotted (нуқтаҳо), double (дугона).

Мудаввар кардани кунҷҳо — border-radius:

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}

Натиҷа: доираи норанҷӣ — квадрат бо мудаввариҳои 50% ба доира табдил меёбад.

Ба марказ гузоштани блок

Блоки дорои бари додашударо ба марказ гузоштан мумкин, агар тамоми ҷои холиро баробар ба чап ва рост диҳӣ:

.container {
  width: 600px;
  margin: 0 auto;
}

Натиҷа: сутуни 600px дақиқ дар мобайни саҳифа. auto маънои «ҷои холиро тақсим кун»-ро дорад.

box-sizing

Найранг: бо пешфарз width — ин бари танҳо мундариҷа аст. Padding ва ҳошия аз боло илова мешаванд:

.a { width: 200px; padding: 20px; border: 5px solid; }

Натиҷа: дар экран блок бо бари 200 + 20·2 + 5·2 = 250px.

Ин нороҳат аст, бинобар ин қариб ҳамаи сайтҳо реҷаи дигарро фаъол мекунанд:

* {
  box-sizing: border-box;
}

Акнун width — бари якҷоя бо padding ва ҳошия. Блоки .a маҳз 200px мешавад, барои мундариҷа 150px мемонад. Интихобгари * маънои «ҳамаи унсурҳо»-ро дорад.

Ҳамшавии фосилаҳо

margin-ҳои амудии ду блоки ҳамсоя ҷамъ намешаванд, балки «ҳам мешаванд» — калонтараш гирифта мешавад:

.first { margin-bottom: 30px; }
.second { margin-top: 20px; }

Натиҷа: байни блокҳо 30px, на 50px. Бо фосилаҳои уфуқӣ чунин намешавад.

Дар дохил чӣ тавр кор мекунад

Абзорҳои барномасозро кушо (F12), унсурро интихоб кун — дар ҷадвалчаи «Computed» нақшаи росткунҷаҳои ба ҳам дохилшуда мешавад: margin-и норанҷӣ, ҳошияи зард, padding-и сабз, content-и кабуд, бо ададҳо дар ҳар тараф. Ин беҳтарин роҳи фаҳмидани он аст, ки ҷои зиёдатӣ аз куҷо пайдо шуд.

Хатоҳои маъмул

Блок аз канор «берун баромад». width: 100% ҷамъ padding — зиёда аз 100%. Бо box-sizing: border-box ислоҳ мешавад.
margin: auto ба марказ намегузорад. Блок width надорад — он ҳамин тавр ҳам ба тамоми бар аст, ба марказ гузоштан чизе нест.
height-и собит ва матни дароз. Матн аз блок берун мебарояд. height-ро нест кун ё min-height-ро истифода бар.
padding ва margin-ро омехта мекунанд. Заминаи блок бо padding «калон мешавад», бо margin не. Ҷои бештар дар дохили тугма лозим — padding; дуртар аз ҳамсояҳо — margin.
Ҳошия бе услуб. border: 2px red; — ҳошия намешавад, услуб лозим аст: border: 2px solid red;.

Ёддошт

Хусусият	Чӣ кор мекунад
`width`, `height`	андозаҳои мундариҷа
`min-height`, `max-width`	«на камтар аз», «на зиёдтар аз»
`padding: 10px 20px`	фосилаи дохилӣ (боло/поён, чап/рост)
`border: 1px solid #ccc`	ҳошия: ғафсӣ, услуб, ранг
`border-radius: 8px / 50%`	мудаввар кардан / доира
`margin: 0 auto`	фосилаи берунӣ / ба марказ гузоштани блок
`box-sizing: border-box`	бар якҷоя бо padding ва ҳошия
`* { … }`	қоида барои ҳамаи унсурҳо