Моделът на кутия css

Моделът на кутия в CSS описва кутиите, които са генерирани от HTML елементи. Шаблонът на полето също съдържа подробни опции за задаване на полета, граници, подложки и съдържание за всеки елемент. Следното изображение показва как е изграден моделът на кутията.
Моделът на кутията или „моделът на кутията“ със сигурност е най -важната характеристика на езика на CSS стиловия лист, тъй като обуславя дизайна на всички уеб страници. Моделът на кутията е поведението на CSS, което кара всички елементи на страниците да бъдат представени с правоъгълни кутии.
Кутии с една страница се създават автоматично. При всяко вмъкване на HTML маркер се създава ново правоъгълно поле, което обхваща съдържанието на този елемент. Следното изображение показва трите правоъгълни полета, които създават трите HTML маркера, които страницата включва.

В действителност всички елементи на уебсайт (параграфи, връзки, изображения, таблици и т.н.) са правоъгълни кутии. Браузърите поставят тези полета по начина, по който сме ги посочили, за да изложат страницата.
Има два вида кутии: блок и вграден. Блоковите елементи прекъсват потока на оформлението. Тоест те се появяват сами, вмъквайки „прекъсвания на редове“. Вградените елементи следват потока и се съдържат в блокови елементи.
Например абзацът би бил блоков елемент (не можем да имаме параграф до другия, но два параграфа подред ще се появят един под друг. От друга страна, връзката е вграден елемент, тъй като не "изрежете" текста, където е.
Частите, които съставляват всяка кутия, и редът им на показване от гледна точка на потребителя са следните:
Съдържание (съдържание): това е HTML съдържанието на елемента (думите в абзац, изображение, текстът в списък с елементи и т.н.)
Подплата: По избор свободно пространство между съдържание и рамка.
Граница: ред, който напълно обхваща съдържанието и неговите подложки.
Фоново изображение: Изображението се показва зад съдържанието и пространството за пълнене.
Цвят на фона: цвят, показан зад съдържанието и пространството за пълнене.
Марж (марж): незадължително разделяне между кутията и другите съседни кутии.
Подложката и полето са прозрачни, така че пространството, заемано от подложката, показва цвета на фона или изображението (ако е определено), а пространството, заемано от полето, показва цвета на фона или изображението на вашия родител на елемент (ако е дефинирано). Ако никой родителски елемент няма определен фон или изображение, се показва цветът на фона или изображението на страницата (ако е дефиниран).
Ако едно поле дефинира както цвят, така и фоново изображение, изображението има по -висок приоритет и е това, което се показва. Въпреки това, ако фоновото изображение не покрива изцяло кутията с елементи или ако изображението има прозрачни области, цветът на фона също се показва. Чрез комбиниране на прозрачни изображения и цветове на фона могат да се постигнат много интересни графични ефекти.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка