При использовании таблиц стилей каждый виджет рассматривается как коробка, окруженная четырьмя вложенными друг в друга прямоугольниками: прямоугольник полей (margin rectangle), прямоугольник границ (border rectangle), прямоугольник заполнения (padding rectangle) и прямоугольник содержимого (content rectangle). Модель "коробки" описывает это более детально.

Модель "коробки" (The Box Model)

Четыре вложенных друг в друга прямоугольника концептуально показаны ниже:

• Поля располагаются за пределами границы.
• Граница отрисовывается между полями и заполнителем (padding).
• Заполнитель располагается внутри границы, между границей и фактическим содержимым.
• Содержимое - это то, что останется от исходного виджета или субэлемента управления если удалить поля, границы и заполнитель.

Свойства margin, border-width и padding по умолчанию равны нулю. В этом случае все четыре прямоугольника (полей, границ, заполнения и содержимого) полностью совпадают.

Для задания фона виджета вы можете использовать свойство background-image. По умолчанию, фоновое изображение (background-image) отрисовывается только для области внутри границ. Это можно изменить используя свойство background-clip. Вы можете использовать свойства background-repeat и background-origin для управления повторяемостью и источником фонового изображения.

Фоновое изображение не масштабируется по размерам виджета. Чтобы предоставить "обложку" (skin) или масштабируемое в соответствии с размерами виджета фоновое изображение нужно использовать свойство border-image. Поскольку свойство border-image предоставляется как альтернатива фоновому изображению, в случае задания border-image задавать background-image не требуется. В том случае, когда заданы они оба, border-image отрисовывается поверх background-image.

В дополнение, свойство image можно использовать для отрисовки изображения поверх border-image. Заданное изображение не повторяется (tile) и не растягивается (stretch), а если его размер не совпадает с размерами виджета его выравнивание определяется свойством image-position. В отличие от background-image и border-image, в свойстве image можно указать изображение SVG, при этом это изображение автоматически масштабируется в соответствии с размерами виджета.

Этапы визуализации правила изложены ниже:

• Устанавливается отсечение (clip) для всей операции визуализации (border-radius)
• Отрисовывается фоновое изображение (background-image)
• Отрисовывается изображение границы (border-image, border)
• Отрисовывется изображение наложения (overlay) (image)

Субэлементы управления

Виджет рассматривается как иерарахия (дерево) субэлементов управления, отрисовываемых по очереди. Например, в QComboBox отрисовывается сначала субэлемент управления выпадающего списка, а затем субэлемент управления кнопки выпадающего списка (down-arrow). Таким образом QComboBox визуализируется как изложено ниже:

• Визуализируется правило QComboBox { }
• Визуализируется правило QComboBox::drop-down { }
• Визуализируется правило QComboBox::down-arrow { }

Субэлементы управления совместно используют взаимоотношения между предками и потомками. В случае QComboBox предком кнопки выпадающего списка является выпадающий список, а предком выпадающего списка - сам виджет. Субэлементы управления располагаются внутри своего родителя используя свойства subcontrol-position и subcontrol-origin.

После расположения к субэлементам управления можно применить стиль используя модель "коробки".

Замечание: В случае сложных виджетов, таких как QComboBox и QScrollBar, если одно свойство или субэлемент управления настраивается, то и все остальные свойства или субэлементы управления также должны настраиваться.