Модел цсс кутије

Модел кутије у ЦСС -у описује кутије које се генеришу из ХТМЛ елемената. Предложак оквира садржи и детаљне опције за постављање маргина, обруба, размака и садржаја за сваки елемент. Следећа слика приказује како је конструисан модел кутије.
Модел кутије или "модел кутије" је засигурно најважнија карактеристика језика ЦСС стилског листа, јер условљава дизајн свих веб страница. Бок модел је понашање ЦСС -а које доводи до тога да сви елементи на страницама буду представљени правоугаоним оквирима.
Оквири са једном страницом се стварају аутоматски. Сваки пут када се уметне ХТМЛ ознака, ствара се нови правоугаони оквир који обухвата садржај тог елемента. На следећој слици приказана су три правоугаона поља која креирају три ХТМЛ ознаке које страница садржи.

У стварности, сви елементи веб странице (одломци, везе, слике, табеле итд.) Су правоугаоне кутије. Прегледачи постављају ове оквире на начин на који смо их назначили за постављање странице.
Постоје две врсте кутија: блок и инлине. Блок елементи прекидају ток изгледа. То јест, појављују се сами, убацујући "преломе редова". Уграђени елементи прате ток и налазе се унутар блок елемената.
На пример, пасус би био блок елемент (не можемо имати параграф поред другог, али два пасуса у низу ће се појавити један испод другог. С друге стране, веза је инлине елемент, јер не садржи „исећи“ текст где се налази.
Делови који чине сваку кутију и њихов редослед приказа са тачке гледишта корисника су следећи:
Садржај (садржај): то је ХТМЛ садржај елемента (речи у пасусу, слика, текст на листи елемената итд.)
Подлога: Опциони слободан простор између садржаја и ивице.
Граница: редак који у потпуности обухвата садржај и његово пуњење.
Позадинска слика: Слика се приказује иза садржаја и простора за додавање.
Боја позадине: боја приказана иза садржаја и простора за додавање.
Маргина (маргина): опционално раздвајање кутије од осталих суседних кутија.
Одступање и маргина су транспарентни, тако да простор који заузима паддинг приказује боју позадине или слику (ако је дефинисана), а простор који заузима маргина приказује боју позадине или слику вашег елемента родитеља (ако је дефинисан). Ако ниједан родитељски елемент нема дефинисану боју позадине или слику, приказује се боја или слика позадине странице (ако је дефинисана).
Ако оквир дефинише и боју и слику у позадини, слика има већи приоритет и она се приказује. Међутим, ако позадинска слика не покрива у потпуности оквир ставке или ако слика има прозирна подручја, приказује се и боја позадине. Комбиновањем прозирних слика и боја позадине могу се постићи веома занимљиви графички ефекти.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен