Какое значение имеет фон в модели окна (содержимое, заполнение, граница и маржа)?фон на блоке и встроенных элементов?
другими словами, какая часть модели коробки будет настроена на отображение цвета фона, если я установил ее зеленым?
и это просто элементы блока (div, заголовок и т. Д.), Которые применяются к коробке? делать встроенные элементы (диапазон, текст), заполнение, граница и маржа тоже?
Эта небольшая диаграмма покажет, как появится окно в браузере:
box-chart http://img132.imageshack.us/img132/2692/boxchart.jpg
Как вы можете видеть, запас это пространство между самой коробкой и любой контент, который может быть вокруг него. Граница - это просто линия вокруг коробки. Прокладка - это пространство между краем окна и содержимым в поле. Любые фоны, которые вы установили, заполнят весь ящик (внутри границ), сохраняя при этом поле (пустое пространство) вокруг окна.
Почти каждый элемент может использовать маржу, фон и границу, я считаю. Тем не менее, некоторые элементы не поддерживают заполнение, если оно не является блочным уровнем, потому что в основном это будет то же самое, что и маржа. Вы всегда можете проверить различные стили, чтобы увидеть, что работает, а что нет, и как все перемещается в зависимости от стилей, которые вы настроили.
Элементы полного заполнения, не считая пространства, занимаемого полями. Вы можете проверить это с помощью следующей разметки/CSS:
.block { margin:5px; padding:0; width:25px; height:25px;
background-color:orange; float:left; }
<div class="block"></div>
<div class="block"></div>
Рендер, что и вы найдете в общей сложности 10px между оранжевыми коробками - наших краях.
Inline-элементы также имеют отступы и поля, но вы не всегда можете использовать их одинаково, поскольку они являются встроенными, а не блочными.